Date Input Button Plug-in

Introduction

This article introduces the Date Input Button Plug-in, which is a plug-in version of the sample code introduced in the "Input date with a button click" article.


The plug-in allows users to relate which Date fields and Blank Space fields will be used in the customization through the GUI on the config page.

Plug-in file

The packaged sample plug-in zip file can be downloaded from the Releases page on Github.
Install the plug-in into your domain by following the plug-in installation guide on the Help page.
You can then add the plug-in to a specific App by following the plug-in adding guide on the Help page.

Overview

Set your form up to support the plug-in by adding a Date field and a Blank Space field in your App. Give the Blank Space field an Element ID.

 

Screenshot of the plug-in settings screen. The plug-in will require you to have a Date field and a Blank Space field in your Form. Access the settings of the Blank Space field to assign it an Element ID. After saving  the form, these fields should appear in the selectable options of the plug-in settings.


 

 

Relate the fields in the form with the options in the plug-in settings.
Save the settings, and update the App.

dateinputbutton-plug-in_config.png

 

 

Now, when adding a new record, a button that interacts with the date field will be displayed.
Clicking it will insert today's date into the designated Date field.

dateinput.gif

File structure

The sample codes used in the plug-in are listed under the src file in our Github repository.

The plug-in is created with the following file structure:

 

plug-in/
├── html/
│            └──── config.html
├── css/
│            ├──── 51-modern-default.css
│            └──── config.css
├── js/
│            ├──── config.js
│            └──── desktop.js
├── image/
│            └──── icon.png
└── manifest.json

 

config.html

This file builds the HTML of the plug-in settings page.
Each <div> tag with the "block" class represents 1 row of related HTML elements.

dateinput_html.png


Specific class names are given to the HTML elements so that they can be styled with the 51-modern-default.css file to fit in with Kintone's UI.
IDs are allocated to the <select> tags to later populate the drop-down when config.js is called.

51-modern-default.css

This CSS file is provided on Github. This file styles HTML elements on the plug-in config page to fit in with Kintone's UI.
We recommend that you do not make changes to 51-modern-default.css. If you need to style additional elements, or over-ride the default styles, those changes should be added into config.css.

config.css

This supporting CSS file is used to style some areas of the plug-in config page that 51-modern-default.css doesn't cover.

config.js

This file is used to populate the drop-down fields on the plug-in config page, and to also save the data inputted by the user.

In this plug-in, the 3 main functions to populate the drop-down fields are setDropDownForDate, getLayout and setDropDownForSpace, which are sequentially called after the previous process finishes.

setDropDownForDate
This function uses the kintone.api() wrapper from the JavaScript API to call the REST API endpoint Get Form Fields. Get Form Fields returns an object that contains the form fields for the specified App. Note that Blank Space fields are not included in the response. They must be retrieved using Get Form Layout.
Depending on the endpoint called, Get Form Fields can return either the deployed form fields (the user has clicked Update App in the App Settings and the changes have been committed) or the preview form fields (the form has been saved in the App settings, but the user has not clicked Update App and committed them). This function uses the preview endpoint as users may access the plug-in settings page before they are ready to commit their changes.

getLayout
This function uses the kintone.api() wrapper from the JavaScript API to call the REST API endpoint Get Form Layout. Get Form Layout returns an object that contains the layout data of the form, which also includes data of Blank Space fields.
Each array in the response represents a row of fields, and the code loops through the rows to output Blank Space fields. The result is passed on to the next function, setDropDownForSpace.
Similar to the previous function, depending on the endpoint called, Get Form Layout can return either the deployed form layout (the user has clicked Update App in the App Settings and the changes have been committed) or the preview form layout (the form has been saved in the App settings, but the user has not clicked Update App and committed them). This function uses the preview endpoint as users may access the plug-in settings page before they are ready to commit their changes.

setDropDownForSpace
This function receives the output from the previous function, and appends the Blank Space field data to the drop-down field laid out in the plug-in settings.

desktop.js

This file runs on the regular pages of the App, such as the Record List and Record Details pages, but not on the App Settings page. This file uses the sample code included in the article "Input date with a button click". However, unlike the code in the article, the code in desktop.js is wrapped in an immediate function with the plug-in ID value as the input parameter. The plug-in ID value is needed for several JavaScript API calls.

The data saved by the user in the plug-in settings page can be retrieved by using the kintone.plugin.app.getConfig(PLUGIN_ID) method. The retrieved values are allocated to variables in the code. The rest of the code in desktop.js is mostly the same as the code in the "Input date with a button click" article.

manifest.json

The manifest file states the paths of the files that will be used in the plug-in. It also links to the jQuery library hosted on the Kintone CDN, so that it can be used in the JavaScript files.
The array in the value of the required_params key states which settings in the plug-in config page are required. If these settings are not saved using the setConfig API, errors will be displayed on other pages of the App, stating that the plug-in settings have not been configured yet. 
The name, description, and homepage_url key-value pairs are labels and links displayed in the plug-in settings.

 

 

Finally

Licenses

This plug-in is open sourced under the MIT License. It allows open- or closed-sourced distribution, including commercial use.
If you would like to add more functionality to the plug-in, you are welcome to clone our repository to make your own changes and redistribute it. We generally do not accept external pull requests for the sample plug-in as this repository exists for educational purposes.

If you have any questions related to building Kintone plug-ins, please post your question in the kintone developer network community.

Contribution

This sample plug-in was created with the contribution of Fuji Business International
https://www.linkedin.com/in/mfujinoki/

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!