Display List of Records in a Custom View

Contents

Overview

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

Prepare the App

Create the form

Create an App (External link) with the following field settings.

Field Type Field Name Field Code
User selection Employee employee
Date Birthdate birthdate

Save the form when finished.

Create the Custom View

Navigate to the Views tab. Create a new view (External link) 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.

Create some data

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

Obtain the View ID

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.

Sample Code

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 (External link) .

 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.

Code Explanation

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);
});

Limitations

  • 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.