Add Buttons (Record List)

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.
Look through the Tutorial to see how to upload JavaScript files to your Kintone app.

 

after01.png

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.

 

after02.png

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.

 

after03.png

You can look through the Get Record List article for other JavaScript API to retrieve data.

 

 

after04.png

 

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.

after05.png


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.
This is just plain JavaScript now, so place in whatever code you like.

after06.png

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.

Finally

We hope that you've managed to succeed in placing the button into the record list.
In the code we used in this article, we used the kintone.app.getHeaderMenuSpaceElement() to retrieve the space in the header of the record list. We could, actually, use the JavaScript getElementById() method instead to get the element of this space. So why did we use the kintone.app.getHeaderMenuSpaceElement() method? 

The JavaScript Coding Guidelines introduced in the Kintone developer network states as follows:

------
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!

Was this article helpful?
1 out of 1 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!