Service Portal and client scripts
Summarize
Summary of Service Portal and client scripts
This content explains how to use client scripts and catalog client scripts within the Service Portal environment in ServiceNow, specifically for the Zurich release. It highlights the conditions under which these scripts operate, the APIs and globals supported, and practical coding considerations when targeting mobile or desktop interfaces.
Show less
Key Features
- UI Type Settings: Client scripts and catalog client scripts can function in Service Portal if their UI Type is set to Mobile / Service Portal or All. This ensures they are recognized in mobile and portal contexts.
- API Usage: Only mobile-compatible APIs should be used in scripts flagged as Mobile or Service Portal to ensure proper functionality.
- Runtime Detection: Scripts can differentiate behavior between desktop and mobile runtime environments using a check such as
if (window === null)to execute appropriate code. - Unsupported Globals: Certain globals like
$,$$,$j,angular,document,jQuery, andwindoware not available in Service Portal client scripts. However, widget client controllers can fully use Angular and jQuery. - Embedded Widgets & gform Access: When using macros to embed widgets in catalog item forms, the embedded widget’s client controller can access the field object and the catalog item's
gforminstance via$scope.page.fieldand$scope.page.gform(). - Glide List Support: The
glistglobal is provided to manipulate Glide list elements or list collector variables, replacing the desktop-specificgfilterAPI in Service Portal. - Service Catalog API: The
gservicecatalogAPI is available exclusively in Service Portal catalog item scripts to detect whether a catalog item is part of an order guide.
Practical Guidance for ServiceNow Customers
- Before marking a client script as Mobile or All, verify the script only uses mobile-supported APIs to avoid runtime issues.
- Use the runtime detection snippet to tailor script behavior for mobile versus desktop environments within the same script.
- Avoid using unsupported globals in client scripts; leverage widget client controllers for advanced Angular or jQuery functionality.
- Utilize
glistto manage list collectors in Service Portal forms effectively. - Use
gservicecatalog.isOrderGuide()in catalog item scripts to customize behavior based on whether the item is ordered individually or through an order guide. - Ensure client scripts intended for Service Portal environments are set with the correct UI Type and use only supported client-side APIs.
You can use client scripts and catalog client scripts in the Service Portal if the UI Type is set to Mobile / Service Portal or All. Client scripts and catalog client scripts are used with the Form widget and SC Catalog Item widget, as opposed to a widget client controller.
Before flagging a script as Mobile/Service Portal or All, make sure that you are only using the mobile APIs. Setting a client script to Mobile does not ensure that it will work, it simply flags that the script should be attempted by the mobile app or the Service Portal. Many of your existing client scripts can be set to All as long as the API calls are supported by the mobile client scripting environment.
The topics in this section require advanced coding knowledge and an understanding of Service Portal APIs.
Checking desktop vs mobile runtime
if (window === null)
// Write your mobile compatible code here
else
// Write your desktop compatible code hereUnsupported client scripting globals
The following globals and APIs are unavailable in client scripts and catalog client scripts used in the Service Portal:
- $
- $$
- $j
- angular
- control
- document
- jQuery
- window
Embedded widgets & g_form
When using the Service Catalog variable type Macro and Macro with Label, you can pick a widget to embed in a catalog item form. Within the client controller for the embedded widget you can access the field object and catalog item g_form instance using:
$scope.page.field$scope.page.g_form()
Client scripts used with Service Portal
function onLoad() {
var myListCollector = g_list.get("my_list_collector");
myListCollector.reset();
myListCollector.setQuery("active=true^category=8c7b22230b402200b0b02c6317673a62");
myListCollector.addItem('3a700d39af5f4fc0aab978df90f4c692', 'Power Supply');
myListCollector.addItem('1cb93419a3a248318da8f814140b42f6', 'Backpack');
}function onLoad() {
if (window) // if CMS, don't run this
return;
// g_service_catalog api for Service Portal and Mobile
var isOrderGuide = g_service_catalog.isOrderGuide();
g_form.setValue("is_order_guide", isOrderGuide ? "Yes!" : "Nope :(");
}