A simple example of Record Watcher for Service Portal (Jakarta and Kin
https://community.servicenow.com/community?id=community_blog&sys_id=12ade2a9dbd0dbc01dcaf3231f96199e
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:
Number of Critical Incidents{{c.data.incidentCount}}
Changed Record {{incidata.changedRecord.display_value}}
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