This article introduces how to display a list of records in Kintone's Custom View. The customization utilizes Kintone's event object.

Create an App with the following field settings.

Save the form when finished.

Navigate to the Views tab. Create a new view with the Custom view option selected. Check the Enable pagination option and enter the following HTML into the HTML Code option.

1

<div id="recordContent"></div>

The Custom View settings should look like the below image.

Save the Custom View and update the App.

Click the + button, and add 5 records into the App.

Navigate to the Custom View by clicking on the blue view drop-down widget. The record count is shown as 5, but no records should be displayed yet.

Make note of the View ID at the end of the URL.

Prepare the following JavaScript code in a text editor. Replace <VIEW_ID> with the View ID obtained earlier. Navigate to the Kintone App's settings and upload the file into the Upload JavaScript for PC option of the JavaScript and CSS Customization settings .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

(function() {
  'use strict';
  // An event is triggered when the Custom View is displayed
  kintone.events.on('app.record.index.show', function(event) {
    // The rest of the code will run if the View ID of the current view is the View ID of the desired Custom View
    if (event.viewId !== VIEW_ID) {
      return;
    }
    // Retrieve the div that was specified in the custom view HTML settings
    var recordContent = document.getElementById('recordContent');
    var records = event.records;
    // For each available record, display the employee name and birthdate values in the custom view
    records.forEach(function(record) {
      var name = record.employee.value[0].name;
      var birthdate = record.birthdate.value;
      var contentDiv = document.createElement('div');
      var contentText = document.createTextNode(name + ': ' + birthdate);
      contentDiv.appendChild(contentText);
      recordContent.appendChild(contentDiv);
    });
  });
})();

After saving the settings and clicking on Update App, navigate to the Custom View. The Custom View should display data of the records as a list.

The app.record.index.show onload event is set so that the code runs when the Record List view is displayed.

1
2
3

kintone.events.on('app.record.index.show', function(event) {
  // ...
});

An IF statement is set to check if the current view is the desired Custom View.

1
2
3

if (event.viewId !== VIEW_ID) {
  // ...
}

The variable recordContent is created to store the div element with the id of recordContent that was created in the Custom View settings.

1

var recordContent = document.getElementById('recordContent');

The variable records is created to store the array of records within the event object.

1

var records = event.records;

The array of records stored in the records variable is then put through a forEach loop. The loop retrieves the record data from each individual record and concatenates them. These are then added under the recordContent div element.

1
2
3
4
5
6
7
8

records.forEach(function(record) {
  var name = record.employee.value[0].name;
  var birthdate = record.birthdate.value;
  var contentDiv = document.createElement('div');
  var contentText = document.createTextNode(name + ': ' + birthdate);
  contentDiv.appendChild(contentText);
  recordContent.appendChild(contentDiv);
});

• The maximum number of records an Event Object can store is 100. Clicking on the pagination arrow in the Record List page will retrieve the next set of records, which are stored in the Event Object.
• If more than 100 records need to be displayed, the record data must be retrieved using Kintone's REST APIs. Use the Kintone REST API Request JavaScript API to call the Get Records REST API.