This article introduces the 1 User Limit Plug-in, which is a plug-in version of the sample code introduced in the "Allow only 1 user for User Selection fields" article.
This plug-in limits only one user to be selected in the specified User Selection field. When a user tries to save a record with more than one person in the specified User Selection field, the error message that is written in the plug-in settings will be displayed and the record will not be saved. The plug-in settings page allows the user to choose which User Selection field will be used, as well as to write a custom error message.
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.
Set your form up to support the plug-in by adding a User selection field in your App.
Relate the fields in the form with the options in the plug-in settings.
Also set an Error Message that will display, when the user tries to save 2 or more users in the User selection field.
Save the settings, and update the App.
Now, when saving a record, an error message will be displayed on the Record if there are 2 or more users selected in the specified User selection field.
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:
│ └──── config.html
│ ├──── 51-modern-default.css
│ └──── config.css
│ ├──── config.js
│ └──── desktop.js
│ └──── usericonicon.png
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.
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.
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.
This supporting CSS file is used to style some areas of the plug-in config page that 51-modern-default.css doesn't cover.
This file is used to populate the drop-down field on the plug-in config page, and to also save the data inputted by the user.
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.
As this plug-in does not require all of the retrieved fields to be used in the plug-in settings page, the fields with type value of USER_SELECT (the User selection field) are extracted from the object. The extracted selection is then appended to the element with the id of select_user_field (stated in config.html) to make a drop-down list of User selection fields in the App.
At the end of the setDropDown function, the code looks through the CONF object where any saved setting data are stored. If it's the first time for the user to use the plug-in, there are no saved values, thus no values are placed in the settings. If the user has saved any settings before in the plug-in (which is stored using Kintone's setConfig API), then those saved values are inserted into the designated settings.
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 called on the config page.
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.
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.