Create a widget referencing the UI page

Before you begin

Role required: admin

About this task

Note: This functionality requires a knowledge of JavaScript.

Procedure

  1. Navigate to System UI > Widgets and click New.
  2. Give the widget a Renderer type value of JavaScript and a Name value of My Custom Page.
  3. Include the following required functions in the script.
    • The sections() function adds the widget to the Add Content section of a homepage.
      The sections() function needs to return a JavaScript array describing how the widget should appear in the homepage Add Content UI, and what UI page should be displayed. Here is an example:
       function sections() {
          return {
            "Cool Page" : { "name" : "my_ui_page" }
          };
       }

      The above example appears in the Add Content UI as shown below, where the Name of the widget appears in the first column, and the Cool Page text appears in the second column. The UI page displayed in the preview is my_ui_page:

      Widget 1
    • The render() function defines how the widget should be rendered in the homepage. It can be the same for all custom widgets. This code works with scoped and global applications:
      function render() {  
          var scope = gs.getCurrentScopeName();
          var page = renderer.getPreference('name');
          return renderer.getRenderedPage( scope + page);  
      }

      The function uses the value of the name object returned by the sections() function. In the example, the value is my_ui_page. This is the name of the UI page that is rendered. If the UI page does not exist, then Form not found is displayed.

    • The getEditLink() function defines the target page to use when editing the widget. It can be the same for all custom widgets. This code works with scoped and global applications:
      function getEditLink() {  
          var scope = gs.getCurrentScopeName();
          var page = renderer.getPreference('name');
          return "sys_ui_page.do?sysparm_query=name=render_gadget_" + scope + page;  
      }

      The function uses the value of the name object returned by the sections() function. In the example, the value is my_ui_page. This is the name of the UI page that is rendered. If the UI page does not exist, then Form not found is displayed.

    Here is the entire example widget with all functions.

    Widget