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 REST API Client to get the field information of the app.
What is Kintone REST API Client?
Kintone REST API Client is a library that allows developers to easily access Kintone REST API. For more information, refer to the following site:
Kintone REST API Client
Create a Drop-down List Using Kintone REST API Client
First, define a createOptions function.
In the function, use KintoneRestAPIClient to create a client (connection instance) for operating Kintone REST API.
Next, use client.app.getFormFields() to get the field settings information for the specified App, and extract field codes, field names, and other details from it.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const createOptions = async () => {
let options = [];
const client = new KintoneRestAPIClient();
const appId = kintone.app.getId();
const {properties} = await client.app.getFormFields({app: appId});
// get fields that are single line text and number
const fields = Object.values(properties).filter(
(field) => field.type === 'LINK' );
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.
