Quick Start

Contents

Overview

Welcome to the Kintone Developer Program! This is a quick start guide for you to get started on Kintone customization. This article explains how to apply Kintone JavaScript API customizations to your Kintone Apps.

You’ll first learn how to set a default value in a field when a new record is added. This will guide you through some basic usages of Kintone events.

Steps

Step 0 Prerequisites

  • Get a Kintone Developer License

  • Prepare a text editor

    • Pick a text editor of your choice that will help you code in JavaScript

Step 1 Create a Kintone App

In this step, a “Customer Database” App will be created from the Kintone Marketplace.

  1. On the Kintone Portal, click the + button located inside the App widget. Click the plus button

  2. Search for “Customer Database”.

  3. Click “Add This App”. Add the Customer Database

Step 2 Create a JavaScript File

In this step, you’ll create a JavaScript file.

  1. Type the following code into the text editor.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    
    (function() {
    
      // kintone.events.on(event, handler) Register an event handler
      kintone.events.on('app.record.create.show', function(event) {
        // Update the event object to set today's date in the "Notes" field
        var today = new Date();
        var initialNote = (today.getMonth() + 1) + '/' + today.getDate() + '/' + today.getFullYear();
        event.record.notes.value = initialNote;
        // Return the updated event object to apply the changes to the current record
        return event;
      });
    })();
    
  2. Save the file as “sample.js” with UTF-8 encoding. After this JavaScript file is applied to Kintone (Step 3), this code will set a default value in a field when a new record is added.

Step 3 Apply the JavaScript File to Kintone

In this step, you’ll apply the JavaScript file to the Kintone App.

  1. Navigate to the record list page of the “Customer Database” created in Step 1.

  2. Click on the Settings icon on the top right of the record list page.
    App Settings 1

  3. Navigate through to the “App Settings” tab > “Customization and Integration” > “JavaScript and CSS Customization”.
    App Settings 2

  4. Navigate to the “Upload JavaScript for PC” option and click the “Add File” button. Choose and upload the sample.js file created in Step 2.
    App Settings 3

  5. Click the Save button on the tope left of the page.

  6. Click the “Update App” button on the top right of the page. This will apply the JavaScript file to the App to the production environment.

Test Run

Test run the customization.

  1. Navigate to the “Customer Database” App.

  2. Click the + button to start adding a new record.

  3. Check to see if today’s date has been automatically set into the “Notes” field.
    Setting the default value

Debugging

In cases where the test run doesn’t go well, read through the following article for debugging tips.

Setting custom values to fields is a fairly common customization scenario. It’s farily easy to accomplish with the Kintone JavaScript API.

The Kintone Developer Program also provides guides on what other customizations are available, and on how to learn the basic skills needed for customization. The following articles will help you start your Kintone customization journey.