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