JavaScript Tutorial 4

What are Event objects?

In the previous tutorial, the term "Event object" cropped up every now and again.
What is an Event object?


In Kintone, an Event object refers to an object filled with record data, related to the Kintone event that the JavaScript customization is using. Event objects usually contain field values of the record(s) listed on the page, but may contain additional information depending on what event you are using.

Let's look through some examples of event objects in different events.

Record Edit: Onload Event (app.record.edit.show) example

Details for this event can be found here.
Upload this JavaScript code to your App to display the contents of the Event object into the browser's console:

This event is triggered when the user edits a record.


Let's see what the contents of the Event object look like for this event.

 

JStutorial_editshowobject.png

 

We can see here that the "appId", "record" and "recordId" properties are included in the Event object.
The values inside "appId" and "recordId" are the IDs of the App and Record the event is triggered on.
"record" is an object containing the various field data of the current record.


Let's take a look inside the record object.

JStutorial_editshowobject.gif

 

The keys listed show the various fields that exist inside the App (the key names are the field codes of those fields, rather than the field names), and also includes $revision, which is the number of times the record has been updated. Clicking through the keys in the console shows the field types and field values that these fields hold.

Record Create: Onload Event (app.record.create.show) example

Details for this event can be found here.
Upload this JavaScript code to your App to display the contents of the Event object into the browser's console:

This event is triggered when the user opens the record create page, for example, after clicking on the + button to fill in new information of a new record for the App. Although the page for filling in a new record and the page for editing an existing record look similar on the GUI, the event object contains different information.

 

JStutorial_createshowobject.png

 

We can see here that the "appId", "record" and "reuse" are included in the Event object. Notice the difference with the previous example?


First of all, "recordId" is not included this time in the Event object. This makes sense since "recordId" holds data of the Record ID. This record technically has not been created yet, thus has no Record ID allocated to it yet.
Next, is the existence of the "reuse" property. "reuse" holds a Boolean value, and only holds "true" if the record was created by clicking the "Duplicate" button in a record.

duplicaterecord.png

 

The "record" object, like before, contains field information of the record. You may notice many of the field values will show up as "undefined". This is because we are on the page for creating a new record, and no field values have been set yet for the record.There are exceptions though, such as fields that hold pre-defined values which may either be set in the settings, or may be set automatically (such as the Created Datetime field).


JStutorial_createshowobject.gif

Record List: Onload Event (app.record.index.show) example

Details for this event can be found here.
Upload this JavaScript code to your App to display the contents of the Event object into the browser's console:

This event is triggered when the Record List page is displayed. Let's see the Event object for this page.

 

JStutorial_indexshow.png

 

There are many properties in this Event object- "appId", "date", "offset", "records", "size", "viewId", "viewName" and "viewType".
Notice how previously we had a "record" property, but this time we have a "records" property. You may have guessed, but this "records" property contains a list of record objects, that contain record data of each record shown in the record list.

 

JStutorial_indexshow.gif

 

The new properties that are listed are unique to the list view. "viewName" shows the name given to the View when it was created, whereas "viewName" gives the unique ID of the view (which you can also find in the URL of the view). "size" shows the number of records listed on the page, and "offset" shows which page of the record list is being shown (if you have more than 100 records in your App, only the first 100 records will be shown - a pagination icon will appear, that takes you to the next set of records, which changes the "offset" value). Last of all, "viewType" tells us if this record list is a List view or a Calendar view, and the "date" shows which month is being shown if it's showing the Calendar view.

Finally

The contents of the Event object may be different depending on the Kintone event that you are using. Although a lot of details were listed in this article, the explanation of the contents of each object can be found in the corresponding documentation of the Events.

We hope this article has made things clearer about the Event object!

 

 

 

<<< Go back to JavaScript Tutorial 3

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!