JavaScript Tutorial 1

Introduction

This article is a start of a series of articles that go through the basic steps of customizing kintone Apps with JavaScript.

If you are new to kintone, you're on the right page - we will guide you step by step on getting your kintone environment ready, creating a kintone App, and enabling a JavaScript file to run on your App that displays the string "Hello kintone".

Prepare your environment

Prepare the following environments before you start the customization.

kintone

You can either apply for a free trial of kintone on the kintone website or apply for a free kintone developer license (you must sign up as a kintone developer network member to apply for a developer license).

A Web Browser

kintone is accessed through a web browser.
Use any of the desktop browsers listed on this page for this tutorial.

A Text Editor

You will be writing scripts in your local text editor, and will be uploading them to kintone for them to run. These are some text editors that we recommend.

Create a kintone App

Create an App from the Marketplace

First you will need a kintone App that you can work on, with some data inside.
Follow these steps to add an App to kintone.

 

Step 1. Log in to kintone

If you have a kintone environment (a free trial, a payed plan or a developer license), you should have a unique kintone URL that you can access. Log in with your credentials, and click on "kintone".

 

US_1.PNG

US_2.PNG

 

 

Step 2. On the portal, click the + icon or on [Create App] to create a new kintone App

 

US_3.png

 

Step 3. Choose the "To do" App and click on "Add this App"

 

US_5.PNG

 

 

Step 4. Click [Add] when the confirmation dialog appears
The "To do" App should show up on the portal.

 

US_6.png

US_7.png

Add data to your App

Click the App you just added to access the list view of the App. As there is no data yet in the App, your list will be blank. Add data to your "To do" App by clicking the + icon. A line of data (a record) will be added each time you click Save. Go ahead to add several records to the App.


US_addrecord.PNG

 

Run your script

Now that you've created your kintone App and added some data, you're now ready to test out some JavaScript customization.

Follow these steps to have scripts run on your App.

Step 1. Prepare a JavaScript file

Copy the below code into a text editor, and save it with the name "sample_customize.js" (or any name as long as it's saved as a .js file), with utf-8 encoding.

 

Step 2. Click on the App's cog wheel to open up the App Settings

 

US_8.png

 

 

Step 3. Click on the [App Settings] tab and click on [JavaScript and CSS Customization]

 

US_9.png

 

 

Step 4. Click [Add File] under [Upload JavaScript file for PC] and upload the JavaScript file that you just made (sample_customize.js)
After uploading the file, click the [Save] button.

 

US_10.png

 

 

Step 5. Click on [Update App] and then on [OK].

US_11.png

 

 

Step 6. Check that an alert dialog has appeared.
If an alert dialog has not appeared, and you can see a list of your records, you may have made an error somewhere. Go back to check your code for any open brackets or spelling mistakes.

US_12.PNG

 

The JavaScript code written here is a simple code that displays an alert dialog. You'll find that this dialog will pop up on whatever page you go to, as long as it's within the same kintone App (e.g. when you open a record details page, or when you add a new record). The script will not run if you access other Apps, or access the App Settings page.

 

Finally

Did your script run successfully?
If so, you're ready to go to the next tutorial.

The next tutorial will go through how to use kintone APIs.

 

 

 

Go to JavaScript Tutorial 2 >>>

Was this article helpful?
0 out of 0 found this helpful
Comments
Please sign in to leave a comment.