Embedded widgets

Embed a widget in the HTML template, server script, or client script.

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>

Widget model properties

When a widget model is called from within another widget, the HTML template, client script, and link function are loaded just as they are in the sp_widget record. The data property is the result of the widget server script execution. Anything that you put on the data object on the server is available in the data object on the client.

Property name Type Description
client_script string Widget client script field.
css string Compiled CSS output from the SASS field for the widget.
data object Data object containing keys and values from the widget server script.
dependencies array Any third-party libraries to load before the widget executes.
options object Options used to initialize the widget.
template string HTML template field for the widget.