Randomly Select a Record
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|
|Link||Cell Phone Number||Cell||Type: Telephone number|
Set the Libraries
Set the Underscore.js library
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.
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.
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 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 .