Add Buttons to the Record List Page

Contents

Overview

This article introduces how to place a button on Kintone's record list page. The button is placed in the header menu, above the list of records.

Sample Image

In this example, the element in the header menu will be obtained, and a button will be placed inside. Clicking the button will run an alert script.

Sample Code

Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into 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';
  // Run a function when the record list page appears
  kintone.events.on('app.record.index.show', function(event) {
    // Prevent duplication of the button
    if (document.getElementById('my_index_button') != null) {
      return;
    }
    // Set a button
    var myIndexButton = document.createElement('button');
    myIndexButton.id = 'my_index_button';
    myIndexButton.innerHTML = 'Click Me!';

    // Button onclick function
    myIndexButton.onclick = function() {
      window.alert('You clicked me!');
    };

    // Retrieve the header menu space element and set the button there
    kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
  });
})();

After saving the settings and clicking on Update App, navigate to the Record list page. A button should appear above the list of records.

Code Explanation

Set the index.show event

The app.record.index.show event is set, so that the main code runs when the Record List page is loaded.

1
2
3

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

});

Retrieve the Header Menu Space element

The blank space element in the header menu above the Record List is obtained using the kintone.app.getHeaderMenuSpaceElement() method. A child node is added to this element.

1

kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);

Create a button element

The button is added to the child element.

1
2
3

var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_button';
myIndexButton.innerHTML = 'Click Me!';

Prevent a duplication bug

Whenever a user clicks on the header of the record list (such as Name or Company in the below image), it reorders the records. This action also triggers the app.record.index.show event. This causes an issue where buttons become duplicated.

To avoid this issue, an if statement is implemented to stop running the script.

1
2
3

if (document.getElementById('my_index_button') != null) {
  return;
}

Write the onclick script

When the button is clicked, an alert dialog displays a message.

1
2
3

myIndexButton.onclick = function() {
  window.alert('You clicked me!');
};