JSEdit Plug-in
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
(the source code for JSEdit is also
available on Github
)
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)
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 |
|
15 Sept 2022 | ver. 4.5.1 |
|
26 August 2020 | ver. 4.4.0 |
|
26 November 2019 | ver. 4.3.0 |
|
03 October 2019 | ver. 4.2.0 |
|
OSS Licenses
The following licenses are being used in this plug-in:
-
Ace
- Author: Fabian Jakobs
- License:
The 3-Clause BSD License
-
jQuery
- Author: jQuery Foundation, Inc.
- License:
MIT License
-
kintone UI Component
- Author: Cybozu, Inc.
- License:
MIT License