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 here: SAMPLE_jsEdit_plugin_v4.5.2.zip (External link)
(the source code for JSEdit is also available on 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

In Kintone, click on the cog wheel in the top banner to access Kintone Administration -> Other -> Plug-ins.
This will open up the Plug-in installation settings. Click on Import, and upload the plug-in zip file.

The plug-in will become available after installation, and will be added to your list of available plug-ins. If this is your first time adding in a plug-in, you will only see the JSEdit plug-in listed in your list.

Once the Kintone Administration settings has installed the plug-in, it can then be used from any app in your Kintone platform. Below, we will go through the steps on using the plug-in with a Kintone app.

Open up the App Settings of a Kintone app of your choice, navigate to the App Settings tab, then to Customization and Integration > Plug-ins. Click on New to add a new plug-in.

A list of available plug-ins for your Kintone app will be displayed - check JSEdit for Kintone and click the Add button. Now, your Kintone app will be ready to use the plug-in. The JSEdit for Kintone plug-in keeps a code editor in its settings page, where you can write scripts and save JavaScript and CSS files.
Proceed to click on the cog wheel under Change Settings to access this code editor.

For more information, refer to the Adding/Deleting Plug-Ins (App Settings) (External link) article on the Kintone Help site.

How to use JSEdit for Kintone

The settings screen will show a page like the below screenshot, with a blank editor displayed. If you already have existing JavaScript files in your app, the contents of the file will be initially displayed in this editor.

Create files

First, you will need to create a file to work on. If you already have existing JS or CSS files in your app, these will be listed in the drop-down menu.
If you don't have any files yet, click the New File button while the first drop-down has JavaScript files for PC selected, to add a new JavaScript file. You can name this whatever you want.

Once created, the editor will show contents of the new JavaScript file - JSEdit will automatically populate it with some sample code.

Edit files

You will be able to edit scripts for your Kintone app in the displayed editor. You can go ahead to delete the sample contents, and write your own scripts. Keywords such as Kintone's methods and API paths will be suggested in the editor while you are coding.
To easily test out a script, a simple example is the sample code in the Count the Number of Rows in Tables article.

Save files

When you click the Save button, your code will be applied to your app. Technically on the back-end, the JavaScript & CSS files created in this plug-in will automatically be uploaded onto the JavaScript & CSS customization settings page.

If the Update app when saving the code is checked (it's checked by default), JSEdit will deploy all settings to the live app whenever you save the code. This means that you do not have to go back to the app settings menu, to click on Update App to have the code start working for your live app. Just click on save, open the app in another browser tab to see any changes (note that deploying the latest settings may take a few seconds to take effect).

Please be aware that all edits made to other settings for the app will also be reflected to the live app when clicking Save.

Load libraries

If you select a library from the library list and click Save, you can load libraries from the Kintone CDN. A wide range of libraries can be used, such as jQuery, Angular JS and Font Awesome.

Update History

Date Update Notes
21 April 2023 ver. 4.5.2
  • Fixed a bug that occurs when the checkbox below JSEdit and the CDN Library were the same and would be registered twice.
  • Added a feature where removing the check from an uploaded JavaScript or CSS also deletes the URL automatically.
15 Sept 2022 ver. 4.5.1
  • Updated to ES6.
26 August 2020 ver. 4.4.0
  • Fixed a bug where text conversions to double-byte characters would not function correctly (this happens to users typing in non-English or non-European languages)
26 November 2019 ver. 4.3.0
  • Fixed a bug where JSEdit overwrites links already specified in the JavaScript / CSS customization settings within an App.
  • Fixed a bug where JSEdit cannot save the settings if a link to a library that is not listed in the JSEdit libraries list is specified in the JavaScript / CSS customization settings within an App.
03 October 2019 ver. 4.2.0
  • Changed the default sample code in newly created JavaScript files
  • Changed the position of the button to create new JavaScript files
  • Prevented the editor from being editable when no file is selected
  • Refactored the code to improve readability

OSS Licenses

The following licenses are being used in this plug-in: