I've cloned the OOTB widget-form, named it widget-form-md, and created an additional option schema for hideRelatedLists:
I have a separate widget that is embedding my cloned widget-form-md and hope to display it via a Material Design modal. My client script for the modal looks like this:
function x ($scope, $location, spUtil, amb, $mdDialog, $http, $window, $rootScope, $timeout){
var c = this;
c.newRequest = function() {
$mdDialog.show({
contentElement: '#hr_request',
parent: angular.element(document.body),
clickOutsideToClose:true
});
spUtil.get("widget-form-md", {
request_name: 'hr_request',
view: 'hr_request',
table: 'x_dnf_federal_hr_e_federal_hr_cases'
}).then(function(response) {
c.hr_request = response;
});
};
}
What is the correct syntax to pass in my option schema into the spUtil? I've tried
spUtil.get("widget-form-md", {
request_name: 'hr_request',
hideRelatedLists: true
view: 'hr_request',
table: 'x_dnf_federal_hr_e_federal_hr_cases'
})
and
spUtil.get("widget-form-md", {
request_name: 'hr_request',
options: {hideRelatedLists:true},
view: 'hr_request',
table: 'x_dnf_federal_hr_e_federal_hr_cases'
})
Neither of them worked and I can't seem to find any documentation out there on how to do this. Any suggestions? Thanks!
First: Option Schema is used to configure a widget via a table:
https://dxsherpa.com/blogs/widget-options-schema-in-service-portal/
The Solution to the missing parameters, which don't show in the options of the called widgets was here: https://community.servicenow.com/community?id=community_question&sys_id=ea83c365dbd8dbc01dcaf3231f9619d2
When a widget is called using spUtil (client) then the parameters passed are accessed using "input".
When a widget is called using $sp (server) then the parameters passed are accessed using "options"
Since the call the widget with spUtil, we have the data on the server in the input object. Therefor in the server of the called widget:
data.requestName = input.request_name;
data.hideRelatedLists = input.hideRelatedLists;
// or the short version, if widget also gets parameters from URL and options:
data.requestName = $sp.getParameter('requestName ') || options.requestName || input.requestName;
It's a shame this is not described in the official documentation for it: https://developer.servicenow.com/app.do#!/api_doc?v=london&id=spUtilAPI
Related
Instead of using region.show(view), I would like to add multiple views to a region without destroying the view already present in the region. I have tried using preventDestroy: true, but it isnt working out. The region only shows the last "application".
var fetchingApplications = App.request('application:entities');
$.when(fetchingApplications).done(function(applications) {
console.log(applications);
applications.each(function(application) {
var applicationView = new List.Application({
model: application
});
App.layout.mainRegion.show(applicationView, { preventDestroy: true });
});
I know the example look weird, because I could merely use a CollectionView. However, using a CollectionView is not what I want to do.
I think it should works with dynamically add region and fadeIn. You could add class or inline style with 'display: none' so it will be initially not displayed and then in view put 'onShow : function(){ this.$el.fadeIn(); }'
I'm trying to use Backbone with REST API:
Here the code
My model:
var PagesModel = Backbone.Model.extend({
idAttribute: 'Guid',
initialize: function () {
this.on('remove', this.destroy);
},
urlRoot: '/api/pages'
});
Collection:
var PagesCollection = Backbone.Collection.extend({
model: PagesModel,
url: '/api/pages'
});
View:
var PagesView = Backbone.View.extend({
el: '#pages',
events: {
'click .removePage': 'remove',
},
initialize: function (collection) {
this.collection = collection;
this.collection.fetch();
this.template = $('#pages-template').html();
this.collection.bind('change reset', this.render, this);
},
render: function () {
var template = _.template(this.template);
$(this.el).html(template({ pages: this.collection.toJSON() }));
return this;
},
remove: function (e) {
e.preventDefault();
var id = $(e.currentTarget).closest('ul').data("id");
var item = this.collection.get(id);
this.collection.remove(item);
$(e.currentTarget).closest('ul').fadeOut(300, function () {
$(this).remove();
});
}
});
And here I'm starting up application:
$(function () {
var pagesCollection = new PagesCollection();
var pagesView = new PagesView(pagesCollection);
});
I'm clicking or Remove and in Network inspector see this link
http://localhost:54286/backbone/function%20()%20%7B%20%20%20%20%20%20var%20base%20=%20getValue(this,%20'urlRoot')%20%7C%7C%20getValue(this.collection,%20'url')%20%7C%7C%20urlError();%20%20%20%20%20%20if%20(this.isNew())%20return%20base;%20%20%20%20%20%20return%20base%20+%20(base.charAt(base.length%20-%201)%20==%20'/'%20?%20''%20:%20'/')%20+%20encodeURIComponent(this.id);%20%20%20%20}
instead of /api/pages/{guid}.
What I'm doing wrong?
I still haven't figured fully why, but you can make it work by destroying your model after the end of its removal (Backbone does one last thing after triggering the remove event: destroy the collection's reference in the model).
But what's even better, is using directly the destroy function on the model, it will remove it from the collection automatically (use {wait: true} if needed).
Edit:
Finally managed to locate the source of the problem. It's rather simple in fact. To override the model's url (calculated with urlRoot but that doesn't matter), you can pass Model#destroy a url option when calling Backbone.sync (or something that'll call it).
Now you're thinking "but I don't!". But you do. The listener (Model#destroy in your case) is given 3 arguments. Model#destroy will take the first one (the model itself) as options.
And here's the fail (I think Backbone needs a patch to this): giving an url option to Backbone.sync is the only time _.result in not used to calculate the url. So you find yourself having as url the url property of your model, which is the function you see in your call.
Now, for a quickfix:
this.on('remove', this.destroy.bind(this, {}));
This will ensure the first argument of your Model#destroy call is {} (as well as binding the context).
Bear with me a little longer.
Now, if you're still willing to call Collection#remove before destroying your model, here's a little hack: because (as I stated above) the remove event is triggered before Backbone makes sure to remove the collection's reference in your model, you don't need the urlRoot property in your model. Indeed, the model won't be in the collection anymore, but Backbone will still take the collection's url into account to get the model's url (as the reference is still there).
Not a definitive answer, but just going by the code in your question and the backbone.js documentation, the problem may be that you named your method remove and this is getting in the way of the remove method in Backbone.View.
http://backbonejs.org/#View-remove
Update:
It also looks like the output you see in the network inspector is that the definition of the Backbone.Model.url function is being appended. Meaning url is not being properly called (Maybe the () is missing by the caller?). Are you overriding Backbone.sync anywhere in your application?
Im trying to work form editing with autocomplete .. its source is different every time user opens edit form
when opening edit form :
beforeShowForm: function(frm) {
var id = grid.jqGrid('getGridParam','selrow');
if (id) {
var ret = grid.jqGrid('getRowData',id);
AccCode = ret.szAccCode;
};
$.post("url_getchildren", { szAccCode: AccCode}).
done(function(data) {
lschildcode=data;
});
},
i have managed result from server,
but i cant send it to grid.
colModel :
{name:'szAccParentCode',index:'szAccParentCode', editable:true, edittype:'text',
editoptions : {
dataInit: function(elem){
$(elem).focus(function(){
this.select();
}),
$(elem).autocomplete({
source:lschildcode
})
}
}
},
why i cant pass lschildcode to autocomplete's source? and autocomplete kept sending term to server every time i type in the box.
TIA
I think that dataInit (and so autocomplete) will be called before done of the $.post will be executed.
To fix the problem you can for example call $("#szAccParentCode").autocomplete({source:lschildcode}) inside of done.
Another way: one can use URL as the value of source. The URL can contains some additional parameters. If you need use HTTP POST you can declare source as function and call response parameter (callback function) inside of success or done of your source implementation. Just look at the implementation of source in the remote with caching example and examine the code (click on "view source") or examine the source code of jQuery UI Autocomplete near $.ajax usage (see here).
As far as I can tell, Backbone.js view represents DOM element. I take it from existing DOM or create it on the fly in el attribute.
In my case, I want to take it from server with AJAX request because I'm using Django templates and don't want to rewrite everything to JavaScript templates.
So I define el function that performs AJAX request.
el: function() {
model.fetch().success(function(response) {
return response.template
})
}
Of course, it does NOT work because AJAX request is executed asynchronous.
This means that I don't have el attribute and events does NOT work neither. Can I fix it?
Maybe the Backbone.js framework isn't the right tool for my needs? The reason I want to use that was to have some structure for the code.
P.S. I'm new to Backbone.js.
Do your ajax request from another view, or directly after the page load using jquery directly, and after you've downloaded your template, THEN instantiate your backbone view class with the proper id/el or whatever (depending on where you stored your ajax fetched template). Depending on your use-case, this may or may not be a sensible approach.
Another, perhaps more typical approach, would be to set up your view with some placeholder element (saying "loading" or whatever), then fire off the ajax, and after the updated template has been retrieved, then update your view accordingly (replace the placeholder with the actual template you requested).
When/if you update your view with new/other DOM elements, you need to call the view's delegateEvents method to rebind your events to the new elements, see:
http://backbonejs.org/#View-delegateEvents
I came across a similar requirement. In my instance, I was running asp.net and wanted to pull my templates from user controls. The first thing I would recommend is looking into Marionette because it will save you from writing a lot of boiler plate code in Backbone. The next step is to override how your templates are loaded. In this case I created a function that uses Ajax to retrieve the HTML from the server. I found an example of this function where they were using it to pull down html pages so I did a little modification so I can make MVC type requests. I can't remember where I found the idea from; otherwise, I would give the link here.
function JackTemplateLoader(params) {
if (typeof params === 'undefined') params = {};
var TEMPLATE_DIR = params.dir || '';
var file_cache = {};
function get_filename(name) {
if (name.indexOf('-') > -1) name = name.substring(0, name.indexOf('-'));
return TEMPLATE_DIR + name;
}
this.get_template = function (name) {
var template;
var file = get_filename(name);
var file_content;
var result;
if (!(file_content = file_cache[name])) {
$.ajax({
url: file,
async: false,
success: function (data) {
file_content = data; // wrap top-level templates for selection
file_cache[name] = file_content;
}
});
}
//return file_content.find('#' + name).html();
return file_content;
}
this.clear_cache = function () {
template_cache = {};
};
}
The third step would be to override Marionette's method to load templates. I did this in the app.addInitializer method. Here I am initializing my template loader and setting it's directory to a route handler. So when I want to load a template, I just set the template: "templatename" in my view and Backbone will load the template from api/ApplicationScreens/templatename. I am also overriding my template compiling to use Handlebars because ASP.net is not impressed with the <%= %> syntax.
app.JackTemplateLoader = new JackTemplateLoader({ dir: "/api/ApplicationScreens/", ext: '' });
Backbone.Marionette.TemplateCache.prototype.loadTemplate = function (name) {
if (name == undefined) {
return "";
} else {
var template = app.JackTemplateLoader.get_template(name);
return template;
}
};
// compiling
Backbone.Marionette.TemplateCache.prototype.compileTemplate = function (rawTemplate) {
var compiled = Handlebars.compile(rawTemplate);
return compiled;
};
// rendering
Backbone.Marionette.Renderer.render = function (template, data) {
var template = Marionette.TemplateCache.get(template);
return template(data);
}
Hopefully this helps. I've been working on a large dynamic website and it is coming along very nicely. I am constantly being surprised by the overall functionality and flow of using Marionette and Backbone.js.
I'm getting an error when parsing checkboxes in a table that is loaded with AJAX, but I get an error saying the widget with that id is already registered:
"Error('Tried to register widget with id==userListUncheckAll but that id is already registered')"
And I'm guessing this happens because we take out the current table, then replace it with what ever we get back from the AJAX call, and thus the element id's would be the same. Is there a way to "unregister" the widgets or something similar?
I found the answer for this myself, so I'll put it here for others:
If you have a set of id's that you know will need to be "unregistered", create an array of the id names:
try {
dojo.parser.parse();
} catch (e) {
var ids = ['id1', 'id2', 'id3'];
dijit.registry.forEach(function(widget) {
//remove this check if you want to unregister all widgets
if (dojo.indexOf(ids, id) {
widget.destroyRecursive();
}
});
dojo.parser.parse();
}
Works like a charm.
Get the parent node that you are inserting the AJAX content into and parse ONLY this node. You are getting this error because other widgets in your DOM are getting parsed twice. Something like this:
require(["dojo/dom", "dojo/parser", "dojo/_base/xhr"/*, etc */ ],
function(dom, parser, xhr) {
var request = xhr.get({
// your details here
});
request.then(function(data) {
// transform data if necessary
var parentNode = dom.byId("/* parent id */");
parentNode.innerHTML = data;
// This is where the widgets get built!
parser.parse(parentNode); // or parser.parse("/* parent id */");
}, function(err) {
// handle error
});
});
Also, make sure you include the right dojo / dijit modules. A common mistake is to forget to include the modules for the widgets that you are trying to insert. For example, if you are using TabContainer, add "dijit/layout/TabContainer" to the list of required modules.
Within the Dojo Parser documentation is included this code snipet:
dojo.xhrGet({
url: "widgets.html",
load: function(data){
dojo.byId("container").innerHTML = data;
dojo.parser.parse("container");
}
})
I applied in my code and works fine.