Create a random record selector with Underscore.js

Introduction

This article explains how to build a Kintone App with a random record selector button using the Underscore.js JavaScript library. The example customization will illustrate how the Underscore.js library's sample function can be used to make a Random Employee Selector App. Each record contains information on each personnel. A button on the header of the Record List page is created. When the button is clicked, a confirmation window will popup with the name of the chosen employee. If the user clicks OK, they are redirected to the Record Details page.

What is Underscore.js?

Underscore.js is an open-source JavaScript library that provides various functional programming helpers without extending any built-in objects. Be sure to check Underscore's MIT License page before using it.

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.

GIF demoing how to use the random record selector button

Setting Up the Customization

To set up this customization on a Kintone App, first, configure the App's field settings. Then download and upload the required libraries and the JavaScript file into the App's settings.

Step 1. Configure the Kintone App's Field settings

Create an App with the following fields:

Field Type Field Name Field Code
Text Name Name
Link to (Telephone number) Cell Phone Number Cell
Text area Address Address

Step 2. Upload the required libraries to the App's JavaScript and CSS settings

This setup requires the Underscore.js JavaScript library and the Kintone UI Component files (CSS and JS) to be linked or uploaded to the Kintone App. Access the App's settings page and perform the following configuration on the JavaScript and CSS Customization settings.

Underscore.js

Navigate to the Underscore.js library's CDN URLs section. Copy one of the Underscore.js library's CDN URL that ends with underscore-min.js and paste it under the "Upload JavaScript File for PC" section. For more details, refer to the Customizing an App with JavaScript and CSS help article.

The RandomSelector.js file below will use Underscore.js v1.12.0.
https://cdn.jsdelivr.net/npm/underscore@1.12.0/underscore-min.js

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:

Apply the above files to the Kintone App from the JavaScript and CSS settings.

Step 3. Upload the RandomSelector.js JavaScript File

Save the following code as a JavaScript file.

 

JavaScript and CSS Customization settings page should include the four files like the following:
⚠️ Caution: The order of the URLs and files does matter!

 

Under the Up;load JavaScript for PC section, underscore.js mini CDN url, kintone-ui-component.min.js, and RandomSelector.js are uploaded in that order. kintone-ui-component.min.css file is uploaded under the Upload CSS file for PC section

Walkthrough Video

The video below illustrates the steps described in the tutorial to create the Random Employee Selector App with Underscore.js customization.

Code Explanation

The following section will explain the code in the RandomSelector.js file.

kintone.events.on Event

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.

Important Notes

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.

Finally

Underscore.js JavaScript library provides over 100 functions. Everything from map, filter, and invoke functional helpers to function binding and Javascript templating. Refer to Underscore.js library's documentation for the complete list of their functions. For additional examples using Underscore.js, refer to the Organize data with Underscore.js article.

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.

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