Service Portal widget development in ServiceNow Development

Service Portal widget development

Build reusable portal components with HTML, client and server scripts.

Quick answer

The Service Portal is built from widgets, self-contained components you drop onto a page. Each widget has three cooperating parts, so learning the data flow between them is the whole skill.

Key takeaways

The three parts
Server script populates data
Modern note
Try it Yourself

Build reusable portal components with HTML, client and server scripts.

The Service Portal is built from widgets, self-contained components you drop onto a page. Each widget has three cooperating parts, so learning the data flow between them is the whole skill.

The three parts

HTML template

AngularJS markup that renders c.data and calls c.server.*.

Client script

A controller (c) for browser behaviour and events.

Server script

Runs on the server, populates data, handles input.

Server script populates data

// Server script: runs before render, fills data
(function() {
  data.items = [];
  var gr = new GlideRecord('sc_req_item');
  gr.addActiveQuery();
  gr.query();
  while (gr.next()) {
    data.items.push({ number: gr.getValue('number') });
  }
})();

// HTML
<div ng-repeat="item in data.items">{{item.number}}</div>

c.server.update() bridges the sides. The client calls c.server.update() (or c.server.get({...})) to re-run the server script and refresh c.data. Pass actions through input; never try to run GlideRecord from the client script.

Modern note

Service Portal widgets use AngularJS. New greenfield experiences increasingly use UI Builder and Now Experience components, but widgets remain the backbone of most production portals today.

Practise this on your own free instance.

Set up your free instance →

Try it YourselfJavaScript

▸ Press Run to execute.

Runs in a sandbox in your browser. Mock gs and GlideRecord and sample data are provided.

Practice challenge

+0 XPStreak ×0

Question 1 of 3

A Service Portal widget has how many script parts?