Overview

"Plug-ins" are packaged JavaScript and CSS customizations for Kintone Apps.

Kintone allows users to install plug-ins to expand on functionality via JavaScript. When performing normal JavaScript customizations, it is necessary to update your uploaded JavaScript files when updating the customization. However plug-ins can manage customizations individually via the plug-in settings page.

This article explains more about creating and installing plug-ins.

Steps

1. Create files for the Kintone plug-in customization.
2. Create a manifest file.
3. Package your files using a packaging tool (plug-in packer)
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

The Plugin-packer tool is used to package the customization. Read through the Package Plug-in Files using plugin-packer article for steps on how to use the plug-in packer tool. Move on to the next step once zip file for the plug-in has been created.

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.