Introduction to Kintone Config Helper

 

Introduction

Kintone Config Helper is a JavaScript library that supports the development of Kintone plug-ins.

This article goes through how using this library will make it easier for developers to retrieve the necessary field data from the App to create components for the plug-in config page.

Information needed to create the plug-in config page

When creating plug-ins, various Kintone REST APIs need to be called in the config.js file to retrieve field information from the Kintone App. This field information is commonly used to build out drop-down lists on the plug-in config page. The below screenshot shows a drop-down list created in the plug-in config page, containing options of Date fields that exist inside the App.

drop_down_list_of_dates.PNG

 

This allows Kintone users to be able to relate the settings within the plug-in with fields that exist in their Kintone App. For developers to create this list in the plug-in though, the "Field Type", "Field Name" and "Field Code" all need to be retrieved by using either/both the Get Form Fields API and the Get Form Layout API .

 

As an example, consider the information needed when creating a drop-down list of Date fields in the plug-in config page:

  1. The Field Types of the responded fields need to be retrieved, so that the they can be filtered with the specific field type needed for the drop-down list.
    01.png
  2. The Field Names of the responded fields need to be retrieved, as they will be used as the labels of the options in the drop-down list.
    02.png
  3. The Field Codes of the responded fields need to be retrieved, as they will be used as the values of the options in the drop-down list.
    03.png

 

Retrieving field data without Kintone Config Helper

This section will look through how a drop-down list of Date fields is created in the Date Input Button plug-in.

The code for creating the drop-down list of dates in the config.js file is as follows:

The response data from the Get Form Fields API request includes a list of fields in the App. The list is processed in a loop, where field data with properties of field type "DATE" are extracted. The extracted list is used to create the drop-down list of Date fields.

The code to process this function is long, and is not easy for some developers to read at first glance. Also, this method cannot retrieve data of Blank space fields, as the Get Form Fields API does not include any Blank space fields in its response. The Get Form Layout API must be used in a similar way to retrieve data of Blank space fields since the Get Form Fields API cannot.

 

Retrieving field data using Kintone Config Helper

Kintone Config Helper makes it easier to create a drop-down list of Date fields. 

By stating a Field Type as the parameter for KintoneConfigHelper's getFields function, a filtered array of field data of the specified Field Type, containing the Field Name, Field Code and the Field Type can be retrieved. In this case, DATE was specified as the parameter, and the response was a list of Date fields in the App, which was used to create the drop-down list of Date fields.

The code to process this function is significantly shorter, and easier to ready. This method can also retrieve data of Blank space fields with the same method.

How to use

Download the kintone-config-helper.js code from GitHub.
Refer to the following file structure, and place the kintone-config-helper.js in the plug-in directory.

Image_4.png

 

Add "js/kintone-config-helper.js" to the manifest.json file, so that the library can be called in the other JavaScript files.

Now everything is set - the kintone-config-helper.js methods can be called from the config.js code!

Finally

This library was provided to shorten the time used for Kintone developers to create the plug-in config page, so that more time could be spent on writing the codes for the plug-in main functions.

For more details of the usage, specifications and limitations of the library, refer to the Readme on GitHub.

https://github.com/kintone/config-helper

Notes

  • You are free to change, redistribute and use the source code for commercial use under the license terms.

 

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!