Skip to content

Create and embed a new Widget

In this example, we will create a simple widget that displays a list of high priority incidents. We will embed this widget into a page that we created in the Create a new Page section.

Create a new Widget

Widget

To create a new widget, click the Widgets menu item in the left sidebar.

There are three required fields:

  1. Title: The display name of the widget.
  2. Type: The type of the widget. For this example, we will select Widget.
  3. Name: The name of the widget. This will be used as the identifier for the widget therefore it must be unique.
(function (params) {

    function initialize() {
        var model = {
            condition: true,
            priority_incidents: []
        };

        var priorityIncidentsGr = new GlideRecord('incident');
        priorityIncidentsGr.addEncodedQuery('active=true^priority=1');
        priorityIncidentsGr.query();
        while(priorityIncidentsGr.next()){
            model.priority_incidents.push({
                sys_id: priorityIncidentsGr.getUniqueValue(),
                number: priorityIncidentsGr.getValue('number'),
                short_description: priorityIncidentsGr.getValue('short_description')
            });
        }
        return model;
    }


    return {
        initialize: initialize
    };

})(params);

function execute(helpers){

    return {
    };
}

<div class="d-flex justify-content-center">
    <template x-for="incident in $scope.model.priority_incidents">
        <mdui-card variant="filled" class="m-1 p-3" style="width: 200px;height: 124px">
            <div class="fw-bold">
                <span x-text="incident.number"></span>
            </div>
            <div>
                <span x-text="incident.short_description"></span>
            </div>
        </mdui-card>
    </template>
</div>

Embed the Widget into a Page

To embed the widget into a page, we use the following code below. Note the highlighted line which indicates the html tag with the widget id as the attribute.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="container main-container mt-5">
    <div class="row">
        <div class="col p-3">
            <div>
                <span x-text="$scope.model.incident.number"></span>
            </div>
            <div>
                <span x-text="$scope.model.incident.short_description"></span>
            </div>
            <div>
                <mdui-button @click="$scope.closeIncident($scope.model.incident.sys_id)" variant="filled">Close Incident
                </mdui-button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <fc-widget widget-id="priority_incident_widget"></fc-widget>
        </div>
    </div>
</div>