1. Service Portal Introduction
  2. Service Portal Training Content
  3. Service Portal Object
  4. Portal Backend Structure
  5. Portal Module & Element
  6. Service Portal Configuration
  7. Build a new Portal
  8. Create Header Menu
  9. Data Preview from Server Side to HTML
  10. HTML Basic
  11. Get Incident Data & Show in a table
  12. Call HTML to Client Script
  13. Call Server Side Script for Action
  14. ServiceNow OOB Widget Provide for Portal
  15. Javascript popup VS SPModal
  16. spUtil – Client Dependency Service Portal
  17. Widget Embedded
  18. Send data from one widget to another
  19. GlideSPScriptable API on Server Side
  20. Angular Template
  21. $location, $timeout, $uibModal & $watch Services
  22. Use HTTP Service or REST Call on ServicePortal
  23. Angular Directive & Angular Filter
  24. Create a custom list widget with pagination, order, and filter
  25. ServiceNow Custom Component(Reference & Date Fields) in Service Portal
  26. Localization
  27. Create Own Theme
  28. Angular Provider & Dependency
  29. Service Portal Additional Details

We can create a custom list widget that can have pagination, ascending order, descending order, and create a filter sample widget attached below.

Here is the HTML code below

   <div class="filter-breadcrumbs">
	    		<sp-widget widget="data.filterBreadcrumbs"></sp-widget>

 <table id="customers">
    <th ng-repeat="x1 in data.header" ng-click="sort(data.fieldList[$index])">{{x1}}
      <span class="sortorder descending" ng-show="(sortKey==data.fieldList[$index] && reverse==false)"></span>
      <span class="sortorder" ng-show="(sortKey==data.fieldList[$index] && reverse==true)"></span>
   <tr ng-repeat="c in data.rec | orderBy: sortKey:reverse | limitTo:maxInc: currentIndex">
      <td ng-repeat="cal in data.fieldList"> 
    <ul class="pagination" style="float:right">
  		<li ng-repeat="i in getNumber(pageNumber) track by $index"  ng-click="pageChange($index)" ng-class="isActive($index)" ><a>{{$index+1}}</a></li>

Client Script will be like below

api.controller=function($scope,spUtil) {
  /* widget controller */
	// Start for pagination
	$scope.totalInc= $scope.data.rec.length;
	$scope.maxInc= 10; $scope.currentIndex=0;
	$scope.pageNumber= Math.ceil($scope.totalInc/$scope.maxInc);
	$scope.getNumber=function (number){
		return new Array(number);
	$scope.pageChange = function (index){
			$scope.currentIndex= $scope.maxInc*(index);
	$scope.isActive = function (index){
		if($scope.currentPage == index)
			return "active";
			return "";
	// End for pagination
		/* For breadcams */
  var c = this;
	$scope.$on('widget-filter-breadcrumbs.queryModified', function(e, newFilter){
		$scope.data.filter = newFilter;
			$scope.totalInc= $scope.data.rec.length;
			$scope.maxInc= 10; $scope.currentIndex=0;
			$scope.pageNumber= Math.ceil($scope.totalInc/$scope.maxInc);
	// End Here 
	$scope.reverse = false;
  $scope.sortKey = 'number';
  $scope.sort = function (keyname) {
     $scope.sortKey = keyname;
     $scope.reverse = !$scope.reverse;
	//End Shorting

Server Script like below:

(function() {
 data.table = 'incident';
	data.fieldList= 'number,short_description,caller_id,priority';
	var header='Number,Short Description,Caller Id,Priority';
	data.filter = data.filter || input.filter;
	data.filter2 = data.filter2|| input.filter2;
	var gr1= new GlideRecord('incident');
	var gr = new GlideRecord(data.table);
		var j={};
		for(var i=0; i<data.fieldList.length; i++){
	var breadcrumbWidgetParams = {
		table: 'incident',
		query: data.filter,
		enable_filter: true
	data.filterBreadcrumbs = $sp.getWidget('widget-filter-breadcrumbs', breadcrumbWidgetParams);


css will like below:

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;

.sortorder:after {
   content: '\25b2';
 .sortorder.descending:after {
    content: '\25bc';

One response

Leave a Reply

Your email address will not be published. Required fields are marked *