template sdk for creating templates using javascript/jquery - javascript

I am trying to create an sdk in javscript/jquery for creating templates based on user input, such as the type of templates - profile template, dialog template. These templates require data from an ajax call for their creation.
User Input should include some config param and type of templates.
Since I don't have much experience creating sdk's, I am trying to create a scalable and flexible sdk which can adopt some more functionalities and properties in future.
I am stuck on the problem that what is the basic and best way to create an javascript/jquery sdk?
var dialogTemplate , var = template2 I have added sample templates. The requirement is when user passes template/templates name in tmpConfig.config.type create that particular template/templates by fetching their data simultaneously for each template/templates.Suppose, when call 'dialog template' create dialog template. when call 'dialog template' and 'template2' create both and append it. These template name can be send in array in config.
Below is what I have tried:-
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="mySDK.js"></script>
</head>
<body>
// container for templates
<div id="tmpBox"></div>
</body>
<script type="text/javascript">
const tmpConfig = {
config: {
type: ['dialog','template2',...,...,....]
},
boxId: '#tmpBox'
};
var mySDK= new tmpSDK(tmpConfig );
mySDK.createtemplate(); // create template
</script>
</html>
mySDK.js
function tmpSDK(confg){
// implementation of sdk
this.config = confg;
}
tmpSDK.prototype.createtemplate= function(){
var idsToAppendTemplate = this.config.boxId;
var templateTypes = this.config.type;
// checking number of templates to create
for(var i=0 ; i < templateTypes.length; i++){
if(templateTypes === 'dialog'){
createDialog(idsToAppendTemplate )
}else if(templateTypes === 'template2'){
createTemplate2 (idsToAppendTemplate )
}
}
}
function getData(ajaxConfig){
$.ajax(){
return data;
}
}
// different templates html defined below:-
var dialogTemplate = function(data){
// play with data
var html = '<div class='dialog-template'>MY Dialog Template</div>';
return html;
}
var template2 = function(data){
// play with data
var html = '<div class='template2'>MY Template2</div>';
return html;
}
tmpSDK.prototype.createDialog = function(id){
var ajaxConfig = {
'url' : 'http://dialog endponts/',
....
}
var data = getData(ajaxConfig);
$(id).append(dialogTemplate(data)); // var dialogTemplate
}
tmpSDK.prototype.createTemplate2 = function(id){
var ajaxConfig = {
'url' : 'http://template2endponts/',
....
}
var data = getData(ajaxConfig);
$(id).append(template2(data) ); //// var template2
}

Please, consider to create your sdk as jQuery module with Class using.
(function ( $ ) {
$.fn.mySdk = function(options) {
const element = $(this);
const sdk = new MySdk(options, element);
element.data('plugin-my-sdk', sdk);
return $(this);
};
$.fn.getMySdk = function() {
const element = $(this);
return element.data('plugin-my-sdk');
};
class MySdk {
constructor(options, element) {
this.element = element;
this.settings = $.extend({
type: 'dialog',
}, options );
this.fetchTemplate().done(this.applyTemplate.bind(this));
}
fetchTemplate() {
return $.post({
url: `${document.location.origin}/your-endpoint-for-getting-template`,
data: {
'id': this.element.attr('id'),
'type': this.settings.type
}
});
}
applyTemplate(template) {
this.element.html(template);
}
apiMethod() {
const yourElement = this.element;
const yourElementId = this.element.attr('id');
const yourType = this.settings.type;
}
}
}( jQuery ));
// This snippet - is example of using your sdk
jQuery(function ($) {
const element = $('#tmpBox');
element.mySdk({
type: 'dialog'
});
const sdk = element.getMySdk();
sdk.apiMethod();
});
What this snippet do?
Wrap jQuery function for creating a not global scope and for avoiding jQuery conflict with $ function name
Uses MySdk class for the element.
This works for the case when there is only one jquery element in collection taking by the selector. In this case - const element = $('#tmpBox'); is taking only one element.
This snippet
this.settings = this.settings = $.extend({
type: 'dialog',
}, options );
merges default options with your options. If there is no option in your options object - then default option will be used
If you need to use jquery collection
For example, your sdk element is $('.tmpBox') where is there are more than 1 element - please, consider to use in mySdk each function for init every element.
const elements = $(this);
element.each(function(){
// init for every element;
})

