JavaScript Tutorial 3

Other kintone Events

In the previous tutorial, we used a code example that uses an event that triggers when the Record List page loads.
There are a number of other events that exist on kintone, that trigger on different pages, and on different user actions.

  • Record List Events
    These events are related to pages that show the App's record list.
    Events can trigger when the page loads, an inline edit starts, an inline edit save button is clicked, an inline edit save succeeds, a field value changes and a record is deleted.

  • Record Details Events
    These events are related to pages that show the record details of one record of an App.
    Events can trigger when the page loads, a record is deleted, and a process management status is proceeded.

  • Record Create Events
    These events are related to pages that show up when the + button or the duplicate button is clicked to add a new record.
    Events can trigger when the page loads, a record save button is clicked, a record save succeeds and a field value changes.

  • Record Edit Events
    These events are related to pages that show up when the edit button is clicked.
    Events can trigger when the page loads, a record save button is clicked, a record save succeeds and a field value changes.
  • Graph Display Events
    These events are related to pages that show up when a Graph is selected.
    Events can trigger when the page loads.

  • Record Print Events
    These events are related to pages that show up when the print button is clicked.
    Events can trigger when the page loads.

Code Example

Using an event for the Record Details page

First, here's an example for using an event for the Record Details page.

Step 1. In your App's settings, change the field code of your "Due date" field to "duedate".

Step 2. Open the "sample_customize.js" file you were working on in the previous tutorial.

Step 3. Overwrite the current code with the below code, and save your file.

Step 4. Go to the JavaScript and CSS customization settings, delete the previous file that was uploaded, and upload the new file. Save the settings and apply the changes.

Step 5. Click on the blue icon of one of your records to bring up the record details page, and check that an alert dialog pops up.

US_14.PNG

Using multiple events


For the next example, we'll also add in an event for the Record Edit page.

Step 1. Open the "sample_customize.js" file you were working on.

Step 2. Overwrite the current code with the below code, and save your file.

Step 3. Go to the JavaScript and CSS customization settings, delete the previous file that was uploaded, and upload the new file. Save the settings and apply the changes.

Step 4. Open an existing record, edit it and then save the record to view the effects of the script.

jstutorial3.gif

Code Explanation

The app.record.detail.show event runs when the record details page loads. The handler proceeds to retrieve the date value from the event object, which is stored in event.record.duedate.value.

The app.record.edit.submit.success event runs when a record is successfully saved after editing (note that this event does not run when saving a new record - for new records, use the app.record.create.submit.success event).

We can see in the image below, that after confirming the alert dialog for the app.record.edit.submit.success event, an alert dialog appears for the app.record.detail.show event, because the record details page loads after saving a record.

Finally

This article went through executing two different functions for two different kintone events. There are many other events that can be used on kintone, with some being able to execute other functions such as disabling fields and displaying errors.

If you are unsure if kintone supports an event you are looking for, try posting your queries on online community forums:

 

 

 

<<< Go back to JavaScript Tutorial 2

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