Utilize the Pagination Option of the Custom View

Contents

Overview

This article introduces what the pagination option can achieve in Kintone’s Custom View. The pagination option helps developers retrieve data from the App for building out components in the Custom View. Proceed to read through this article after making a Custom View.

Changes to the UI

The pagination option makes a slight change to the UI of the Custom View.
Here is a Custom View with the Enable pagination setting turned off.

Screenshot: Custom View with the Enable pagination setting turned off

Here is a Custom View with the Enable pagination setting turned on.

Screenshot: Custom View with the Enable pagination setting turned on

The latter displays the number of records that are inside the App, on the right hand side. If the App holds more than 100 records, it also displays a clickable pagination arrow.

Screenshot: The Record List view displaying the number of records in the App, and the pagination arrow.

Changes to the Even Object

The pagination option also makes changes to the Event object created in the Record List Events. Prepare the following JavaScript code in a text editor and navigate to the Kintone App’s settings. Upload the file into the Upload JavaScript for PC option of the JavaScript and CSS Customization settings (External link).

1
2
3
4
5
6
7
(function() {
  'use strict';
  // Create an event handler for the Record List
  kintone.events.on('app.record.index.show', function(event) {
    console.log(event);
  });
})();

After saving the settings and clicking on Update App, navigate to the Custom View and open the browser’s developer console.

Here is what is shown in the console when the Enable pagination setting is turned off.

Animated GIF: The browser's developer console displays no data of the records when the pagination option is turned off.

Here is what is shown in the developer console when the Enable pagination setting is turned on.

Animated GIF: The browser's developer console displays data of the records when the pagination option is turned on.

With the Enable pagination setting turned on the event object contains record data. To display the record object data onto the Custom View, a different script is needed. In the above example, data of 100 records are stored in the event object. Clicking on the pagination arrow causes the event to trigger again, and the next set of records (in this case, 27 records) is contained in the Event object.

Reference