NOTE: MY POSTINGS REFLECT MY OWN VIEWS AND DO NOT NECESSARILY REPRESENT THE VIEWS OF MY EMPLOYER, ACCENTURE.
DIFFICULTY LEVEL: ADVANCED
Assumes having taken the class SSNF and has good intermediate to advanced level of knowledge and/or familiarity with Scripting in ServiceNow.
Back in November of 2015, in one of my responses out on the Scripting forum @kevinanderson made a wistful comment about wishing we had a compatible port of underscore.js. It got me to thinking, and I believe I have found a pretty straightforward way to implement it!
Prerequisites:
1. Know the basics of scripting in ServiceNow.
2. Familiar with UI Action, Scripts - Background, Script Includes, and UI Scripts.
What will be covered:
1. Script Include port
2. UI Script port
3. GlideSystem Include (gs.include)
4. Testing of the entire port
Requirements:
1. The underscore.js library must be available and fully functional on both the front- (browser), and back-end (Server) Scripting environments.
You can find a copy of one that will work in Global here. This is version 1.8.3 which is the newest one I could find that works in Global.
Design:
1. Since UI Scripts are not available to the Server, and Script Includes are not available to the browser this will have to be a split or double port.
Lab 1.1: Port underscore.js to the Server Side
1. In your ServiceNow instance navigate to System Definition -> Script Includes. The Script Includes list view will be displayed.
2. Click on the New button. A blank Script Include form will be displayed.
3. Fill in the form with the following:
Name: underscorejs.min
Client Callable: unchecked
Accessible From: All application scopes
Active: checked
Description: Server-side underscore.js library
Blank out the Script template.
Note: I kept the name from my original article as it may someday be relevant again. I had to minify it to work back then. ServiceNow has improved everything so that isn't necessary. If you want to leave .min off feel free to do so.
4. Now we need the actual underscore.js code. BTW, the full underscore code library is worthy of study.
a. Navigate to GreasyFork (they had a good copy) and copy the code you find there: Link
b. Copy out just the code from the window.
c. Go back to your Script Include and paste the underscore.js code into the Script field.
d. Click the Submit button to save your work.
e. That is it for activating the underscore.js library on the Server side. So let's test it out.
5. Navigate to Scripts - Background. Make sure the scope is Global.
6. Test your new library with the following code:
gs.include('underscorejs.min'); // bring in our library
var even = _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
gs.info('---> even: ' + even);
var map1 = _.map([1, 2, 3], function(num){ return num * 3; });
var map2 = _.map({one: 1, two: 2, three: 3}, function(num, key){ return num * 3; });
var map3 = _.map([[1, 2], [3, 4]], _.first);
gs.info('---> map1: ' + map1);
gs.info('---> map2: ' + map2);
gs.info('---> map3: ' + map3);
8. Click on the Run script button to execute your test. Your results will look like this:
*** Script: 2
*** Script: 3,6,9
*** Script: 3,6,9
*** Script: 1,3
Note: Another test is to go turn off your Script Include (Active unchecked) and rerun the above script. In a word: Boom!
Woohoo! It worked! Now let's go get it working for the browser side.
Lab 1.2: Port underscore.js to the Browser Side
Since this type of Script Include is not available to the Client Side then we need to create a library that is also available to the Browser. To do this we will need to use a UI Script.
1. From your ServiceNow instance navigate to System UI -> UI Scripts. The UI Scripts list view will be displayed.
2. Click on the New button. A blank UI Script form will be displayed.
3. Fill out the form with the following:
a. Name: underscorejs.min
b. UI Type: Desktop
c. Active: checked
d. Global: checked
e. Script: It is the exact same code as is n the first lab.
f. Click the Submit button to save your work.
NOTE: Global UI Scripts are not available in Scoped applications.
Now we are done with setup, let us go and do a test! For that we will be creating a new button on the Incident form that will do nothing more than test our new underscore.js library. This button will not interact with the Incident, but instead the Incident provides a platform for us to test our functionality.
4. Navigate to System UI -> UI Actions. The UI Actions list view will be displayed.
5. Click the New button. A blank UI Action form will be displayed.
6. Fill out the form with the following:
a. Name: Test Underscore.js
b. Table: Incident
c. Order: 100
d. Form Button: checked
e. Active: Checked
f. Show insert: Checked
g. Show update: Checked
h. Client: Checked
i. Onclick: test()
j. Script:
function test() {
g_form.addInfoMessage('ready');
try {
_.each([1, 2, 3], function(number) {
g_form.addInfoMessage(number);
});
} catch (err) {
g_form.addInfoMessage(err);
}
}
7. Click the Submit button to save your work.
8. Navigate to Incident -> Open. The Open Incidents list view will be displayed.
9. Click on an Incident and open it. The Incident form should be displayed and you should see our new Test Undrescore.js button in the upper right of the form.
10. Click on the Test Underscore.js button. You should see an messages displayed like this:
It works!!!! Woohoo! Cool stuff!
12. Now go and mark your UI Action active field as unchecked to turn it off.
You now have a front- and back-end implementation of underscore.js. Obviously this opens up the ability to bring in other libraries (perhaps Node.js?).
So there you go Kevin; challenge met!
Enjoy!
Steven Bell.
If you find this article helps you, don't forget to log in and mark it as "Helpful"!
Originally published on: 11-05-2015 12:05 PM
I updated the code and brought the article into alignment with my new formatting standard.
13 Comments
