Article to help understand how to create Widgets and how to embed a Widget

[Ashwini Suryava]

Hello,

This series of articles will help you understand what in Service Portal and how the pages and widgets are related to the Service Portal.

What does a Widget mean in Service Portal ?

Widgets are reusable components which make up the functionality of a portal page. Widgets are what define the content in your portal. Widgets define what a portal does and what information a user sees

Four main aspects of the Widgets

The main aspects and on which Widget is reliable,

1) HTML Template (A mandatory widget component)
The HTML template requires knowledge of AngularJS to display and gather data. Use the HTML template to:

• Render the dynamic view that a user sees in the browser using information from the model and controller.
• Bind client script variables to your markup.
• Gather data from the end user.

2) Client Script (A mandatory widget component.)
    A client script requires knowledge of both the ServiceNow API and AngularJS to create a client controller. Use the client script to:

• Map server data from JavaScript and JSON objects to client objects.
• Process data before rendering it.
• Pass data to the HTML template.
• Pass user input and data back to the server for processing.

3) Server Script (A mandatory widget component.)
A server script requires knowledge of the ServiceNow API to work with record data. Use the server script to:

• Set the initial state of the widget.
• Send record data to the widget client script using the data variable.
• Run server-side queries.

4) CSS/SCSS (A mandatory widget component.)

Things to know before starting to build a Widget

To develop widgets, you need ServiceNow API experience to:

• Run record queries on the server.
• Create and update records.

You need AngularJS experience to:

• Bind variables to client controllers.
• Access server objects in a widget.
• Gather user input.

Add a widget to a Page

https://docs.servicenow.com/bundle/helsinki-servicenow-platform/page/build/service-portal/task/t_Add...

Global Objects available in Widget

When a widget begins to render for the first time on a page, the server script executes first and accesses three global objects: input, options, and data. Because the input variable is a data object sent from the client script, this variable is undefined when first initialized.

When a widget is first instantiated, the server script:

1. Initializes an empty data object.
2. Initializes the input object with any data sent from the client controller, or the options object with any data used to initialize the widget.
3. Sends the data object to the client controller as JSON.

The client script:

1. Accesses the server data object using c.data.Widget use c variable to represent controller. 

2. Uses sever.update() to post changes to the data model. This method updates the server script using the input object. Calling server.update(), the client script data object is automatically overwritten by the server script data object.

3. Uses c.options to access the values used to invoke the widget on the server. This object is read-only.

Embed a Widget

You can embed a Widget in HTML template, Client script and Server side

Embed a widget in an HTML template

Use the <widget></widget> element to embed a widget in an HTML template. Pass in the ID of the widget you are trying to embed as a parameter.

<div>
    <widget id="widget-cool-clock"></widget>
</div>

If a widget has an option schema, you can define instance options in JSON format.

<widget id="widget-cool-clock" options='{"zone": "America/Los_Angeles","title": "San Diego, CA"}'></widget>

Alternatively, you can define options in the widget server script.

HTML template

<widget id="widget-cool-clock" options='data.clockOptions'></widget>

Server script

(function() {
  data.clockOptions = {"zone": "America/Los_Angeles","title": "San Diego, CA"};
})();

Embed a widget in a client script

Use spUtil.get() to get a widget model in the client script.

spUtil.get("widget-sc-cat-item", {sys_id: "your_catalog_item_sys_id"}).then(function(response) {
    c.catalogItemWidget = response;
});

When using the spUtil class in a widget client script, you must inject the class into the client script function. The following example embeds the Cool Clock widget:

Client script

function(spUtil) {
    var c = this;
    spUtil.get("widget-cool-clock").then(function(response) {
            c.myClockWidget = response;
    });
}

HTML template

<sp-widget widget="c.myClockWidget"></sp-widget>

Embed a widget in a server script

Use $sp.getWidget() to get a widget model in the server script.

data.catalogItemWidget = $sp.getWidget("widget-sc-cat-item");

The following example embeds the Cool Clock widget:

Server script

(function() {
    var coolClockOptions = {"zone": "America/Los_Angeles","title": "San Diego, CA"}
    data.coolClockWidget = $sp.getWidget('widget-cool-clock', coolClockOptions);
})();

HTML template

<sp-widget widget="data.coolClockWidget"></sp-widget>

Thanks & Regards,

Ashwini

[Chandrakanth V]

Link provided doesn't have information now. Please update the article link.