How to Create a Dynamic Settings Page

Contents

Overview

This article is based on the App made in the previous article. It is recommended to read the following article before this current article:
How to Create a Settings Page

This article will modify the plug-in created in the previous article, so that the settings page will use dynamically created drop-downs. In the previous article, users needed to fill in text boxes with field codes, which had a risk of field codes being mistyped. With this modification, users will be able to choose fields for the plug-in settings by selecting from the drop-down menu.

STEP 1: Complete the Steps in the Previous Article

Complete the steps in the following article:
How to Create a Settings Page

STEP 2: Update the HTML file

Modify the "config.html" file to generate a drop-down list.

In "config.html", a text box was created as follows.

1
2
3
<div class="kintoneplugin-input-outer">
  <input id="checkvalue-field-zip" class="kintoneplugin-input-text" type="text">
</div>

Modify the text box sections to drop-downs by setting the kintoneplugin-select-outer and kintoneplugin-select classes. Set the initial values to be blank. In the next step, the options for the drop-downs will be dynamically generated with JavaScript, using the App's field information.

 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
<div>
  <div class="setting">
    <label class="kintoneplugin-label" for="checkvalue-field-tel">
      <span>Check the Telephone value</span>
      <span class="kintoneplugin-require">*</span>
    </label>
    <div class="kintoneplugin-row">Input the field code</div>
    <div class="kintoneplugin-select-outer">
      <div class="kintoneplugin-select">
        <select id="checkvalue-field-tel" name="checkvalue-field-tel">
          <option value="">-----</option>
        </select>
      </div>
    </div>
  </div>
  <div class="setting">
    <label class="kintoneplugin-label" for="checkvalue-field-mail">
      <span>Check the Email value</span>
      <span class="kintoneplugin-require">*</span>
    </label>
    <div class="kintoneplugin-row">Input the field code</div>
    <div class="kintoneplugin-select-outer">
      <div class="kintoneplugin-select">
        <select id="checkvalue-field-mail" name="checkvalue-field-mail">
          <option value="">-----</option>
        </select>
      </div>
    </div>
  </div>
  <div class="setting">
    <button type="button" id="submit" class="kintoneplugin-button-dialog-ok">save</button>
    <button type="button" id="cancel" class="kintoneplugin-button-dialog-cancel">cancel</button>
  </div>
</div>

STEP 3: Update the JavaScript File

Next, modify the "config.js" file. Add a process to retrieve the App's field information and generate a drop-down list. Use kintone-config-helper to get the field information of the app.

What is kintone-config-helper?

kintone-config-helper is a library that allows developers to easily obtain the App's field and layout information. For more information, refer to the following article:
Introduction to Kintone Config Helper

Download kintone-config-helper.js from the following link and place it under the "js" directory.
kintone-config-helper.js (External link)

Create a Drop-down List Using kintone-config-helper

First, define a createOptions function that creates an option element. In the function, use KintoneConfigHelper.getFields() to get the field codes and field names from the App. Set the obtained field codes and field names to the option element.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
const createOptions = async () => {
  let options = [];
  // get fields that are single line text and number
  const fields =
    await KintoneConfigHelper.getFields(['SINGLE_LINE_TEXT', 'NUMBER']);
  fields.forEach((field) => {
    const option = document.createElement('option');
    option.value = field.code;
    option.textContent = field.label;
    options = options.concat(option);
  });
  return options;
};

Next, use the createOptions function created above to generate drop-down lists.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// get form information
const telFormData = document.getElementById('checkvalue-field-tel');
const mailFormData = document.getElementById('checkvalue-field-mail');

// create the drop-down list
const selectBoxOptions = await createOptions();
  telFormData.appendChild(telSelectBoxOption);
  const faxSelectBoxOption = originalOption.cloneNode(true);
  faxFormData.appendChild(faxSelectBoxOption);
  const mailSelectBoxOption = originalOption.cloneNode(true);
  mailFormData.appendChild(mailSelectBoxOption);
});

This completes the update to the plug-in settings page.
The final code is as follows.

 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
