Randomly Select a Record

Contents

Overview

This article explains how to build a Kintone App with a random record selector button using the Underscore.js (External link) JavaScript library. The example customization illustrates how the Underscore.js library’s sample function (External link) 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 (External link) 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.

Animated GIF: User clicks the random record selector button, and a message alert message is displayed.

Prepare the App

Create the form

Create an App (External link) 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 (External link), 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 (External link) and Kintone UI Component documentation (External link) for detailed instructions and information of features.

Navigate to the Kintone UI Component (v0) GitHub page (External link) 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 (External link), 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 (External link).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
(function() {
  'use strict';

  function randomRecordSelector(event) {
    if (event.records.length === 0) {
      alert('No Records Available!'); // Error message if the app has no records.
    } else {
      // Alert displays the string in the Text field with "Name" field code
      var randomRecord = _.sample(event.records);
      var ran_Name = randomRecord.Name.value;
      var subdomain = window.location.hostname;
      var appId = kintone.app.getId();
      var record_URL = 'https://' + subdomain + '/k/' + appId + '/show#record=' + randomRecord.Record_number.value;
      if (window.confirm(ran_Name + ' was chosen!')) {
        // Redirects to the Record's Detail Page when clicked "Okay"
        window.location.href = record_URL;
      }
    }
  }

  // Run a function when the record list page loads
  kintone.events.on('app.record.index.show', function(event) {

    // Prevent Button Duplication Bug
    if (document.getElementById('myButtonID') !== null) {
      return;
    }

    // Create a button
    var myButton = new kintoneUIComponent.Button({
      text: 'Choose a random employee!',
      type: 'normal'
    });
    myButton.element.id = 'myButtonID';
    myButton.on('click', function() {
      randomRecordSelector(event);
    });

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

JavaScript and CSS Customization settings page should include the four files like the following:

Screenshot: The necessary files have benn uploaded on the JavaScript and CSS Cusomization screen.

caution
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

1
kintone.events.on('app.record.index.show', function(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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// Create a button
var myButton = new kintoneUIComponent.Button({
  text: 'Choose a random employee!',
  type: 'normal'
});
myButton.element.id = 'myButtonID';
myButton.on('click', function() {
  randomRecordSelector(event);
});

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

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 (External link).
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.

1
2
3
4
5

// Prevent Button Duplication Bug
if (document.getElementById('myButtonID') != null) {
  return;
}

Select a random record

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
function randomRecordSelector(event) {
  if (event.records.length === 0) {
    alert('No Records Available!'); // Error message if the app has no records.
  } else {
    // Alert displays the string in the Text field with "Name" field code
    var randomRecord = _.sample(event.records);
    var ran_Name = randomRecord.Name.value;
    var subdomain = window.location.hostname;
    var appId = kintone.app.getId();
    var record_URL = 'https://' + subdomain + '/k/' + appId + '/show#record=' + randomRecord.Record_number.value;
    if (window.confirm(ran_Name + ' was chosen!')) {
      // Redirects to the Record's Detail Page when clicked "Okay"
      window.location.href = record_URL;
    }
  }
}

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.

tips
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 (External link) 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 (External link).

Reference