angularjs

Loading the AngularJS library on a ServiceNow instance may appear to be impossible at first, but with the following handy trick, you have can AngularJS capabilities within just a few short minutes.

Please note, this trick is not just limited to AngularJS, but also to most any other consumable complicated Javascript Library.

Step 1 – Download the AngularJS Library

Download the AngularJS library on your your hard drive. To do this, simply browse to https://angularjs.org/ and choose a download option. I like to download the zip file so that I can choose any of the angular libraries.

Step 2 – Create a blank UI Script

UI scripts are client-side JavaScript library files, as opposed to script includes which are server-side JavaScript. UI scripts provide a way to package JavaScript into a reusable form. They are stored in the database to make them more easily customizable than .js files packed within a deployment. They can be called from client scripts, UI Pages, UI Macros, and more.

One problem, however is that if you try to paste the AngularJS library script into the Script field, you will get errors when you try to save the script. The built in javascript editor does not like some of the syntax used by the library. So, we have to use a back-door approach to get this to work.

Create a new UI Script by browsing to System UI > UI Scripts and clicking New

I like to name my UI Script by the library I am loading. In my case, the Name is: angularjs.min.1.3.2

You can add a description if you like, but keep the script field blank. Then click Submit

My Blank UI Script

My Blank UI Script

Step 3 – Add the script via List View

Now you should be redirected to this view for UI Scripts (If you are not, just browse there once again).

Modify your list view temporarily by clicking on the gear icon.

listgear

Now find the “Script” field in the “Available” column and move it over to the “Selected” column. Then click OK.

bringoverscript

Open the AngularJS file that you downloaded from the AngularjS.org and copy the contents of that file to your clipboard.

Now filter the UI Scripts list so that you can see your new library record. Double click on the “Script” column so that you get an edit box. Then paste the angular code into that edit box.

editboxonlist

Click the Green submit icon on your edit box in the list to save the record.

Step 4 – Call the script from your page

In my example, I will use a UI Page jelly script. In order to get load the AngularJS library into a UI Page, you must use the <g:requires> tag. UI Scripts are cached, so you use the following code snippet to dynamically let the browser know if it should reload the script or not. See the code snippet I used:

1
2
3
4
5
6
7
8
9
10
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <g2:evaluate var="jvar_stamp">
        var gr = new GlideRecord('sys_ui_script');  
        gr.orderByDesc('sys_updated_on');  
        gr.query();  
        gr.next();  
        gr.getValue('sys_updated_on');  
    </g2:evaluate>  
    <g:requires name="angularjs.min.1.3.2.jsdbx" params="cache=$[jvar_stamp]" />  
</j:jelly>

Optionally, since AngularJS is a released Library, you could just not worry about the cache. Chances are you will not be modifying it much. In that case, you can just use the simple requires tag without the cache handling capabilities:

1
2
3
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <g:requires name="angularjs.min.1.3.2.jsdbx" />  
</j:jelly>

Demo Video