Display an alert dialog


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.


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 Program 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 the Supported Web Browsers page of the Kintone Help 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. A list of recommended text editors can be found on the Handy Kintone JavaScript Tips page.

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".






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




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





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




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.



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





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





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.





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




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.



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.



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?
2 out of 2 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!