Problem Statement
ServiceNow states that it is best practice to avoid DOM manipulation in your client scripts. Anyone that has run a HealthScan on their instance will attest to a focus on this area. As of the ServiceNow London release, client scripts run in "strict mode" as default. Strict mode prevents direct access to the Document Object Model (DOM) through the "Isolate script" toggle.
Unfortunately, the ServiceNow docs prescribed method to hide cascaded variables on the desktop uses DOM techniques. The example script fails, when created in London (or above), as the default strict mode prevents client scripts from directly accessing the DOM.
Goals for new "Hide Cascading Variables" Client Script
- Remove all DOM techniques from the client script.
- Maintain a single Client Script for both Service Portal and Desktop.
This article is not an end-to-end guide explaining techniques to cascade an order guide variable or how to use service catalog variable sets. There is already good sources of information for these topics on ServiceNow docs.
Hide Cascading Variables, on Service Portal and Desktop, in one Client Script (no direct access to DOM)
When exploring the above problem statement, I came up with a solution which fits the goals I set out.
onLoad Client Script Configuration:
| Client Script Fields | Value |
|---|---|
| Name: | <Name of your Client Script> |
| Applies to: | A Variable Set |
| UI Type: | All |
| Type: | onLoad |
| Variable Set: | <Name of your Variable Set> |
| Applies on a Catalog Item view: | true (ticked) |
Code:
function onLoad() {
/*in strict mode ("Isolate script" is true) we don't have access to the window object so it will return null for Service Portal/Mobile and desktop
* instead we use a try/catch block to test if we have access to g_service_catalog which is only available in Service Portal/Mobile
*/
//create array with internal variable names to hide
var varsToHide = ["your_variable_1","your_variable_2","your_variable_3"];
/*Service Portal/Mobile code
____________________________________________________________________________________________________*/
try {
//check if we are in an order guide using the g_service_catalog api for Service Portal and Mobile
var isOrderGuide = g_service_catalog.isOrderGuide();
if (isOrderGuide) {
//call function to hide the fields on the catalog items if this is an order guide.
hideVariables(varsToHide);
}
}
/*Desktop code
____________________________________________________________________________________________________*/
catch(e) {
/* test that error message relates to g_service_catalog then execute desktop only code.
*/
if (/g_service_catalog is not defined/.test(e.message)) {
var item = g_form.getControl("current_item"); //sys_id of the current item
var guide = g_form.getControl("sysparm_guide"); //sys_id of the order guide
//check if both HTML elements were returned.
if (item == null && guide == null) {
return; //return as we are not in a order guide
}
//test that both HTML elements were returned and whether they are equal to each other.
if (item != null && guide != null && item.value == guide.value) {
return; //return as we are on the "Describe Needs" section of the order guide
}
hideVariables(varsToHide); //hide the variables if the above conditions weren't met.
}
}
function hideVariables(varsArray){
for (var i=0; i< varsArray.length; i++) {
//variables to be hidden need to be not mandatory before setting display to false.
g_form.setMandatory(varsArray[i],false);
g_form.setDisplay(varsArray[i],false);
}
}
}
The described technique tests for the availability of g_service_catalog.isOrderGuide() API which is only available in Service Portal/Mobile. If we get an error message we test if it relates to "g_service_catalog" then revert to the alternative desktop code. The desktop code utilises the g_form.getControl(String fieldName) API to extract the guide and item values (sys_id's) for the required compare.
There you have it, an easy to manage, single client script, to hide cascading variables on both Service Portal and Desktop.
If you found this information valuable then please remember to mark as helpful and bookmark for later use.
