Add Buttons to the Record Details Page

Contents

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.

A screenshot of an alert box being displayed.

Prepare the App

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

A screenshot of the Element ID of the Blank space field being updated.

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

A screenshot of the record details page with a button inside.

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.

A screenshot of an alert box being displayed.