Optimize Show More Button

Hoa Do · ‎06-10-2022

Hi everyone, at the moment I would like to optimize "Show More Button". My strategy is that I would like to show only the number of records that I want to display. After click "Show More" button, it will show more records such as 10,20,30,etc. However, I face some troubles when passing data from Client Script in the portal to Script Include. I make some references to do it:

+ Pagination in GlideRecord? - Developer Community - Question - ServiceNow Community

+ SN Pro Tips — GlideRecord Pagination - Page through your GlideRecord query

+ GlideRecord - Scoped | ServiceNow Developers

Here is my code. I hope you understand and help me solve the problem. Thank you!

HTML Template:

<div>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Number</th>
        <th scope="col">Caller</th>
        <th scope="col">Category</th>
        <th scope="col">Short Description</th>
        <th scope="col">State</th>
        <th scope="col">Created</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in c.data.incidentData">
        <!-- <tr ng-repeat="item in data.incidentArr"> -->
        <th scope="row">{{item.number}}</th>
        <td>{{item.caller}}</td>
        <td>{{item.category}}</td>
        <td>{{item.shortDesc}}</td>
        <td>{{item.dateCreated}}</td>
        <td>{{item.state}}</td>
      </tr>
    </tbody>
  </table>

  <!-- SHOW MORE -->
  <div class="show-more-section">
    <div class="text-a-c">{{data.show_msg}}</div>
    <button class="m-t-xs btn btn-default btn-loadmore" ng-click="loadMore()">
      ${Show More}
    </button>
  </div>
 </div>

Client Script:

api.controller = function ($scope, $timeout, $animate) {
  var c = this;
  c.data.items = c.data.incidentData;
  $scope.loadMore = function () {
    c.data.currentPage = parseInt(c.data.currentPage) + 1;
    c.data.action = "showMorebtn";
    c.server.update().then(function (r) {
      c.data.action = undefined;
    });
  };
}

Server Script:

