kintone developer network

Add Buttons (Record List)

Follow

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.

 

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. Look here for more details.

(function () {
    "use strict";
    // Run a function when the record list page appears 
    kintone.events.on('app.record.index.show', function (event) {
        // Place some codes in here
        alert("Hello!");
    });
})();

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.

 

You can look through here for other JavaScript API to retrieve data.

(function () {
    "use strict";
    // Run a function when the record list page appears 
    kintone.events.on('app.record.index.show', function (event) {
        // Retrieve the header menu space element and set the button there
	kintone.app.getHeaderMenuSpaceElement().innerHTML =  '<button id=\'my_index_button\'>Click me!</button>';
        });
})();

 

 

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:

(function () {
    "use strict";
    // Run a function when the record list page appears 
    kintone.events.on('app.record.index.show', function (event) {
         // Set a button
          var myIndexButton = document.createElement('button');
          myIndexButton.id = 'my_index_button';
          myIndexButton.innerHTML = 'Click Me!';
 
         // Retrieve the header menu space element and set the button there
         kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
    });
})();

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.

(function () {
	"use strict";
	// Run a function when the record list page appears 
	kintone.events.on('app.record.index.show', function (event) {
		//Prevent duplication of the button
		if (document.getElementById ('my_index_button') != null) {
		return;
		}   
	// Set a button
	var myIndexButton = document.createElement('button');
	myIndexButton.id = 'my_index_button';
	myIndexButton.innerHTML = 'Click Me!';
	// Retrieve the header menu space element and set the button there
	kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
	});
})();

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.

(function () {
	"use strict";
	// Run a function when the record list page appears 
	kintone.events.on('app.record.index.show', function (event) {
		//Prevent duplication of the button
		if (document.getElementById ('my_index_button') != null) {
			return;
		}   
	// Set a button
	var myIndexButton = document.createElement('button');
	myIndexButton.id = 'my_index_button';
	myIndexButton.innerHTML = 'Click Me!';

	// Button onclick function
	myIndexButton.onclick = function() {
		window.alert('You clicked me!');
	}

	// Retrieve the header menu space element and set the button there
	kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
	});
})();

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?
0 out of 0 found this helpful
Have more questions? Submit a request
Comments