JSEdit

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.

jsedit_animation.gif

Download JSEdit

Download the plug-in from here: jsEdit_plugin.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.

jsedit1.PNG


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.

jsedit2.PNG


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, and navigate to "Plug-ins" under "Customization and Integration", and click on "New".

jsedit3a.png


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.

 

jsedit4.PNG

 

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.

jsedit5.PNG

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.

jsedit6.PNG


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.
If you would like to test out some scripts, go ahead to use the sample code in this article.

jsedit7.PNG

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 Moment.js.

 

Was this article helpful?
0 out of 0 found this helpful
Comments
  • Avatar
    sergey grish

    Download link seems to be broken:

    BlobNotFoundThe specified blob does not exist.
    RequestId:a29283e9-001e-001f-3a8b-2dbfce000000
    Time:2017-09-14T18:56:20.2036003Z

  • Avatar
    kintone developer network team

    Thanks Sergey! It's fixed now.

Please sign in to leave a comment.