Plug-in Development Guide
Overview
Read through Plug-in Development Environment before starting to develop your own Kintone plug-in.
Below are the 4 steps to develop your plug-in.
- Create files for the Kintone plug-in customization.
- Create a manifest file.
- Package your files using a packaging tool https://github.com/kintone-samples/plugin-samples/blob/master/package.sh
- Import the plug-in into your Kintone environment.
Creating each file
First, you’ll need to get the files ready to be packaged.
|
|
Plug-in Icon icon.png
The icon image for the Plug-in
- This file is required
- Use the following file types: png、jpg、gif, or bmp
- The maximum file size is 20MB
App customization for Desktop customize.js
The JavaScript file that is initiated on desktop browsers.
This is where the main Kintone customization codes will be written.
If you’re planning on making a mobile-only plug-in, you can skip this file.
The file can pull information from the Plug-in Settings page.
The maximum file size is 20MB.
kintone.plugin.app.getConfig()
can be used to pull information from the Plug-in Settings page. These information though need to be initially set by the config.js file using kintone.plugin.app.setConfig()
. The variable kintone.$PLUGIN_ID
will hold the Plug-in ID which will be needed.
*The Plug-in ID is an ID with 32 characters e.g. qrhfefwgeehqkanwmjwmhbgecsfgalbf
Sample code for retrieving the Plug-in ID
Apps can have multiple plug-ins. In this case, variables may set into the kintone.$PLUGIN_ID
more than twice. For this reason, use the code below to hold the plug-in ID variable.
|
|
Stylesheet for desktop view customize.css
The CSS file that is initiated on Desktop browsers.
You can follow the Kintone stylesheet if you want to use the Kintone design.
The maximum file size is 20MB.
App customization for Desktop mobile-customize.js
The JavaScript App customization for Desktop customize.jsfile initiated on the mobile.
This is optional, and can be left out if you will be using the plug-in on only desktop browsers. kintone.plugin.app.getConfig()
can be used to pull information from the Plug-in Settings page. This information needs to be initially set by the config.js file using kintone.plugin.app.setConfig()
. Follow the Sample code for retrieving the Plug-in ID.
The maximum file size is 20MB.
HTML for Plug-in Settings config.html
The HTML file that is used to display the settings page of the Plug-in.
This is optional, and can be ignored.
The maximum file size is 64KB.
JavaScript initiated on Plug-in Settings config.js
The JavaScript file that is initiated on the settings page of the Plug-in.
This is optional,Sample code for retrieving the Plug-in ID and can be ignored.
Follow the Sample code for retrieving the Plug-in ID.
The maximum file size is 20MB.
kintone.plugin.app.setConfig()
is used to save variables to the Plug-in.
Stylesheet for Plug-in Settings config.css
The stylesheet initiated on the settings page of the Plug-in
This is optional, and can be ignored.
You can follow the Kintone stylesheet if you want to use the Kintone design.
The maximum file size is 20MB.
The Manifest file
You’ll need a manifest file to create your plug-in.
Manifest file format
The manifest file format is as below. Specify each parameter in a JSON format.
PARAMETER | TYPE | REQUIRED | DETAILS | SAMPLE |
---|---|---|---|---|
manifest_version | Integer | Yes | The manifest version of the Plug-in. Only 1 can be stated for this value. |
“manifest_version”: 1 |
version | Integer | Yes | The Plug-in version. | “version”: 1 |
type | String | Yes | The type of the Plug-in. Specify the string “APP”. |
“type”:“APP” |
name | Object.<String> | Yes | Contains a list of localized Plug-in names, that will be displayed in the user’s locale (en, ja, zh). | “name”: { |
name.<locale> | String | Yes | The localized name of the plug-in. Must be between 1 to 64 characters. name.en is required. |
|
description | Object.<String> | Optional | Contains a list of localized Plug-in descriptions, that will be displayed in the user’s locale (en, ja, zh). | “description”: { |
description.<locale> | String | Yes | The localized description of the plug-in. Must be between 1 to 200 characters. description.en is Required. |
|
icon | String | Yes | The Plug-in icon file Only files within the plug-in can be specified. |
“icon”: “image/sample.png” |
homepage_url | Object.<String> | Optional | Contains a list of different Website URLs, that will be displayed in the user’s locale (en, ja, zh). | “homepage_url”: { |
homepage_url.<locale> | String | Optional | The Website of the plug-in for the user’s locale. | |
desktop | Object.<String> | Optional | The JavaScript and CSS files for the Desktop | “desktop”: { |
desktop.js | Array.<String> | Optional | An array of JavaScript file URLs for the Desktop Up to 30 files can be set. If multiple files have the same name, an error will occur |
|
desktop.css | Array.<String> | Optional | An array of CSS file URLs for the Desktop. Up to 30 files can be set. If multiple files have the same name, an error will occur |
|
mobile | Object.<String> | Optional | The JavaScript and CSS files for the mobile | “mobile”: { |
mobile.js | Array.<String> | Optional | An array of JavaScript file URLs for the Mobile. Up to 30 files can be set. If multiple files have the same name, an error will occur |
|
config | Object.<String> | Optional | The html, js and css files for the Plug-in Settings page. | “config”: { |
config.html | String | Optional | The HTML file for the Plug-in Settings page. Only files within the plug-in can be specified. |
|
config.js | Array.<String> | Optional | An array of JavaScript file URLs for the Plug-in Settings page. Up to 30 files can be set. If multiple files have the same name, an error will occur. |
|
config.css | Array.<String> | Optional | An array of CSS file URLs for the Plug-in Settings page. Up to 30 files can be set. If multiple files have the same name, an error will occur |
|
config.required_params | Array.<String> | Optional | An array of parameters that are required to be filled in in the Plug-in Settings page. Must be between 1 to 64 ASCII characters. |
Sample Manifest file
|
|
Packaging
Layout the created files and the manifest files so that it can be packaged.
Sample layout
|
|
Next, the packaging tool https://github.com/kintone-samples/plugin-samples/blob/master/package.sh
will be used with the below steps.
Place the packaging tool in your directory
Example:
|
|
Move to the directory
Example:
|
|
Run the Packaging tool
Run the packaging tool, and specify the folder with the manifest file as the argument.
Example:
|
|
If succeeded, the below folder and files will be created under the folder it was run in.
Example:
|
|
Make sure to keep the secret key file. This will be used when you’re packaging a second time.
Repackaging
If you need to package your data again, use the secret key file.
Example:
|
|
Importing
Now that you have the zip file, you’re nearly done!
Log into your Kintone environment with an Administrator level account, and go to the Kintone Administration page, which is an option you can find from the top right cog wheel near your name. Click on “Plug-ins”, and then on “Import”. Here, you can import your plug-in (your zip file) into your Kintone environment.
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.