JSEdit Plug-in

Contents

Introduction

This article introduces how to use the JSEdit plug-in, a Kintone plug-in that allows users to edit JavaScript and CSS codes easily on the Kintone platform.

Download JSEdit

Download the plug-in from the following file URL:
SAMPLE_jsEdit_plugin_v4.5.2.zip (External link)
The source code for JSEdit is also available on GitHub. For more information, refer to the following link:
JSEdit for kintone Plug-in (GitHub) (External link)

As with all Kintone plug-ins, there is no need to unzip the downloaded plug-in file.

Installation of JSEdit to Kintone

Installing the Plug-in to Kintone

  1. In Kintone, click on the gear icon in the top banner to access Kintone Administration > Other > Plug-ins.

  2. Click Import, and upload the plug-in zip file.

  3. After installation, the plug-in appears in the list of available plug-ins.

Adding the Plug-in to an App

  1. Open the App Settings of a Kintone App, and navigate to Customization and Integration > Plug-ins.

  2. Click New to add a new plug-in.

  3. Check JSEdit for Kintone from the list of available plug-ins, and click the Add button.

  4. Click the gear icon under Change Settings to open the code editor.

For more details on adding plug-ins to an App, refer to the following article on the Kintone Help site:
Adding/Deleting Plug-ins (App settings) (External link)

How to use JSEdit for Kintone

The settings screen displays a blank editor. If existing JavaScript files are already applied to the App, the contents of those files are initially displayed.

Creating Files

  1. Confirm that the first drop-down has JavaScript files for PC selected.

  2. Click the New File button to add a new JavaScript file.

  3. Enter a file name in the prompt.

  4. The editor displays the new file with automatically populated sample code.

If existing JS or CSS files are already applied to the App, they are listed in the drop-down menu.

Editing Files

  1. Select a file from the drop-down menu.

  2. Edit the script in the editor. Keywords such as Kintone methods and API paths are suggested while coding.

To quickly test a script, try using the sample code from the following article:
Count the Number of Rows in Tables

Saving Files

  1. Click the Save button to apply the code to the App.

  2. The JavaScript and CSS files created in the plug-in are automatically uploaded to the JavaScript / CSS Customization settings page.

If the Update app when saving the code checkbox is checked (it is checked by default), JSEdit deploys all settings to the live App whenever the code is saved. This means there is no need to navigate back to the App Settings menu and click Update App separately. Simply save, then open the App in another browser tab to see the changes. Deploying the latest settings may take a few seconds to take effect.

Note that all other pending settings changes for the App are also deployed when clicking Save.

Loading Libraries

  1. Select a library from the library list.

  2. Click Save to load the library from the Kintone CDN. For more information, refer to the following link:
    Kintone CDN

A wide range of libraries can be loaded, such as jQuery, Angular JS, and Font Awesome.

OSS Licenses

The following licenses are used in this plug-in.