What is Underscore.js?
The Customization Result
The customization will generate a "Choose a random employee!" button at the App's Header Menu Space on the Record List page. When the button is clicked, a browser alert with a random employee's name will appear, and the user is redirected to the Record Details page if they click OK. If there are no records in the App, a "No Records Available!" error alert will appear instead. The below GIF shows how this looks in action.
Setting Up the Customization
Step 1. Configure the Kintone App's Field settings
Create an App with the following fields:
|Field Type||Field Name||Field Code|
|Link to (Telephone number)||Cell Phone Number||Cell|
Navigate to the Underscore.js library's CDN URLs section. Copy one of the Underscore.js library's CDN URL that ends with
The RandomSelector.js file below will use Underscore.js v1.12.0.
Kintone UI Component
Kintone UI Component is a library that allows Kintone developers to create Kintone-like user interfaces easily. Refer to the Kintone UI Component GitHub repository and Kintone UI Component documentation for detailed instructions and feature information.
Go to the Kintone UI Component GitHub page to download the following files:
⚠️ Caution: The order of the URLs and files does matter!
The video below illustrates the steps described in the tutorial to create the Random Employee Selector App with Underscore.js customization.
The following section will explain the code in the RandomSelector.js file.
The code is configured to only load when the Record List page is displayed by using the Kintone Record List event, app.record.index.show. The event object is passed as an argument to access record details, such as the Name value. For more information, refer to the Record List Event article.
Setting up the button
The button component is created using the Kintone UI Component library. The button's displayed text, type, and onclick event are configured following the Kintone UI Component's button documentation.
The kintone.app.getHeaderMenuSpaceElement() API is used to retrieve the field element inside the Record List page's header. The button component is handled as a DOM element by using its function render(). Thus, the button is simply appended to the HTML element.
With only the code above, the Record List event runs every time the page reloads, appending the button on the page each time. To prevent this bug, add an if statement to check if the button already exists, as shown below.
Selecting the Random Record
The randomRecordSelector function will run when the button is clicked. The Underscore.js function _.sample() is applied to event.records to return a random record from the records array.
⚡️ Note how an underscore, '
_', is put before calling the sample function. Any function included from the Underscore.js library must be called in this manner.
The record specific URL must be generated to redirect the user to the selected Record Detail page. The URL is the combination of the subdomain, the App's ID, and the Record Number. The Location Web API gets the subdomain with Window.location.hostname Web API. The App's ID is retrieved with the kintone.app.getId() Kintone API. Once the random record is selected, the Record Number's value is retrieved.
Refer to the Location Web API documentation on the MDN web docs page for details.
The Window.confirm() method displays a modal dialog with the selected employee's name. Once the user clicks on the OK button, they would be redirected to the employee's Record Detail page.
For more information, refer to the Underscore.js library's sample function documentation.
Kintone UI Component is an open-source library. To report bugs and problems, post a GitHub Issue in the Kintone UI Component repository. Modification, redistribution, and commercial use of the source code is subject to the license agreement.
Kintone UI Component helps implement a wide variety of processes with events that support UI actions in addition to making Kintone-like UI components easily. Refer to the Kintone UI Component documentation and take advantage of these useful features! For additional examples using Kintone UI Component, refer to Creating Kintone-like Checkboxes with Kintone UI Component and Create form elements with Kintone UI Component articles.
For questions on using Kintone UI Component or Underscore.js libraries on Kintone, post a question in the Kintone Developer Community.