Thank you for your feedback.
Form temporarily unavailable. Please try again or contact docfeedback@servicenow.com to submit your comments.
Versions
  • Madrid
  • London
  • Kingston
  • Jakarta
  • Istanbul
  • Helsinki
  • Geneva
  • Store
Close

Widget client script

Log in to subscribe to topics and get notified when content changes.

Widget client script

Use the client script to handle all the client-side logic and template binding for your widget.

This information is for users with advanced coding knowledge. Only make changes to client scripts if you have a firm understanding of AngularJS and the platform API.

Every widget is an Angular directive; you can use the client script to define the controller for that directive. The client script is the controller already linked to the widget. For example, the stock widget uses the following client script:

function() {    
    var c = this;
    c.update = function() {
        c.data.price = false;
        c.server.get({symbol:c.data.symbol}).then(function(r) {            
            c.data.price = r.data.price;            
        });
    }
}
Note: By default, widgets are created with an anonymous client controller function and the controller_as value of c. As a result, c represents the instance of the client script controller.

Client Script properties

Property Description
this.server.get([Object]) Calls the server and sends custom input. Returns Promise.
this.server.update() Calls the server and posts this.data to the server script. Returns Promise.
this.server.refresh() Calls the server and automatically replaces the current options and data from the server response. Returns Promise.

A promise represents the eventual result of an asynchronous operation. Promises are objects or functions that usually contain a then method, which subscribes to this specification. For more information on promises, see https://promisesaplus.com/ or the AngularJS documentation site.

Note: Because catalog client scripts need to be compatible with the mobile API, some catalog client scripts with advanced customizations might not work in Service Portal.

Client script example using g_list

The g_list global helps you set the filter of a glide list element or a list collector variable. Use this API in place of the g_filter API on desktop client scripts.
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');
}

Client script example using g_service_catalog

The g_service_catalog global is only available in Service Portal service catalog item scripts. For example, this API call uses g_service_catalog to check to see if the catalog item script is being run as part of an order guide.
 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 :(");
}

Client script example using g_service_catalog

The g_service_catalog global is only available in Service Portal service catalog item scripts. For example, this API call uses g_service_catalog to check to see if the catalog item script is being run as part of an order guide.
 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 :(");
}
Feedback