To Start Off
This tutorial will guide you on how to place a button in your Kintone record list, using some of the basic Kintone APIs that we have on this site.
Step 1. Set the Record List Event
To start off, we need our code that sets the button to run only when the record list page is displayed.
Use the Kintone record list event, so that the code will run when the record list page appears. The function used here is app.record.index.show. Check 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 you are 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 a button there
Now that we've managed to run a code when the record list page appears, our next step is to set a button in our record list.
We first need to determine where to place the button - Kintone has a number of APIs to retrieve field elements inside a record list. In this case, we will use kintone.app.getHeaderMenuSpaceElement(), which will retrieve the field element inside the header of the record list.
Great! We've managed to place a button in the header of the record list.
But placing the tag itself inside the innerHTML can cause bugs, so it would be better if the code is written as follows:
Step 2b. Remove the Duplication Bug
It's great that we've managed to place a button on our list - but see what happens when you click on the column titles to sort your records.
The record list event runs again when you do this, adding a duplicate of the button on the page.
To prevent this bug, add an if statement to see if the button already exists.
There we go! The bug should be now fixed.
Step 3. Run a Code when the Button is Clicked
The final thing to do is to be able to run a code when the button is clicked.
When you are more familiar with the Kintone API, you can place in more useful code, such as running a Kintone REST API to retrieve all the record information on the page, and displaying results calculated from that data.
We hope that you've managed to succeed in placing the button into the record list.
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 your code won't be able to run if you are using the getElementById() method. If you use the kintone.app.getHeaderMenuSpaceElement() method, you won't need to worry about the kintone updates affecting how your code works.
We hope you found this useful - we will be bringing out more tips to code with kintone!