Introduction
This tutorial will teach how to place a button on the Kintone record details page using some of the basic Kintone APIs available. It is recommended to look through the Add buttons (Record List) tutorial first before trying this tutorial.
Step 1. Set the Record Details Event
First specify that the code should only run when the record details page is displayed. This is possible with the Kintone record details event, app.record.detail.show. Refer to the Record Details Event article for more details.
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, the button can be placed on the header of the record (Step 2a), or on a blank space field of the App (Step 2b).
Step 2a. Set the Button on the Header
Similar to the Add Buttons (Record List) tutorial, the header element of the record will need to be retrieved first with kintone.app.getHeaderMenuSpaceElement().
This code should place a button on the header of the record. However, nothing will happen when the button is clicked yet.
Step 2b. Set the button on a blank space field
It is also possible to place the button somewhere inside the form of the record instead, by retrieving the element of a blank space field of the App and placing the button there.
To do this, first place a blank space field into the 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 update the App.
Next, use kintone.app.record.getSpaceElement() to retrieve the element of the Blank space field.
A button should now be placed inside the record form.
Step 3. Run a code when the button is clicked
Finally, run a code when the button is clicked. This code uses the kintone.app.record.get Kintone JavaScript API. When the button is clicked, the date and time of when the record was created is displayed inside an alert window.
Finally
Hopefully this article has helped to understand more about the Kintone JavaScript API. Most of the code is just plain JavaScript - the Kintone JavaScript API is simply to retrieve data needed from the Kintone records.