What is Widget in Service Portal?

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

What is difference between widget and widget instance?

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.

How to pass data from one widget to another widget?

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

How to pass data from one portal page to another portal page?

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');

How to pass data from Server side to client side in widget?

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

How to pass data from Client side to Server side in widget?

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;
}
}
}

Name different API's which are used in Service Portal?

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.

How to refresh widget data in Service Portal if a user creates/updates/deletes a record using the standard ServiceNow UI in backend?

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 }); }

How to debug if certain user are unable to access widget during peak usage hours only?

How to pass data from Client Script to HTML? How to pass data from the Server Script to the Client Script?

What is media query?

What is the difference between c.server.update() and c.server.get() in widget's client controller ?

How can we display announcement based on user location

What is the difference between Service Portal and Employee Center Portal

I got a question like how to show different different portals for different user roles.

What all things are copied when you clone a widget?