How to refresh Service Portal widget data when backend data changes

[jpavanaryan]

Service Portal provides spUtil (which then calls snRecordWatcher) to refresh a record when there is a change in the backend 

spUtil.recordWatch($scope, "incident", "sys_id=" + sysId, function(name, data)
{
getIncidentRecord($scope,c,sysId);
});

But, we can not use this to fetch a list of records which is a pretty common scenario for Dashboard or Table data refresh in real time. We can take advantage of $interval service provided by AngularJS to achieve this. Specify the refresh interval here (I set it to 3 seconds)

$interval(function() 
{
    c.getData();
}, 3000,0);

Widget HTML:

        <div class="x_content">
          <div class="col-md-12  col-sm-12 col-xs-12 table-responsive"   -ng-controller="myIncidentsController">
            <table ng-table="tableParams" class="table table-condensed table-bordered table-striped" >
              <tr ng-repeat="row in $data track by $index" >
                <td data-title="'#'" class="cell"  filter="{ incidentIndex: 'number'}" sortable="'incidentIndex'">{{row.index}}</td>
                <td data-title="'Incident Id'" class="cell" filter="{ incidentId: 'text'}" sortable="'incidentId'"><a href="/haloportal?id=incident_summary&incident_id={{row.sysId}}" style="color:#0c4a6f" >{{row.incidentId}}</a></td>
                <td data-title="'Incident Urgency'"   filter="{ urgencyRank: 'text'}"  sortable="'urgencyRank'" class="cell">{{row.urgencyRank}}</td>
                <td data-title="'Incident Type'"  filter="{ incidentType: 'text'}" sortable="'incidentType'" class="cell">{{row.incidentType}}</td>
                <td data-title="'Incident Status'"   filter="{ incidentStatus: 'text'}"  sortable="'incidentStatus'" class="cell">{{row.incidentStatus}}</td>
                <td data-title="'Indicator Count'"   filter="{ indicatorCount: 'number'}"  sortable="'indicatorCount'" class="cell">{{row.indicatorCount}}</td>
                <td data-title="'Created Date'"   filter="{ createdDate: 'text'}"  sortable="'createdDate'" class="cell">{{row.createdDate}}</td>
                <td data-title="'Last Updated'"   filter="{ lastUpdated: 'text'}"   sortable="'lastUpdated'" class="cell">{{row.lastUpdated}}</td>
              </tr>      
            </table>
          </div>
          
        </div>

 Widget Client Script:

function($scope, $http, $location, $log, $upload, $timeout, $rootScope, $q, $interval,  spUtil, spAriaUtil, nowAttachmentHandler,nowServer, spModal) 
{

  var c = this;
	c.getData = function() 
	{
    c.server.get({method:'getRightWidgetData'}).then(function(response)
		{
			c.data.myIncidentsData=angular.fromJson(response.data.myIncidentsData);
			$scope.$emit("myIncidentsDataReady", c.data.myIncidentsData);
		});
   };
	
//Calls getData() when page loads initially
c.getData();
	
//Refresh data every 3 seconds
$interval(function() 
  {
    c.getData();
  }, 3000,0);
	
	

Widget Server Script:

(function() 
 {
		//Do not remove this line. Client calls Server Script multiple times and increaes load time if 'input' value not checked
		if(input)
		{
			if(input.method == 'getRightWidgetData')
			{
				var rightWidgetUtils=new RightWidgetUtils();
				data.myIncidentsData=rightWidgetUtils.getMyIncidentsData();
				
				data.userData=rightWidgetUtils.getUserData();	
			}

		}
})();

UI Script (Add this a dependency to Widget):

(function() 
 {
	"use strict";
    var app=angular.module("RightWidgetAnalyst", ["ngTable"]);

	
	//myIncidentsController
	app.controller("myIncidentsController",["$scope","$rootScope","NgTableParams",function($scope,$rootScope,NgTableParams)
							{
								
								/*
									NgTableParams constructor => new NgTableParams(baseParameters?: IParamValues<T> | boolean, baseSettings?: ISettings<T>): NgTableParams
									See this => http://ng-table.com/api-docs/classes/ngtableparams.html#settings
								*/
							    $rootScope.$on("myIncidentsDataReady", function(data)
								{
									$scope.dataset = data.targetScope.data.myIncidentsData;
									
									var baseParameters={count:10,sorting:{incidentId:"desc"}};
									var baseSettings={dataset: $scope.dataset,counts:[10,25,50,100],paginationMinBlocks:2,paginationMaxBlocks:13};

									$scope.tableParams = new NgTableParams(baseParameters,baseSettings);
								}); 
								
								//Filter Table based on clicked Badge
								 $rootScope.$on("myIncidentsTableFilterValue", function(data,myIncidentsTableFilterValue)
								{
								    $scope.dataset = data.targetScope.data.myIncidentsData;
									 
									var baseParameters={count:10,sorting:{incidentId:"desc"},filter:{urgencyRank:myIncidentsTableFilterValue}};
									var baseSettings={dataset: $scope.dataset,counts:[10,25,50,100],paginationMinBlocks:2,paginationMaxBlocks:13};

									$scope.tableParams = new NgTableParams(baseParameters,baseSettings);

								}); 
		
							}]);
		
	
 
})();

Note:

 I am using ng-table data grid to display data on the page and you should add their library as a dependency to make this work. It's a pretty good library and customizable. Check out their API for more information.