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>

 

<

                                         
        Number              Short Description      
{{c.data.records[$index].number}}{{c.data.records[$index].short_description}}
   

 

 

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