Add Buttons (Record Details)

To Start Off

This tutorial will guide you on how to place a button in your kintone record details page.
We recommend you to look through the Add buttons (Record List) tutorial first before trying this tutorial

Step 1. Set the Record Details Event

Our code here should run only on the record details page, so we will first need to set the record details event. The function used here is app.record.detail.show. Look here for more details.

(function () {
    "use strict";
    //Record details event
    kintone.events.on('app.record.detail.show', function (event) {
        // Place your code here
        alert("Hello!");
    });
})();

Check that the alert window appears when the record details page appears.
Notice also that the alert window will not appear, when you are viewing other pages such as the record list page and record edit page.

Step 2. Set the Button

For the next step, you can either place a button on the header of the record (Step 2a), or on a Blank space field of your app (Step 2b).

Step 2a. Set the Button on the Header

Rather similar to the Add Buttons (Record List) tutorial, you will need to retrieve the header element of the record with kintone.app.getHeaderMenuSpaceElement().

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

        //Set the button on the header
        kintone.app.record.getHeaderMenuSpaceElement().appendChild(myRecordButton);
    });
})();

This code should place a button on the header of the record. Nothing will happen though when the button is clicked!

Step 2b. Set the Button on a Blank space field

If you would rather place the button somewhere inside the form of the record instead, you can retrieve the element of a Blank space field of your app and place the button there.
To do this, first place a Blank space field into your form, through the app's settings.

Hover over the Blank space field and click on "Settings".

Place in a name that will identify that Blank space field, save the settings and apply changes to your application.

Now, we will use kintone.app.record.getSpaceElement() to retrieve the element of the Blank space field.

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

        // Set button on the Blank space field
        kintone.app.record.getSpaceElement('space_for_button').appendChild(mySpaceFieldButton);
    });
})();

You should now find yourself with a button placed inside the record form.

Step 3. Run a Code when the Button is Clicked

Finally, let's run a code when the button is clicked.
This time, we'll run a kintone JavaScript API that can be found here, when the button is clicked.

(function () {
  "use strict"; 
    kintone.events.on('app.record.detail.show', function (event) {
 		// Create a button
        var mySpaceFieldButton = document.createElement('button');
        mySpaceFieldButton.id = 'my_space_field_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);
    });
})();

When the button is clicked, this should display the date and time of when the record was created, inside an alert window.

Finally

We hope this article helped you understand more about the kintone JavaScript API. Most of the code here is just plain JavaScript - we're just using the kintone JavaScript API to retrieve data that we need from the kintone records.
Stay tuned for more upcoming tutorials!