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

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 →

Practice challenge

3 questions

Q1A Service Portal widget has how many script parts?

Three: HTML, client, server

HTML template, client script and server script.

Q2The client refreshes server data by calling...

c.server.update()

c.server.update()/get() re-runs the server script.

Q3Service Portal widgets are built with...

AngularJS

The Service Portal framework uses AngularJS.

Frequently asked questions

What does the term Service Portal widget development refer to in ServiceNow?

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.

What is the practical takeaway on Service Portal widget development?

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

Want this taught live, with job support?

ServiceNow Training is delivered live by working practitioners, with certification prep and placement support.

See ServiceNow Training →