(async (PLUGIN_ID) => {
  'use strict';

  // escape values
  const escapeHtml = (htmlstr) => {
    return htmlstr
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;')
      .replace(/\n/g, '&#xA;');
  };

  const createOptions = async () => {
    let options = [];
    // get fields that are links
    const fields =
      await KintoneConfigHelper.getFields(['LINK']);
    fields.forEach((field) => {
      const option = document.createElement('option');
      option.value = field.code;
      option.textContent = field.label;
      options = options.concat(option);
    });
    return options;
  };

  // get form information
  const telFormData = document.getElementById('checkvalue-field-tel');
  const mailFormData = document.getElementById('checkvalue-field-mail');

  // create the drop-down list
  const selectBoxOptions = await createOptions();
  selectBoxOptions.forEach((originalOption) => {
    const telSelectBoxOption = originalOption.cloneNode(true);
    telFormData.appendChild(telSelectBoxOption);
    const mailSelectBoxOption = originalOption.cloneNode(true);
    mailFormData.appendChild(mailSelectBoxOption);
  });

  // get configuration settings
  const config = kintone.plugin.app.getConfig(PLUGIN_ID);

  // set initial value
  telFormData.value = config.tel || '';
  mailFormData.value = config.mail || '';

  // get app id
  const appId = kintone.app.getId();

  // save button
  const saveButton = document.getElementById('submit');
  saveButton.addEventListener('click', () => {
    const tel = escapeHtml(telFormData.value);
    const mail = escapeHtml(mailFormData.value);
    // required values check
    if (tel === '' || mail === '') {
      alert('Required value is missing.');
      return;
    }
    // duplicated values check
    if (new Set([tel, mail]).size < 2) {
      alert('Duplicate values.');
      return;
    }
    // save plugin configuration settings
    const newConfig = {tel, mail};
    kintone.plugin.app.setConfig(newConfig, () => {
      // redirect to the app settings page
      window.location.href = `/k/admin/app/flow?app=${appId}`;
    });
  });

  // cancel button
  const cancelButton = document.getElementById('cancel');
  cancelButton.addEventListener('click', () => {
    // redirect to the list of plug-ins screen after clicking the cancel button
    window.location.href = `/k/admin/app/${appId}/plugin/`;
  });
})(kintone.$PLUGIN_ID);

STEP 4: Update the manifest.json File

Add the kintone-config-helper.js file path to config in the "manifest.json" file.

Also, increment the value for version to indicate that the plug-in has been updated.

 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
{
    "manifest_version": 1,
    "version": "1.2.0",
    "type": "APP",
    "name": {
      "en": "Input value check plug-in"
    },
    "description": {
      "en": "This plugin checks telephone number and e-mail address"
    },
    "icon": "image/check.png",
    "homepage_url": {
      "en": "https://kintone.dev/en/plugins/development-guide/how-to-create-plugins/"
    },
    "desktop": {
      "js": [
        "js/desktop.js"
      ]
    },
    "config": {
    "html": "html/config.html",
    "js": [
      "js/kintone-config-helper.js",
      "js/config.js"
    ],
    "css": [
      "css/51-modern-default.css",
      "css/config.css"
    ],
    "required_params": ["tel", "mail"]
    }
  }

Directory structure

Once all the files are prepared, the file tree should now look like the following structure:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
sample-plugin
├── css
│   ├── 51-modern-default.css
│   └── config.css
├── html
│   └── config.html
├── image
│   └── check.png
├── js
│   ├── config.js
│   ├── desktop.js
│   └── kintone-config-helper.js
└── manifest.json

STEP 5: Repackage and Upload the Plug-in

Follow the steps in the following article to repackage the plug-in.
Package the Plug-in Files

To repackage, specify the private key file with the --ppk option.

1
kintone-plugin-packer sample-plugin --ppk {private_key_file}.ppk

Follow the steps in the following article to install the plug-in into Kintone:
Install the Plug-in into Kintone

If the file was uploaded successfully, the version added in "manifest.json" will be displayed under the plug-in name on the Plug-ins page.

STEP 6: Test the Plug-in

Go to the plug-in settings page and check that the input values are now a drop-down list, and that all the field names appear in the list.