Widgets are reusable components which make up the functionality of a portal page. Widgets define what a portal does and what information a user sees. ServiceNow provides a large number of baseline widgets.

Examples include:
Approvals
Knowledge Base
My Requests

A Widget is the code template used to display content in the portal. A Widget Instance is created when a Widget is added to a Page.

Every time a Widget is added to a Page it creates a new Widget Instance. Each Instance can be configured separately, allowing the same code template to be applied to different configurations. This allows a single Widget like the Simple List Widget to render multiple different types of content like a list of Incidents, a list of Links, or a list of Change Requests.

We can use $emit, $broadcast and $on to send and recieve the data.

- Example by using $broadcast

Include below code in client controller on source widget to send data.
$rootScope.$broadcast('dataEvent', data);

Include below code in client controller on target widget to recieve data.
$scope.$on('dataEvent', function (event, data) {
console.log(data); // 'recieved data'
});

- Example by using $emit

Include below code in client controller on source widget to send data.
$rootScope.$emit('dataEvent', id);

Include below code in client controller on target widget to recieve data.
$scope.$on('dataEvent', function (event, data) {
console.log(data); // 'recieved data'
});

Note : According to ServiceNow San diego docs, Avoid the use of $rootScope.$broadcast() because it can cause performance issues. Reference link - Using AngularJS Events with Widgets

Detailed article about widget communication : How to communicate between widgets in Service Portal

To access data between two pages, we need to send data via URL as shown below.

Set URL as below on source page client controller :
function ($scope, $window) {
var c = this:
c.onClick = function () {
$window.location.href = "/sp?id=new_portal_page&incidentNumber=" + INC00001234;
}
}

On the server side of the target page, we can use below code to access those parameters:
var incNumber = $sp.getParameter('incidentNumber');

We have data object to store data on server side script which later can be accessed in client script as shown in below example.

Server side script :
data.myNumber = 10;
data.myID = gs.getUserID(); //store data in myID variable

Client side script :
var userID = c.data.myID; //access stored data here

We can use c.server.update() method to execute server side script again where it can access client side 'data' object as 'input' object.
Example : Send incident number from client side to server side code and get associated assignment group.
Client Script Code :

function() {
/* widget controller */
var c = this;
c.data.incNumber = "INC0001234";
c.data.actionName="getIncidentAssignmentGroup"
c.server.update().then(function(response){
console.log(response.assignment_group;
});
}

Server side code :

if (input) {
if (input.actionName == "getIncidentAssignmentGroup") {
var grIncident=new GlideRecord("incident");
if(grIncident.get("number",input.incNumber){
input.assignment_group=grIncident.assignment_group;
}
}
}

Here is list of Service Portal API's that we can utilise, they are divided into two types Client Side and Server Side:

1. Service portal client side API's:

i) spAriaUtil - Show messages on a screen reader.
ii) spContextManager - Make data from a Service Portal widget available to other applications and services in a Service Portal page. For example, pass widget data to Agent Chat when it opens in a Service Portal page.
iii) spUtil - Utility methods to perform common functions in a Service Portal widget client script.
iv) spModal - Show alerts, prompts, and confirmation dialogs in Service Portal widgets. The SPModal class is available in Service Portal client scripts.

2. Service Portal server-side APIs

i) GlideSPScriptable - Interact with data and perform record operations in Service Portal widgets. We can access GlideSPScriptable methods by using the global $sp object.
ii) GlideSPSearchAnalytics - Generates search analytics from custom ServiceNow search widgets.
iii) spScriptedFacet - Define facet items, filters, or mapped queries for a facets object.
iv) spScriptedFacetService - Generate a multi choice or single choice facets object for an advanced search source.

Record Watch is a tool that allows a widget developer to respond to table updates in real-time. For instance, by using Record Watch, the Simple List widget can listen for changes to its data table and if new records are added, removed, or updated, the widget can update itself in real-time.

e.g.

function(spUtil, $scope) { /* widget controller */ var c = this; spUtil.recordWatch($scope, "incident", "active=true", function(name, data) { console.log(name); //Returns information about the event that has occurred console.log(data); //Returns the data inserted or updated on the table }); }