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.

1. Create files for the Kintone plug-in customization.
2. Create a manifest file.
3. Package your files using a packaging tool https://github.com/kintone-samples/plugin-samples/blob/master/package.sh
4. Import the plug-in into your Kintone environment.

Creating each file

First, you’ll need to get the files ready to be packaged.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

css/
  - customize.css //Stylesheet for desktop view
  - config.css //Stylesheet for Plug-in Settings
html/
  - config.html //HTML for Plug-in Settings
image/
  - icon.png //Plug-in Icon
  js/
  - customize.js //App customization for Desktop
  - mobile-customize.js //App customization for Mobile
  - config.js //JavaScript initiated on Plug-in Settings

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.

1
2
3

(function(PLUGIN_ID) {
  kintone.plugin.getConfig(PLUGIN_ID);
})(kintone.$PLUGIN_ID);

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.

“manifest_version”: 1

“version”: 1

“type”:“APP”

“name”: {
  “en”: “sample plug-in”,
  “ja”: “サンプルプラグイン”,
  “zh”: “插件的例子”
}

“description”: {
  “en”: “This is sample plug-in.”,
  “ja”: “これはサンプルプラグインです。”,
  “zh”: “这是插件的例子”
}

“icon”: “image/sample.png”

“homepage_url”: {
  “en”: “https://example.com/en-us/”,
  “ja”: “https://example.com/jp/”,
  “zh”: “https://example.com/cn/"
}

“desktop”: {
  “js”: [
    “js/customize.js”,
    “https://example.com/js/customize.js”
  ],
  “css”: [
    “https://example.com/css/customize.css”,
    “css/customize.css”
  ]
}

“mobile”: {
  “js”: [
    “js/mobile-customize.js”,
    “https://example.com/js/mobile-customize.js”
  ]
}

“config”: {
  “html”: “html/config.html”,
  “js”: [
    “https://example.com/js/config.js”,
    “js/config.js”
  ],
  “css”: [
    “css/config.css”,
    “https://example.com/css/config.css”
    ],
  “required_params”: [“Param1”, “Param2”]
}

Sample Manifest file

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

{
  "manifest_version": 1,
  "version": 1,
  "type": "APP",
  "name": {
    "en": "sample plugin",
    "ja": "サンプルプラグイン",
    "zh": "插件的例子"
  },
  "description": {
    "en": "This is sample plugin.",
    "ja": "これはサンプルプラグインです。",
    "zh": "这是插件的例子"
  },
  "icon": "image/icon.png",
  "homepage_url": {
    "en": "https://example.com/en-us/",
    "jp": "https://example.com/jp/",
    "zh": "https://example.com/cn/"
  },
  "desktop": {
    "js": ["js/customize.js", "https://example.com/js/customize.js"],
    "css": ["https://example.com/css/customize.css", "css/customize.css"]
  },
  "mobile": {
    "js": [
      "js/mobile-customize.js",
      "https://example.com/js/mobile-customize.js"
    ]
  },
  "config": {
    "html": "html/config.html",
    "js": ["https://example.com/js/config.js", "js/config.js"],
    "css": ["css/config.css", "https://example.com/css/config.css"],
    "required_params": ["Param1", "Param2"]
  }
}

Packaging

Layout the created files and the manifest files so that it can be packaged.

Sample layout

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

css/
  - customize.css //Stylesheet for desktop view
  - config.css //Stylesheet for Plug-in Settings
html/
  - config.html //HTML for Plug-in Settings
image/
  - icon.png //Plug-in Icon
js/
  - customize.js //App customization for Desktop
  - mobile-customize.js //App customization for Mobile
  - config.js //JavaScript initiated on Plug-in Settings

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:

1
2

$ pwd
/work/

Move to the directory

Example:

1

$ cd /work/

Run the Packaging tool

Run the packaging tool, and specify the folder with the manifest file as the argument.

Example:

1

$ package.sh /mysftuff/manifest.json

If succeeded, the below folder and files will be created under the folder it was run in.

Example:

1
2
3
4
5

keys/
  - check_plugin.qrhfefwgeehqkanwmjwmhbgecsfgalbf.ppk //Secret key file
plugins/
  - qrhfefwgeehqkanwmjwmhbgecsfgalbf/
  - plugin.zip //Packaged file

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:

1

$ package.sh /mysftuff/manifest.json check_plugin.qrhfefwgeehqkanwmjwmhbgecsfgalbf.ppk

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.