Related

How to create an automated html input text field that will display values being fetched from an API?

I want to build an input text field which when clicked will show a list of values being fetched via the contentful API. The code doesnt seem to work when it reached the forEach loop. It works fine till the initArray. The forEach loop doesnt seem to work. I see all my data in the console.log of the initArray.
Am I missing something?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title> URL Builder </title>
<link rel="stylesheet" href="https://contentful.github.io/ui-extensions-sdk/cf-extension.css">
<script src="https://unpkg.com/contentful-ui-extensions-sdk#3"></script>
</head>
<body>
<form id="urlSearchContainer">
<div class="cf-form-field">
<input list="urlDataList" type="search" placeholder="Type your url here..." id="urlBuilder" class="cf-form-input">
<datalist id="urlDataList">
</datalist>
</div>
</form>
<script>
"use strict"
window.contentfulExtension.init(function(api) {
api.window.startAutoResizer();
// Set variables
var urlDataList = document.getElementById("urlDataList");
var urlInput = document.getElementById("urlBuilder");
function getUrlData(){
//api.space.getEntries({'content_type[ne]': 'page-MBH'})
var urlDataArray = [];
api.space.getEntries()
.then(function (entries) {
entries.items.forEach(function (entry) {
if(entry.fields.url){
var urlData = entry.fields.url.en
urlDataArray.push(urlData);
//console.log('urldata', urlDataArray);
}
})
})
return urlDataArray;
};
function createUrlDropdown(){
// Init data obj
var data = getUrlData();
var initArray = typeof data === 'object' && data instanceof Array && data.length > -1 ? data : [];
console.log('ARRAY:: ', initArray);
//Create and append url data list
initArray.forEach(function(item) {
console.log('item:: ', item);
//Create a new <option> element.
var option = document.createElement('option');
console.log('option', option);
option.value = item;
console.log('value', option);
// Add the <option> element to the <datalist>.
urlDataList.appendChild(option);
});
for(i = 0; i < initArray.length; i++) {
console.log('obj');
var option = document.createElement("option");
option.value = initArray[i];
urlDataList.appendChild(option);
}
}
document.getElementById("urlBuilder").addEventListener("click", function(){
createUrlDropdown();
});
});
</script>
</body>
</html>
Any help is appreciated!!
👋🏻
The problem is in the getUrlData function. api.space.getEntries returns a promise which you correctly use with then. The thing with promises is though that they're asynchronous (like so many things in javascript).
Meaning you initialize urlDataArray and make the call to contentful. And you fill this array when the call comes back. The thing is though getUrlData already returned an empty array.
function getUrlData(){
var urlDataArray = [];
api.space.getEntries()
.then(function (entries) {
// this part is executed async
entries.items.forEach(function (entry) {
if(entry.fields.url){
var urlData = entry.fields.url.en
urlDataArray.push(urlData);
}
})
})
return urlDataArray;
};
The best way to approach this IMO to change getUrlData to also return a promise.
function getUrlData() {
// return this promise
return api.space.getEntries()
.then(function(entries) {
// there is no need for another array
// you can use map to grab the data you need
return entries.items.map(function(item) {
// map all the entries to the url strings
return item.fields.url.en;
})
})
}
getUrlData()
// only execute this when the data is there
.then(function(urls) { console.log(urls); })
You code runs in a UI-extension but I also quickly changed your code in a codepen. It uses the Contentful CDA but the principles stays the same.
Hope that helps. :)

Loading selected GridView Item in Popup using CallBacks with ASP.Net MVC

