Create a widget that displays a ServiceNow UI page

You can create a ServiceNow UI page that displays a web page. You can then add that UI page to a widget that can be added to dashboards.

Before you begin

Role required: admin

About this task

A UI page is a ServiceNow page that is not a list or a form. Not every UI page will fit in a widget. Some UI pages, such as external site widgets or gadgets, don’t display properly when placed in a dashboard.

To learn how to make a UI page without using a framework page template, see the Making a UI page without using the framework page template blog posting by a developer in the ServiceNow Community.

Note:

This functionality requires a knowledge of JavaScript.

Procedure

1. Create or find a ServiceNow UI page that you want to display as a widget.
   Note the name of this UI page, to use in Step 4. The UI page name is the value of the name field in the form where you define the content of the UI page.
2. Navigate to System UI > Widgets and click New.
   Widgets records are widget category records, not records for individual widgets. When adding a widget to the dashboard, first select the category and then the widget. The JavaScript you specify in step 4 includes the list of widgets to include in that category.
3. Fill in the following fields.

   Field	Description
   Name	The name of this widget category. Select this category when adding its widgets to a dashboard.
   Renderer Type	Select JavaScript.
   Active	Clear this field to make the widget unavailable to add to dashboards.
   Roles	Select which roles can see this category when adding widgets to dashboards. If you select no roles, all roles can see the category.

4. Add the following JavaScript in the Script field, making replacements as specified.
   The return statement contains the widgets listed in this widget category.

   Note:

   The code snippet in this step works in non-scoped applications. Use the code snippet in step 5 for scoped applications.

   Table 1.

   widget_name	The name of the widget that the user selects in the widget picker when adding the widget to a dashboard. This string also appears on the widget header. This value is the Name that you configure in step 3.
   UI_page_name	The name of the UI page from step 1 to show in the widget.

   function sections() {
       return {
           'widget_name': { 'uiPageName' : 'UI_page_name'},
           'widget_name2': {'uiPageName': 'UI_page_name_2'}
       };
   }
   
   function render() {
       var uiPageName = renderer.getPreferences().get("uiPageName");
       return renderer.getRenderedPage(uiPageName);
   }
   
   function getEditLink() {
       var uiPageName = renderer.getPreference('uiPageName');
       return 'sys_ui_page.do?sysparm_query=' + encodeURIComponent('name=' + uiPageName);
   }

5. Optional: Use this code example for scoped applications:

   function sections() {
       return {
       'Widget': {
       'type': 'widgetname'
       }
       };
   }
   
   function render() {
       var scope = gs.getCurrentScopeName();
       scope = (scope == "rhino.global" ? "" : scope + "_");
       var page = renderer.getPreference('type');
       return renderer.getRenderedPage(scope + page);
   }
   
   function getEditLink() {
       var scope = gs.getCurrentScopeName();
       scope = (scope == "rhino.global" ? "" : scope + "_");
       var page = renderer.getPreference('type');
       return "sys_ui_page.do?sysparm_query=name=" + scope + page;
   }

6. Click Submit.

What to do next

Edit a responsive dashboard