Embed a Popdock Widget in ServiceNow
When it comes to embedding a Popdock widget in ServiceNow, there are two methods that can be used. You can publish the widget directly from Popdock to ServiceNow, or you can manually add the widget inside of ServiceNow. Both methods are described in detail below.
Publish the Widget from Popdock
1. Within Popdock, edit the widget you want to embed in ServiceNow. Then select Widget from the left navigation pane. In the Environment section, select the ServiceNow connector. Select the Table you want to embed the widget in.
2. Select Publish widget to ServiceNow.
3. Log into your ServiceNow account.
4. Go to the table that you published the widget to.
5. Right-click in the header, point to Configure and then select Form Layout.
6. In the Available column, find your widget name.
7. Add the widget to the Selected column. You can use the up and down arrows to set the location of where the widget will appear. Then select Save.
8. Your widget will now be available in your ServiceNow window.
Manually Add the Widget in ServiceNow
There may be some cases where you need to manually add a widget in ServiceNow, such as adding a multi-list widget. These steps will guide you through manually adding a widget in ServiceNow.
1. In ServiceNow, go to All >> System UI >> UI Macros.
2. Select New.
3. Enter a name. Make note of the name, as you will need this later.
4. Delete the code in the XML box and then paste the following:
<?xml version="1.0" encoding="utf-8" ?>
<jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:sn="jelly:sn">
<div id="pd-widget-container" style="display: flex; width: 100%; justify-content: center;">
<iframe id="<WIDGET ID>"
width="100%"
height="500px"
frameborder="0"
style="border: 1px solid RGB(176, 181, 191); width: 100%; box-shadow: 0 4px 8px 0 RGBA(56, 56, 56, 0.25); border-radius: 4px;">
</iframe>
</div>
<script>
window.addEventListener("load", async function() {
const region = "";
const widgetId = "";
const token = "";
const envParams = [
{
key: "sys_id",
value: "sys_id"
}
];
const envParametersFormatted = await getEnvParamsAsync(JSON.stringify(envParams));
const parameters = [
"theme=servicenow-table",
"token=" + token,
envParametersFormatted
];
var formattedQueryParameters = parameters.join(String.fromCharCode(38))
var widgetSource = "https://widget" + region + ".popdock.com/embed/" + widgetId + '?' + formattedQueryParameters;
document.getElementById(widgetId).src = widgetSource;
})
function getEnvParamsAsync(envParams) {
return new Promise((resolve) => {
var ga = new GlideAjax('<WIDGET_TITLE>_GetEnvParams');
ga.addParam('sysparm_name', "getEnvParams");
ga.addParam('sysparm_env_params', envParams);
ga.addParam('sysparm_table', g_form.getTableName());
ga.addParam('sysparm_sys_id', g_form.getUniqueValue());
ga.getXMLAnswer(function(answer) {
resolve(answer);
});
});
}
</script>
</jelly>
5. In Popdock, find the widget you want to embed. Select Embed codes. Set the Type to Widget ID and then copy the Code.
6. Go back to ServiceNow and replace <WIDGET ID> with your widget ID from Popdock. You will also need to paste the Widget ID in the widgetId = “” line.
7. In Popdock, go to the main menu and select Security. You will need to get a token for the widget. Select either Users or API users, depending on how you have set up your tokens. Edit the user you want to use and then select Tokens. Copy the token.
8. Go back to ServiceNow and paste the token in the token = “ ” line.
9. On the region = “” line, enter a dash (-) between the quotes.
10. Scroll to the end of the script and replace <WIDGET_TITLE> with a title. This does not need to be the same as the title used in the widget.
11. Select Submit.
12. Go to All >> System UI >> Formatters.
13. Select New.
14. Enter a Name.
15. For the Formatter field, enter the name you used in Step 3 for the .xml formatter name.
16. From the Table dropdown, select the table you want to add this to.
17. Select Submit.
18. Go to All >> Administration >> Script Includes.
19. Select New.
20. Enter a Name. The name will need to be the same as you used in Step 10.
21. Set Application to Global. Select All application scope from the Accessible from dropdown. Mark the box next to Glide AJAX enabled.
22. Delete the code in the XML box and then paste the following:
var <WIDGET_TITLE>_GetEnvParams = Class.create();
<WIDGET_TITLE>_GetEnvParams.prototype = Object.extendsObject(AbstractAjaxProcessor, {
getEnvParams: function() {
var table = this.getParameter('sysparm_table');
var sys_id = this.getParameter('sysparm_sys_id');
var envParamsJson = this.getParameter('sysparm_env_params');
if (!table || !sys_id || !envParamsJson) {
return '';
}
var gr = new GlideRecordSecure(table);
if (!gr.get(sys_id)) {
return '';
}
var formattedEnvParams = [];
var envParams = JSON.parse(envParamsJson);
envParams.forEach(function(param) {
if (gr.isValidField(param.value) && gr.canRead(param.value)) {
formattedEnvParams.push(param.key + '=' + gr.getValue(param.value));
}
});
return formattedEnvParams.join(',');
}
});
23. Replace <WIDGET_TITLE> with the same name you used in Step 10. Include “_GetEnvParams” in the name.
24. Select Submit.
25. Go to the Users page (or whatever table you selected in the UI Formatter).
26. Open a record.
27. Right-click in the header, point to Configure, and then select Form Layout.
28. Scroll down in the Available column to find the form you created.
29. Add your form to the right side and then select Save.
30. Your widget is now available.
Having trouble when trying to embed a Popdock widget in ServiceNow? Email support at support@eonesolutions.com