I still relatively new to ASP.Net and the concepts of communicating between client and server. I am using DevExpress tools but I believe this issue is more of a misunderstanding of the concept.
I have a GridView within a partial view that is loaded via an Action #Html.Action('MessageGridView'). This works no problem and data is loaded fine with the index and a returned model.
#Html.DevExpress().GridView(settings =>
{
settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
settings.Name = "preparedMessagesGrid";
settings.CallbackRouteValues = new { Controller = "Messages", Action = "MessagesGridView" };
settings.KeyFieldName = "Id";
settings.SettingsBehavior.AllowSelectByRowClick = true;
settings.SettingsBehavior.AllowSelectSingleRowOnly = true;
settings.ClientSideEvents.Init = "GridViewInit";
settings.ClientSideEvents.SelectionChanged = "OnSelectionChanged";
settings.ClientSideEvents.BeginCallback = "OnBeginCallback";
settings.SettingsBehavior.AllowEllipsisInText = true;
settings.PreRender = settings.Init = (sender, e) =>
{
MVCxGridView gridView = sender as MVCxGridView;
gridView.Selection.SelectAll();
};
settings.Columns.Add("Name");
settings.Columns.Add("Description");
}).Bind(Model.preparedMessages).GetHtml()
What I am trying to achieve is when the user selects the row I wish the data to be loaded into the popup control when clicked. Is there a way I can set the parameters dynamically for the popup control callback?
#Html.DevExpress().PopupControl(settings =>
{
settings.Name = "pcModalMode";
settings.Width = 100;
settings.AllowDragging = true;
settings.CloseAction = CloseAction.CloseButton;
settings.CloseOnEscape = true;
settings.PopupAnimationType = AnimationType.None;
settings.HeaderText = "Login";
settings.Modal = true;
settings.PopupHorizontalAlign = PopupHorizontalAlign.WindowCenter;
settings.PopupVerticalAlign = PopupVerticalAlign.WindowCenter;
settings.CallbackRouteValues = new { Controller = "Messages", Action = "Load", new { id = THIS NEEDS TO BE SELECTED ID VALUE} };
settings.LoadContentViaCallback = LoadContentViaCallback.OnFirstShow;
}).GetHtml()
It works if I set the value static so I'm one step away from getting this working. What I have researched is that I can get the values from the GridView in javascript using the selection changed event.
function OnSelectionChanged(s, e) {
s.GetSelectedFieldValues("Id", GetSelectedFieldValueCallback);
}
I can then retrieve this value but can I set this to my popup control or am I misunderstanding being relatively new and possibly I could do this server side for when the ViewGrid callback is performed, then set it server side with a session of some sort?
You're just one step away to get currently selected grid value with this function:
function OnSelectionChanged(s, e) {
s.GetSelectedFieldValues('Id', GetSelectedFieldValueCallback);
}
What you need to do is declaring GetSelectedFieldValueCallback method as this (I got from a test that selectedValue contains array with single value for single grid row selection, use zero index to assign the value):
var id; // a global variable set to hold selected row key value from grid
function GetSelectedFieldValueCallback(selectedValue) {
if (selectedValue.length == 0)
return;
id = parseInt(selectedValue[0]);
pcModalMode.PerformCallback();
}
Then setting BeginCallback on PopupControl helper as given below, note that for DevExpress HTML helpers you can use customArgs in client-side to pass action method parameters instead of using CallbackRouteValues with id parameter:
#Html.DevExpress().PopupControl(settings =>
{
settings.Name = "pcModalMode";
// other stuff
settings.CallbackRouteValues = new { Controller = "Messages", Action = "Load" };
settings.ClientSideEvents.BeginCallback = "OnPopUpBeginCallback";
settings.ClientSideEvents.EndCallback = "OnPopUpEndCallback";
// other stuff
}).GetHtml()
// JS function for popup callback
function OnPopUpBeginCallback(s, e) {
e.customArgs["id"] = id; // this sends 'id' as action method parameter to `Load` action
}
// Optional end callback
function OnPopUpEndCallback(s, e) {
if (!pcModalMode.IsVisible())
pcModalMode.Show();
}
Finally, let's putting them all together in view & controller code:
View
<!-- View page -->
<script type="text/javascript">
var id;
function OnSelectionChanged(s, e) {
s.GetSelectedFieldValues('Id', GetSelectedFieldValueCallback);
}
function GetSelectedFieldValueCallback(selectedValue) {
if (selectedValue.length == 0)
return;
id = parseInt(selectedValue[0]);
pcModalMode.PerformCallback();
}
function OnPopUpBeginCallback(s, e) {
e.customArgs["id"] = id;
}
function OnPopUpEndCallback(s, e) {
if (!pcModalMode.IsVisible())
pcModalMode.Show();
}
</script>
GridView (partial view)
#Html.DevExpress().GridView(settings =>
{
settings.Name = "preparedMessagesGrid";
// other stuff
settings.ClientSideEvents.SelectionChanged = "OnSelectionChanged";
}).Bind(Model.preparedMessages).GetHtml()
Popup (partial view)
#Html.DevExpress().PopupControl(settings =>
{
settings.Name = "pcModalMode";
// other stuff
settings.CallbackRouteValues = new { Controller = "Messages", Action = "Load" };
settings.ClientSideEvents.BeginCallback = "OnPopUpBeginCallback";
settings.ClientSideEvents.EndCallback = "OnPopUpEndCallback";
// other stuff
}).GetHtml()
Controller
public class Messages : Controller
{
public ActionResult MessagesGridView()
{
// grid view populating data code lines here
return PartialView("_GridView", data);
}
public ActionResult Load(int id)
{
// code lines to find ID here
return PartialView("_ModalPopup", model);
}
}
References:
(1) Display GridView Row Details in PopupControl Window
(2) How to display detail data within a popup window (MVC)
(3) ASPxClientGridView.GetSelectedFieldValues (DevExpress Documentation)
(4) MVCxClientBeginCallbackEventArgs.customArgs (DevExpress Documentation)

