Service Portal Pagination Widget using chooseWindow method

Hello All,

This post covers the simpler way to show   records stored in ServiceNow database table in paginated way on Service Portal Widget.

It leverages the OOB "chooseWindow" GlideRecord - Scoped   method of GlideRecord API.

HTML Template Code :

<div>

<!-- your widget template -->

  <table>

      <tr>

          <th>

              Number

          </th>

          <th>

              Short Description

          </th>

      </tr>

      <tr ng-repeat="r in c.data.records | limitTo:c.data.page_size">

      <td>{{c.data.records[$index].number}}</td>

      <td>{{c.data.records[$index].short_description}}</td>

      </tr>

      </table>

  <button ng-show="c.data.current_page != 0" ng-click="getPrevious()">

      Previous

  </button>

  <button ng-show="c.data.count >= c.data.page_size" ng-click="getNextSet()">

      Next

  </button>

</div>

<

<div>
<!-- your widget template -->
   <table>
       <tr>
           <th>
               Number
           </th>
           <th>
               Short Description
           </th>
       </tr>
       <tr ng-repeat="r in c.data.records | limitTo:c.data.page_size">
       <td>{{c.data.records[$index].number}}</td>
       <td>{{c.data.records[$index].short_description}}</td>
       </tr>
       </table>
   <button ng-show="c.data.current_page != 0" ng-click="getPrevious()">
       Previous
   </button>
   <button ng-show="c.data.count >= c.data.page_size" ng-click="getNextSet()">
       Next
   </button>
</div>

CSS for table formatting:

table {

      font-family: arial, sans-serif;

      border-collapse: collapse;

      width: 100%;

}

td, th {

      border: 1px solid #dddddd;

      text-align: left;

      padding: 8px;

}

tr:nth-child(even) {

      background-color: #dddddd;

}

Client Controller :

function($scope) {
   /* widget controller */
   var c = this;
$scope.getNextSet = function() {
c.data.current_page = parseInt(c.data.current_page) + 1;
c.data.action = "nextRecord"
c.server.update().then(function(r){
c.data.action = undefined;
console.log("Response " + JSON.stringify(r));
console.log("Data objet " + JSON.stringify(c.data));
//c.data.records = r.records;
});
}
$scope.getPrevious = function() {
c.data.current_page = parseInt(c.data.current_page) - 1;
c.data.action = "nextRecord"
c.server.update().then(function(r){
c.data.action = undefined;
console.log("Response " + JSON.stringify(r));
console.log("Data objet " + JSON.stringify(c.data));
//c.data.records = r.records;
});
}
}

Server Script :

(function() {
   /* populate the 'data' object */
   /* e.g., data.table = $sp.getValue('table'); */
if (!input) {
data.records = [];
data.page_size = 5;
data.count = 5;
data.current_page = 0;
var gr = new GlideRecord("incident");
gr.orderBy("number");
gr.chooseWindow(data.current_page, data.page_size);
gr.query();
while (gr.next()) {
var obj = {};
//gs.addInfoMessage("Hello");
obj.number = gr.getValue("number");
obj.short_description = gr.getValue("short_description");
data.records.push(obj);
}
}
if (input && input.action == "nextRecord") {
data.records = [];
data.count = 0;
var startPage = input.current_page * input.page_size;
var endPage = (input.current_page * input.page_size) + input.page_size
// gs.addInfoMessage("start " + startPage + " endPage " + endPage);
var gr1 = new GlideRecord("incident");
gr1.orderBy("number");
gr1.chooseWindow(startPage, endPage);
gr1.query();
while (gr1.next()) {
data.count++
var obj1 = {};
//gs.addInfoMessage("Hello");
obj1.number = gr1.getValue("number");
obj1.short_description = gr1.getValue("short_description");
data.records.push(obj1);
}
return data;
}
})();

Some screen captures