A simple example of Record Watcher for Service Portal (Jakarta and Kingston update)

[Sush3]

Let's learn today how to use one of the powerful concepts of Service Portal called Record Watcher. This feature allows a widget developer to respond to table updates in real-time.

Now let us create a simple widget to keep count of our Critical Incidents to find out how Record Watcher works.

• Step1: Create a widget

            Click on widgets under "Service Portal" application menu (or you can also create widgets using widget editor). Create a new widget by clicking on the new button.

                  Below is the example widget I have created.

Please use the below snippets to create your widget

HTML:

<div class="critical-incidents col-md-2">

      <div class="panel panel-default">

              <div class="panel-heading">Number of Critical Incidents</div>

              <div class="panel-body text-center">

                      <div class="circle-bg" ng-class="{'red-bg' : incidata.changed}">

                              <p class="inci-number"> {{c.data.incidentCount}}</p>

                      </div>

              </div>

      </div>

</div>

<div class="col-md-9 ">

  <p class="changed-rec">Changed Record {{incidata.changedRecord.display_value}}</p>

</div>

ng-class is triggered whenever data changes to change the background to red

We also print the Changed/Inserted record information when the watcher is fired

Client Controller: (HELSINKI and ISTANBUL)

function(spUtil, $scope, $timeout) {

      /* widget controller */

      var c = this;

      $scope.incidata = {};

      $scope.incidata.changed = false;

      spUtil.recordWatch($scope, "incident", "priority=1^state!=7", function(name, data) {

      console.log(data);

      $scope.incidata.changedRecord = data;

              c.server.update();

              $timeout(function() {

                      $scope.changeBg();

              }, 500);    

      });

      $scope.changeBg = function() {

              $scope.incidata.changed = true;

              $timeout(function() {

                      $scope.incidata.changed = false;

              }, 500);

      }

}

Client Controller: (JAKARTA and KINGSTON)

function(spUtil, $scope, $timeout) {

      /* widget controller */

      var c = this;

      $scope.incidata = {};

      $scope.incidata.changed = false;

      spUtil.recordWatch($scope, "incident", "priority=1^state!=7", function(name, data) {

      console.log(data); //comes back as undefined  

      console.log(name);

      $scope.incidata.changedRecord = name.data; // name.data has the updated or inserted record info

              c.server.update();

              $timeout(function() {

                      $scope.changeBg();

              }, 500);  

      });

      $scope.changeBg = function() {

              $scope.incidata.changed = true;

              $timeout(function() {

                      $scope.incidata.changed = false;

              }, 500);

      }

}

As you can see, we need to inject spUtil into our client controller. We have defined our watcher above like

HELSINKI and ISTANBUL

spUtil.recordWatch($scope,tableName,filter, function(name,data){

//name: event information

//data:   information about updated or inserted record

})

JAKARTA and KINGSTON

spUtil.recordWatch($scope,tableName,filter, function(name,data){

//data:   comesback as undefined

//name: information about updated or inserted record.

})

Second Argument is the tableName you want to attach the watcher for

Third Argument is the filter for the table

Fourth is a callback function that is executed when watcher is fired, this function has two arguments.

In our example, the second argument is Incident table, and the filter is "priority=1^state!=7", meaning we only care about incidents with priority critical and not closed.

Inside our watcher, we have a timeout just to change the background color.

SASS:

.critical-incidents {

      margin-top: 20px;

      width: 300px;

      .inci-number {

              font-size: 36px;

              margin-bottom: 0px;

              padding: 25px;

              color: #E51B24;

      }

      .circle-bg {

              margin-left: auto;

              margin-right: auto;

              width: 100px;

              height: 100px;

              border-radius: 50%;

              background: #fff;

      }

      .red-bg {

              background: #E51B24;

              .inci-number {

                      color: #fff;

              }

      }

}

.changed-rec {

      font-size: 18px;

      margin-top: 30px;

}

Server Script:

(function() {

      /* populate the 'data' object */

      /* e.g., data.table = $sp.getValue('table'); */

      data.incidentCount = '';

      var gr = new GlideRecord('incident');

      gr.addQuery('priority', 1);

      gr.addQuery('state','!=', 7);

      gr.query();

      data.incidentCount = gr.getRowCount();

})();

After populating your widget with above code, go ahead and save it.

• Step 2: Add widget to a service portal page

        Please go ahead and add the widget we created above to a page using the designer.

        After you have added this widget to a page, let us check it out how it works

I have 10 critical incidents in my instance, thus the page looks like this for me.

Now let's try to create a new Critical Incident to see if our watcher fires.

As you can see, our record watcher is fired every time a new Critical Incident is created. Whenever record watcher is fired, information about the record is returned as well.

We are logging this data to the console, if we check the browser console, you can see what the data of the inserted/changed record look like.

HELSINKI and ISTANBUL

By analyzing data we got back inside record watcher in above screenshot you can tell if it was a new insert or an update

action: "entry" and operation:"insert" => new record

action: "change" and operation:"update" => update to an existing record

JAKARTA and KINGSTON

Record watchers in Service Portal are very powerful. Can be used to display real-time data.

Thanks,

Sush