Text to Html conversion in Sharepoint 2010

I have a SharePoint 2010 list of around 198 items. For the first 30 items Text to Html Javascript function successfully converts text code to Html but when I am trying to select next 31 items and go ahead using the pagination the function does not able to convert Html and display only text codes. Does anyone please who have the code handy to make this work? Below is the code used in SharePoint 2010. Thank you.
<script type="text/javascript">
function TextToHTML(NodeSet, HTMLregexp) {
var CellContent = "";
var i=0;
while (i < NodeSet.length){
try {
CellContent = NodeSet[i].innerText || NodeSet[i].textContent;
if (HTMLregexp.test(CellContent)) {NodeSet[i].innerHTML = CellContent;}
}
catch(err){}
i=i+1;
}
}
// Calendar views
var regexpA = new RegExp("\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*");
TextToHTML(document.getElementsByTagName("a"),regexpA);
// List views
var regexpTD = new RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$");
TextToHTML(document.getElementsByTagName("TD"),regexpTD);
// This function is call continuesly every 100ms until the length of the main field changes
// after which the convert text to HTML is executed.
//
var postElemLength = 0;
function PostConvertToHtml()
{
if (postElemLength == document.getElementsByTagName("TD").length)
{
setTimeout(PostConvertToHtml,100);
}
else
{
var regexpTD = new RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$");
TextToHTML(document.getElementsByTagName("TD"),regexpTD);
}
}
// Grouped list views
ExpGroupRenderData = (function (old) {
return function (htmlToRender, groupName, isLoaded) {
var result = old(htmlToRender, groupName, isLoaded);
var regexpTD = new RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$");
TextToHTML(document.getElementsByTagName("TD"),regexpTD);
// start the periodic callback to check when the element has been changed
if(isLoaded == 'false')
{
postElemLength = document.getElementsByTagName("TD").length;
setTimeout(PostConvertToHtml,100);
}
};
})(ExpGroupRenderData);
// Preview pane views
if (typeof(showpreview1)=="function") {
showpreview1 = (function (old) {
return function (o) {
var result = old(o);
var regexpTD = new RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$");
TextToHTML(document.getElementsByTagName("TD"),regexpTD);
};
})(showpreview1);
}</script>
Below is the generated text code which needs to be converted to Html. Thanks.
="<div style='position:relative;display:inline-block;width:100%;'>
<div style='width:100%;display:inline-block;text-align:center;border:1px solid "&Project_Status_clr&";position:absolute;color:"&Project_Status_clr&";'> "&Project_Status&"
</div>
<div style='display:inline-block;width: 100%;background-color:"&Project_Status_clr&";text-align:center;border:1px solid;z-index:-1;filter:alpha(opacity=20);opacity:0.2;'>"&Project_Status&"
</div>
</div>"
When generating a string of HTML in a calculated column in SharePoint 2010, you can change the calculated column's value type to "Number" to get the HTML to render in the list view.

