Several days ago I posted an article about how to include Multiple ServiceNow stylesheet records in your UI page or UI macro in a way that you could easily tell which stylesheets you were using and keeping the latest version from being cached and not visible. (Referencing Multiple Styles with ServiceNow UI pages).
Today, I would like to stay on a similar vein and show an example of how you can reference Javascript UI Scripts easily and quickly and a UI page or macro using some jelly magic. Often times, I have to bring in javascript libraries from multiple “UI Script” records. While I do want to let the system cache those libraries, I also want to get the latest version of the library should it be updated.
Now you could simply just list each one out on their own in such a manner:
1 2 | <g:requires name="MyUiScriptNumber1.jsdbx" /> <g:requires name="MyUiScriptNumber2.jsdbx" /> |
However, when those scripts get changed, there is a potential delay in when you will get the latest version in your browser due to browser caches.
In order to tackle this problem I created the following JavaScript and jelly code snippet that allows me to simply insert the names of all the UI Script libraries that I am going to use. The script automatically includes all of those libraries with their latest versions in my page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <g:evaluate object="true"> var uiscripts = [ //BEGIN EDIT "MyUiScriptNumber1", "MyUiScriptNumber2" //END EDIT ]; var jslibs = []; for( var key in uiscripts ){ var gr = new GlideRecord('sys_ui_script'); gr.addQuery("name", uiscripts[key]); gr.query(); gr.next(); jslibs.push( {"name": gr.name, "ts": gr.sys_updated_on } ); } </g:evaluate> <j:forEach var="jvar_js_lib" indexVar="jvar_js_index" items="${jslibs}"> <g:evaluate jelly="true"> var js_lib_name = jelly.jvar_js_lib.name; var js_lib_ts = jelly.jvar_js_lib.ts; </g:evaluate> <g:requires name="${js_lib_name}.jsdbx" params="cache=${js_lib_ts}" /> </j:forEach> |
Simply copy that code snippet and place it in your page. All you have to modify are the lines in the “uiscripts” array as shown in the following diagram:
Finally, this is not the only way to do this and there are a lot of other cool, tricky methods out there. This is just the method that has grown on me. I am curious to know how you have hanlded multiple UI Script declarations in the past. Feel free to post your discussion as comments below.
The post Linking Several Javascript Libraries into ServiceNow UI pages appeared first on John Andersen.