(function () {
(function () {
  var incidentUtils = new Incident_Utils();
  if (!input) {
    data.numIncidents = incidentUtils.getTotalRecord();
    data.incidentData = incidentUtils.getAllIncident();
  }

  if (input && input.action == "showMorebtn") {
    data.incidentData = incidentUtils.getAllIncident(input);
    console.log(data.incidentData);
  }

  // data.limit = parseInt(options.data_limit) || 10;
  data.show_msg = gs.getMessage(
    "Showing more " + data.limit + " cards of " + " " + data.numIncidents
  );
})();

Script Include:

var Incident_Utils = Class.create();
Incident_Utils.prototype = {
  getAllIncident: function (input) {
    var incArr = [];
    input.currentPage = 1;
    input.maxSize = 5;
    input.totalItems = incidentGR.getRowCount();
    var incidentGR = new GlideRecord("incident");
    incidentGR.addQuery("active", "true");
    input.currentPage++;
    incidentGR.chooseWindow(
      (input.currentPage - 1) * input.maxSize,
      input.currentPage * input.maxSize
    );
    incidentGR.query();
    // totalCurrentRecords.numIncRecord = incidentGR.getRowCount();
    // incArr.push(totalCurrentRecords);
    while (incidentGR.next()) {
      var incidentObj = {};
      incidentObj.number = incidentGR.getDisplayValue("number");
      incidentObj.caller = incidentGR.getDisplayValue("caller_id");
      incidentObj.category = incidentGR.getDisplayValue("category");
      incidentObj.shortDesc = incidentGR.getDisplayValue("short_description");
      incidentObj.dateCreated = incidentGR.getDisplayValue("sys_created_on");
      incidentObj.state = incidentGR.getDisplayValue("state");
      incArr.push(incidentObj);
    }
    return incArr;
  },

  type: "Incident_Utils ",

  getTotalRecord: function () {
    var incidentGR = new GlideRecord("incident");
    incidentGR.addQuery("active", "true");
    incidentGR.query();
    var totalRecord = incidentGR.getRowCount();
    return totalRecord;
  },
};

Hoa Do · ‎06-10-2022

Hi everyone, I have known how to optimize the "Show More" button. Here is my code:

HTML Template:

<div>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Number</th>
        <th scope="col">Caller</th>
        <th scope="col">Category</th>
        <th scope="col">Short Description</th>
        <th scope="col">State</th>
        <th scope="col">Created</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in c.data.incidentData">
        <!-- <tr ng-repeat="item in data.incidentArr"> -->
        <th scope="row">{{item.number}}</th>
        <td>{{item.caller}}</td>
        <td>{{item.category}}</td>
        <td>{{item.shortDesc}}</td>
        <td>{{item.dateCreated}}</td>
        <td>{{item.state}}</td>
      </tr>
    </tbody>
  </table>
  <!-- SHOW MORE -->
  <div class="show-more-section" ng-if="data.showMore">
    <div class="text-a-c">{{data.show_msg}}</div>
    <button class="m-t-xs btn btn-default btn-loadmore" ng-click="loadMore()">
      ${Show More}
    </button>
  </div>
</div>

Client Script:

api.controller = function ($scope, $timeout, $animate) {
  var c = this;
  c.data.items = c.data.incidentData;
  $scope.loadMore = function () {
    c.data.currentPage = parseInt(c.data.currentPage) + 1;
    c.data.action = "showMorebtn";
    c.server.update().then(function (r) {
      c.data.action = undefined;
    });
  };
}

Server Script:

(function () {
  var incidentUtils = new Incident_Utils();
  data.numIncidents = incidentUtils.getTotalRecord();
  var diff = data.numIncidents - data.maxSize;
  data.showMore = true;
  if (!input) {
    data.currentPage = 1;
    data.maxSize = 5;
    data.incidentData = incidentUtils.getAllIncident(
      data.currentPage,
      data.maxSize
    );
    data.show_msg = gs.getMessage(
      "Showing more " + data.maxSize + " cards of " + " " + data.numIncidents
    );
  }

  if (input) {
    data.incidentData = incidentUtils.getAllIncident(
      input.currentPage,
      input.maxSize
    );
    console.log(data.incidentData);
    data.show_msg = gs.getMessage(
      "Showing more " +
        input.maxSize * input.currentPage +
        " cards of " +
        " " +
        data.numIncidents
    );

    diff = data.numIncidents - input.maxSize * input.currentPage;
    data.difference = diff;
    diff <= 0 ? (data.showMore = false) : (data.showMore = true);
  }
})();

Server Script:

var Incident_Utils = Class.create();
Incident_Utils.prototype = {
  getAllIncident: function (currentPage, maxSize) {
    var incArr = [];
    var incidentGR = new GlideRecord("incident");
    incidentGR.addQuery("active", "true");
    incidentGR.chooseWindow(0, currentPage * maxSize);
    incidentGR.query();
    // totalCurrentRecords.numIncRecord = incidentGR.getRowCount();
    // incArr.push(totalCurrentRecords);
    while (incidentGR.next()) {
      var incidentObj = {};
      incidentObj.number = incidentGR.getDisplayValue("number");
      incidentObj.caller = incidentGR.getDisplayValue("caller_id");
      incidentObj.category = incidentGR.getDisplayValue("category");
      incidentObj.shortDesc = incidentGR.getDisplayValue("short_description");
      incidentObj.dateCreated = incidentGR.getDisplayValue("sys_created_on");
      incidentObj.state = incidentGR.getDisplayValue("state");
      incArr.push(incidentObj);
    }
    
    return incArr;
  },

  type: "Incident_Utils ",

  getTotalRecord: function () {
    var incidentGR = new GlideRecord("incident");
    incidentGR.addQuery("active", "true");
    incidentGR.query();
    var totalRecord = incidentGR.getRowCount();
    return totalRecord;
  },
};