how can I save the html to a variable

http://codepen.io/kevinchappell/pen/mPQMYZ
function showPreview() {
let formRenderOpts = {
formData: fbTemplate.value,
render: false
},
renderedForm = new FormRenderFn(formRenderOpts).markup,
html = `<!doctype html><title>Form Preview</title><body>${renderedForm}</body></html>`;
var formPreviewWindow = '';//window.open('', 'formPreview', 'height=480,width=640,toolbar=no,scrollbars=yes');
formPreviewWindow.document.write(html);
var style = document.createElement('link');
style.appendChild(document.createTextNode(''));
style.setAttribute('href', '//formbuilder.online/assets/css/form-render.min.css');
style.setAttribute('rel', 'stylesheet');
style.setAttribute('type', 'text/css');
formPreviewWindow.document.head.appendChild(style);
}
Instead of opening the html using window.open, how can I save the html to a variable?
With jQuery available, it's simple to just use the jQuery/$ constructor shortcut to turn your HTML string into a jQuery object. You can then use jQuery's append methods to more succinctly append your stylesheet.
The resulting object can then either be inserted in to the document, or have return the full HTML with jQuery's html() method.
var formRenderOpts = {
formData: fbTemplate.value,
render: false
},
renderedForm = new FormRenderFn(formRenderOpts).markup,
html = $('<!doctype html><head><title>Form Preview</title></head><body>' + renderedForm + '</body></html>');
html.find('head').append('<link rel="stylesheet" href="//formbuilder.online/assets/css/form-render.min.css"></style>');
//Output the HTML:
console.log(html.html());

x-editable Select in Meteor does not update value on clients

I want to use a select x-editable in my Meteor application. My goal is to assign users to groups. This should be reactive, so when you assign a user, other clients should see the changes. The current problem is that the assignment works (data-value changes), but only the user who made the change is able to see the new value.
Here is my code:
Template.userGroup.rendered = function() {
var groupId = this.data._id;
var sourceUsers = [];
Users.find().forEach(function(user) {
sourceUsers.push({value: user._id, text: user.username});
});
Tracker.autorun(function() {
$('.assign-user').editable("destroy").editable({
emptytext: "Empty",
source: sourceUsers,
success: function(response, result) {
if (result) {
Groups.update({_id: groupId}, {$set: {adminId: result}});
}
}
});
});
};
<template name="userGroup">
</template>
I already tried to "destroy" the stale x-editable and put it inside the Tracker.autorun function, but unfortunately, this does not work.
Any help would be greatly appreciated.
I don't use Tracker.autorun but I use x-editable for inline editing like this:
(also used it for group assigments - just like your case, but found it too clumsy on the UI side). Anyway, here's my code:
Template
<template name="profileName">
<td valign='top'>
<div id="profileNameID" class="editable" data-type="text" data-rows="1">{{profile.name}}</div>
</td>
</template>
And on the JS side
Template.profileName.rendered = function () {
var Users = Meteor.users;
var container, grabValue, editableColumns, mongoID,
_this = this;
var container = this.$('#profileNameID');
var editableColumns = container.size();
grabValue = function () {
var gValue = $.trim(container.html());
return gValue;
};
$.fn.editable.defaults.mode = 'inline';
return container.editable({
emptytext: 'Your name goes here',
success: function (response, newValue) {
var mongoID = removeInvisibleChars($(this).closest("tr").find(".mongoid").text());
var editedUser = _users.findOne({
_id: mongoID
});
Meteor.users.update(mongoID, {
$set: {
"profile.name": newValue
}
});
return container.data('editableContainer').formOptions.value = grabValue;
}
});
Update happens immediately on all subscribed authorized clients.

Categories

Resources