Add buttons to the record list

Introduction

This tutorial will teach how to place a button on the Kintone record list using some of the basic Kintone APIs available. If needed, look through the Customizing Kintone with JavaScript & CSS article from the Kintone Help Center to review how to upload JavaScript files to a Kintone app.

 

after01.png

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.

 

after02.png

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.

 

after03.png

Refer to the Get Record List article for other JavaScript APIs to retrieve data.

 

 

after04.png

 

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.

after05.png


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.

after06.png

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.

Finally

In the code used in this article, the kintone.app.getHeaderMenuSpaceElement() was used to retrieve the space in the header of the record list. The JavaScript getElementById() method can also instead be used to get the element of this space. So why was the kintone.app.getHeaderMenuSpaceElement() method used?

The JavaScript Coding Guidelines introduced in the Kintone Developer Program 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 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!

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