Get Started with Developing Plug-ins

Contents

About Kintone Plug-ins

Kintone plug-ins have a similar effect as JavaScript customizations in that they allow some kind of change to be made to the standard Kintone platform. Compared to standalone customizations, plug-ins require a few more steps to create, such as creating a manifest file and implementing CSS and other design aspects. However, there are a significant number of advantages that outweigh the extra required effort to transform a JavaScript customization into a plug-in.

This article introduces Kintone plug-in development by focusing on its differences and advantages compared with standalone customizations. It will help developers understand when to develop standalone customizations versus plug-ins in the future. To proceed, it will then explain how to set up the environment correctly to ensure the successful start of Kintone plug-in development.

For information on how to develop a Kintone plug-in, refer to the following article:
Plug-in Development Specifications

Advantages of Kintone Plug-ins

This section will introduce some of the advantages of plug-in development with concrete examples.

1: JavaScript and CSS Files Can All Be Applied at Once

Standalone customizations require uploading JavaScript and CSS files one by one, and need to be separated by desktop and mobile use. By using a Kintone plug-in, these files are put together in a plug-in zip file, and therefore, all the files can be applied to an App at once. The image below shows a list of plug-ins that have been imported into a Kintone subdomain.

After importing the plug-in as a zip file, the customization can be applied to each App by simply selecting the plug-in from the App's plug-in settings. On the other hand, it takes time and effort to repeatedly upload JavaScript and CSS files one by one in each App for standalone customizations. Therefore, it is recommended to create a plug-in when the customization can be used in many Apps.

2: Changes Can Easily Be Made in the Settings

The settings page that is created for each Kintone plug-in allows changes to be made easily to the customization. This is convenient when a plug-in is applied to multiple Apps or multiple domains because it allows the settings to be tailored to each individual App. The following example looks at the Conditional Format Plug-in to explain the advantages of using the settings page of plug-ins to make design changes.
For more information, refer to the following article:
Conditional Format Plug-in

This plug-in applies text and background styling to fields that meet requirements that have been specified in the plug-in settings as shown below.

Using the settings page of the Conditional Format plug-in, the field designs can be changed simply by selecting the conditions from drop-down and text input fields, and then choosing the styling to be applied when those conditions are true. If the same customization was applied using a standalone customization file, the code in the file would need to be changed each time a design change was made. This has obvious problems such as requiring the time and energy to change each customization file, as well as the fact that only those who understand the code, such as a developer, will be able to confidently make the change.

On the other hand, by using a plug-in, the specifications of the customization can be made with a GUI settings page, and even non-developer users will be able to change the design.

Therefore, it is also recommended to use plug-ins when there is a high possibility that changes will be made repeatedly, or if it is important that users other than developers will be able to make changes.

3: Batch Application to Multiple Apps and Bulk Upgrading Is Possible

As mentioned in the first advantage of JavaScript and CSS Files Can All Be Applied at Once , Kintone plug-in development is useful when the customization is applicable to multiple Apps. Besides that, plug-ins have the advantage of the ability to be updated in bulk. For example, if a bug occurs in a customization or if a function is added, the customization files must be updated in each App the customization has been applied to. A plug-in that has been imported to Kintone can be updated in one place, and the plug-in is then automatically updated in each App.

4: Sensitive Information Can Be Concealed

The Kintone API is commonly integrated with external services such as Google and AWS. However, because customizations are done with JavaScript, it's quite easy to view important information such as API tokens used in the integration when checking the developer tools in the browser. This poses a great risk in integrating external services with Kintone if sensitive information is used.

As shown above, by using the Google Chrome developer console, the code that is currently running on Kintone is easily accessed.

However, the kintone.plugin.app.setProxyConfig() method can be used in a Kintone plug-in's JavaScript to save important information such as API keys to the Kintone server.
For more details on kintone.plugin.app.setProxyConfig(), refer to the following article:
Plug-in JavaScript API

Therefore, using a Kintone plug-in would be better than a standalone customization in the following cases:

  • Linking with external services
  • Handling important information that should not be shown to others
How to execute external Web APIs using plugins

When developing a plug-in that handles confidential information, the plug-in is designed so that the App Administrator can store the authentication information required to execute the Web API as plug-in configuration settings. There are two types of Kintone JavaScript API for storing plug-in settings. However, when storing confidential information, such as authentication information, use the Proxy Set Config API. When this API is executed, the authentication information passed to the JavaScript API is stored in the proxy server prepared by Kintone.
For more information, refer to the following article:
Proxy Set Config

Use the Plug-in Proxy Request API to execute an external Web API. It sends a request to the proxy server to execute the Web API. The proxy server then executes the Web API using the authentication information stored in it, and the response will be returned to the Kintone plug-in.
For more information, refer to the following article:
Plug-in Proxy Request

Note that the authentication information stored on the proxy server can only be accessed using the JavaScript API, which can be executed on the Plug-in Settings Plug-in Settings page. As the App user does not have access permission to the Plug-in Settings page, they cannot view the authentication information stored on the proxy server.

In this manner, by employing a mechanism that executes external Web APIs through plug-ins makes it possible to execute external Web APIs safely while preventing the leakage of confidential information, such as authentication information.

Set up the Kintone Plug-in Development Environment

Before diving into Kintone plug-in development, ensure the following necessary tools are installed on the development device.

  • Node.js and npm
  • @kintone/plugin-packer
  • @kintone/plugin-uploader

Install Node.js and npm

Node.js is required to run the tools for developing Kintone plug-ins.
npm is a tool for managing packages in Node.js and is used to install JavaScript libraries. npm is installed automatically when installing Node.js.

The Node.js installer can be downloaded from the Node.js Official Site (External link) . Download the latest LTS (Long Term Support) version and follow the instructions in the installer.

After installing Node.js, open the terminal and run the following command. If the version number is displayed, the installation is complete.

1
node --version
information

The convenient tools for Kintone plug-in development update the minimum version of Node.js to match the supported version. Even if Node.js is already installed, updating it to the latest LTS version is recommended.

The minimum version of Node.js required can be found in the README of each tool's GitHub repository.

Install plugin-packer

@kintone/plugin-packer (a.k.a. plugin-packer) is a tool for packaging source code for Kintone plug-ins into Kintone plug-in files.

Install plugin-packer using npm.

1
npm install -g @kintone/plugin-packer

Verify that the installation is complete by running the following command. If the version number is displayed, the installation is complete.

1
kintone-plugin-packer --version

For more information, refer to the following article:
Package Plug-in Files using plugin-packer

Install plugin-uploader

@kintone/plugin-uploader (a.k.a. plugin-uploader) is a tool for uploading Kintone plug-in files to Kintone to keep plug-ins up-to-date.

Install plugin-uploader using npm.

1
npm install -g @kintone/plugin-uploader

Verify that the installation is complete by running the following command. If the version number is displayed, installation is complete.

1
kintone-plugin-uploader --version

The development environment is now ready.

For more information, refer to the following article:
Upload Plug-in Files using plugin-uploader

Finally

As described above, using plug-ins has several advantages over standalone customizations. Kintone plug-ins also have features that are unavailable in standalone customizations, so if the situation calls for a plug-in, try making one.
Follow the step-by-step guides in this section for instructions on how to create plug-ins:
Development Guide

This article has been checked with the October 2024 edition of Kintone.