Overview

This article introduces how to place a button on Kintone's record details page. The button is placed in a Blank space field of the Kintone App's form.

Sample Image

In this example, the element of the Blank space field is obtained, and a button is placed inside. Clicking the button runs an alert script.

Prepare the App

Create an App and include a Blank space field in the form. Update the Element ID of the Blank space field to space_for_button.

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 .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

(function() {
  'use strict';
  kintone.events.on('app.record.detail.show', function(event) {
    // Create a button
    var mySpaceFieldButton = document.createElement('button');
    mySpaceFieldButton.id = 'space_for_button';
    mySpaceFieldButton.innerHTML = 'my_button';

    // Run a code when the button is clicked
    mySpaceFieldButton.onclick = function() {
      var record_data = kintone.app.record.get();
      alert(record_data.record.Created_datetime.value);
    };
    // Set button on the Blank space field
    kintone.app.record.getSpaceElement('space_for_button').appendChild(mySpaceFieldButton);
  });
})();

After saving the settings and clicking on Update App, navigate to the Record details page. A button should appear where the Blank space field is.

Modifications

In this example, the button was placed in the Blank space field. It can alternatively be placed in the header of the Record Details page by retrieving the element with the kintone.app.getHeaderMenuSpaceElement method.