Step 1. Set the Record List Event
First specify that the code should only run when the record list is displayed. This is possible using the Kintone record list event, app.record.index.show. Refer to the Record List Event article for more details.
Check that the alert window appears when the record list page appears.
Notice also that the alert window will not appear, when viewing other pages such as the record details and record edit page.
Step 2. Set the button
Step 2a. Retrieve the menu space element and place the button
With a successful code that runs only when the record list page is displayed, the next step is to set a button on the record list. First determine where to place the button. Kintone has a number of APIs to retrieve field elements inside of a record list. This tutorial uses kintone.app.getHeaderMenuSpaceElement(), which will retrieve the field element inside the header of the record list.
Great! The button has now been placed on the record list field. However, placing the tag itself inside the innerHTML can cause bugs, so the code is better written as follows:
Step 2b. Remove the duplication bug
The button has now been successfully placed on the record list, but observe what happens when clicking on the column titles to sort the records. The record list event runs each time the page reloads, adding a duplicate of the button on the page.
To prevent this bug, add an if statement to see if the button already exists.
The bug should be now fixed!
Step 3. Run a code when the button is clicked
The final step is to set the code to run when the button is clicked.
Any code is fine for this.
Some examples of other possible operations are running a Kintone REST API to retrieve all record information on the page, and displaying results calculated from that data.
The id/class attributes of each element used in Kintone may be changed without any notice.
The DOM structure may also change without any notice.
This means that after a Kintone maintenance update, there's a possibility that uploaded code won't be able to run if it is using the getElementById() method. Using the kintone.app.getHeaderMenuSpaceElement() method is not affected by Kintone updates and users will not need to be worried about changes to DOM structure .
We hope you found this useful - we will be bringing out more tips to code with Kintone!