Randomly Select a Record
Overview
This article explains how to build a Kintone App with a random record selector button using the
Underscore.js
JavaScript library. The example customization illustrates how the
Underscore.js library's sample function
can be used to make a Random Employee Selector App. Each record contains information of 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.
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.
Sample Image
The customization generates 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 appears. 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 appears instead.
Prepare the App
Create the form
Create an App
with the following fields and settings.
Field Type | Field Name | Field Code | Note |
---|---|---|---|
Text | Name | Name | |
Link | Cell Phone Number | Cell | Type: Telephone number |
Text area | Address | Address |
Set the Libraries
Set the Underscore.js library
Set the following URL into the App's
JavaScript and CSS Customization settings
, under the Upload JavaScript for PC option.
- https://cdn.jsdelivr.net/npm/underscore@1.13.2/underscore-umd-min.js
Set the Kintone UI Component (v0) library
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 information of features.
Navigate to the Kintone UI Component (v0)
GitHub page
to download the kintone-kintone-ui-component-0.9.0.tgz file.
Unzip the file to find the following files in the dist directory. Set the them into the App's
JavaScript and CSS Customization settings
, under the Upload JavaScript for PC option.
- kintone-ui-component.min.css
- kintone-ui-component.min.js
Sample Code
Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the
JavaScript and CSS Customization settings
.
|
|
JavaScript and CSS Customization settings page should include the four files like the following:
Attention
Caution: The order in which JavaScript and CSS are uploaded to an app matters. In this example, ensure that the Underscore.js library is uploaded before the JavaScript file. The order of uploads can be changed by clicking and dragging on the arrows for each item on the Upload JavaScript / CSS page.
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.
Create a button
|
|
The button component is created using the Kintone UI Component (v0) 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.
|
|
Select a 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
Note how an underscore, '_
', is placed before calling the sample function. Any function included from the Underscore.js library must be called in this format.
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 are redirected to the employee's Record Detail page.
For more information, refer to the
Underscore.js library's sample function documentation
.