How to Create Plug-ins
Overview
This article introduces how to create and upload a Kintone plug-in using plug-in packer and plug-in uploader.
It is recommended to read the following article and set up the environment before this current article:
Get Started with Developing Plug-ins
An "Input value check plug-in" will be created, which will validate data that users input into an App's record.
STEP 1: Create a Sample App
First, create a new Kintone App. From the Kintone Marketplace, choose Customer Database.
For more information on adding an App from the Kintone Marketplace, refer to the following article:
Adding a Sample App
STEP 2: Prepare the Plug-in Files
Next, prepare the necessary files for the Kintone plug-in. Create a directory with the following structure.
|
|
The Plug-in Icon
Prepare an icon file for the plug-in. Set the image under the "image" directory with the file name "check.png".
The Desktop JavaScript Code
Prepare a JavaScript file that will run for desktop browsers. This is where the main Kintone customization codes will be written.
In the following sample code, the customization checks the values when a field value changes and the record is saved. Since this article aims to understand the process of creating a plug-in, the Plug-in settings page will not be configured in this sample. Therefore, the field codes are hard-coded.
Copy the sample code below, save the file as "desktop.js", and place it under the "js" directory.
|
|
The Manifest File
The manifest file is a configuration file that contains all the file information needed to create the plug-in. Save the following sample as "manifest.json" and place it under the "sample-plugin" directory.
|
|
Refer to the following article for other parameters in the manifest file:
The Manifest File
Directory Structure
Once all the files are prepared, the file tree should now look like the following structure:
|
|
STEP 3: Package the Plug-in Files
-
Install plugin-packer
using npm.
1
npm install -g @kintone/plugin-packer
-
Move up a directory from the "sample-plugin" directory. Run the following command to package the files.
1
kintone-plugin-packer sample-plugin
If the packaging is successful, the following message will be displayed.
1
Succeeded: DIRECTORY_PATH/plugin.zip
-
If the command execution succeeds, a plug-in file (plugin.zip) and a private key file (ppk file) will be generated. The private key file name "pluggemelniigegboedcjdggddigldbla" in the following example is the plug-in ID. This is a randomly assigned unique ID.
1 2 3 4 5 6 7 8 9
work ├── plugin.zip ├── plggemelniigegboedcjdggddigldbla.ppk └── sample-plugin ├── image | └── check.png ├── js | └── desktop.js └── manifest.json
Note
There is also a web version of plugin-packer to package plug-ins.
For more information, refer to the following article:
Plugin-packer (web version)
STEP 4: Install the Plug-in into Kintone
Kintone Administrator permission is required to add plug-in files to Kintone. For more information, refer to the following article.
Kintone Administrator
-
Install plugin-uploader using the following command.
1
npm install -g @kintone/plugin-uploader
-
Run the following command to add the plug-in file to Kintone.
1
kintone-plugin-uploader plugin.zip
-
Enter your Kintone subdomain, login name, and password.
1 2 3 4 5 6 7 8
? Input your kintone's domain (example.kintone.com): <subdomain>.kintone.com ? Input your username: <user name> ? Input your password: <user password> > Open https://<subdomain>.kintone.com/login?saml=off > Trying to log-in... > Navigate to https://<subdomain>.kintone.com/k/admin/system/plugin/ > Trying to upload plugin.zip > plugin.zip has been uploaded!
-
Next, navigate to Kintone on the browser and check if the plug-in has been uploaded. Open the Kintone Administration page and click on Plug-ins. "Input value check plug-in" should be added to the Imported Plug-ins list.
Note
Plug-in files can also be added from the Kintone Administration page.
For more information, refer to the following article on the Kintone Help site:
Adding plug-ins by importing plug-in files
.
STEP 5: Add the Plug-in to the App
Add the plug-in to the Customer Database App created in STEP 1 .
- In the Customer Database App, go to App Settings and open Plug-ins.
- Click the Add Plug-in button.
- Check the box next to "Input value check plug-in" and click the Add button at the bottom right of the page.
- Navigate back to the App Settings page and click Update App.
Notes
If a plug-in with the same Plug-in ID is uploaded, it will automatically overwrite the plug-in, and will take effect on all apps that are using that plug-in.
STEP 6: Test the Plug-in
Go to the App and add a new record. Enter data into the Email and Telephone Number fields. The data will be validated, and will show field errors if the data is invalid.
Finally
Now that the plug-in has been created, the next tutorial will guide through the process of implementing its settings page. Follow the step-by-step guides in the following article for instructions on how to create plug-ins settings: