Embedded Widget in ServiceNow Service Portal

Embedding a widget within another widget could easily be done in ServiceNow Service Portal. In this piece, we will be exploring the widget HTML element and spModal class to develop parent and nested widgets: Fictional Character Change Request widget that embeds Selected Fictional Character widget, and a modal page that holds the Fictional Characters widget.

355DD910-5341-4365-A2A5-DC7C1D69E1E9
Open image in new tab to clearly view its content.
B849D44B-BB93-49CB-B7BD-A9ABB3CCFBC7
Open image in new tab to clearly view its content.

Credit to the owner or owners of the cartoon characters I have used in this piece. Additionally, this piece will only discuss on how to embed widgets into a widget without talking about their data, Angular, and other elements.

widget HTML Element

The widget HTML element is basically intended to embed a widget into another widget in an HTML template by simply passing the ID of the widget we are trying to embed.

Initially, we have created the Fictional Character Change Request widget. This widget holds a panel that displays another widget named Selected Fictional Character widget, and a button to select other fictional character through a modal popup that holds another widget named Fictional Characters.

8BC72010-9734-4E2A-A4B3-729F1B38FDCD
Open image in new tab to clearly view its content.

Then, we have created our Selected Fictional Character widget that will be embedded into our Fictional Character Change Request widget.

AE624B48-7CD6-4701-8581-01BC9DB2AF5E.PNG
Open image in new tab to clearly view its content.

And then, we have embedded our Selected Fictional Character widget into our Fictional Character Change Request widget.

355DD910-5341-4365-A2A5-DC7C1D69E1E9
Open image in new tab to clearly view its content.

Below is our HTML Template of the Selected Fictional Character widget that embeds the Fictional Character Change Request widget using the “widget” HTML element.

748C8137-0ECC-4F57-A462-72AA1D291AEC.PNG
Open image in new tab to clearly view its content.

spModal

The spModal class provides way to display a widget in a modal dialog. This is not to mention that this class also provides a way to show alerts, prompts, and confirmation dialogs.

And to continue with our widgets, we have created another one named Fictional Characters. This widget is embedded in a modal dialog displayed when the “Select Character” button in the Fictional Character Change Request widget is clicked.

18F357BC-501D-4092-95C3-FDA5E88360F3.png
Open image in new tab to clearly view its content.

Below is the Client Script of the Selected Fictional Character widget that embeds the Fictional Character Change Request widget using spModal class.

function(spModal) {
  var c = this;
	c.openModal = function(){
		spModal.open({
			title: 'Fictional Characters',
			widget: '4e6848524f11130082a11b818110c7bd',
			buttons: [
				{label:'${Cancel}', cancel: true}
			]
		}).then(function(){
		});
	};
}

Hope this helps.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: