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