Introduction
This article introduces how to retrieve data from a table in the record details view using JavaScript.
Preparing the App
First, prepare an App with a table inside.
For information on how to create tables, check the How to Create a Table page of the Kintone Help.
The App in this example has the fields below. Make sure to also set the Field Code of each field in their field options.
| Field Type | Field Name | Field Code |
|---|---|---|
| Date | Date | Date |
| Table | - | order_items |
| Blank Space | - | sub_total_area |
| Created Datetime | Created Datetime | Created_Datetime |
| Updated Datetime | Updated Datetime | Updated_Datetime |
The table (with a field code of order_items) listed above, is structured as below:
| Field Type | Field Name | Field Code |
|---|---|---|
| Radio button | Category | Category |
| Single-Line Text | Product Name | Product_Name |
| Number | Unit Price($) | Unit_Price |
| Number | Amount | Amount |
Getting data from the table
First, place some data in the record. Here's an example:
As with getting any other record data, table data can be retrieved by specifying the field code of the table in the event object, when an event is triggered. This would look something like this:
The data format of a table is as follows, taken from the Field Types page.
As an example, retrieve the product name listed in the second row of the table.
Note that the table data is in an array, and that arrays start from 0. To specify the second row, specify array 1.
When the script is run, the alert dialog is displayed before the table data. This is because the app.record.detail.show event runs before tables are displayed, and the alert dialog stops the page until the dialog is confirmed. This isn't a problem for this tutorial, but may be something to keep in mind for future customizations.
Calculating table data
Calculations can now be performed with the data retrieved from the table.
For example, here is a script to work out the total earnings per category and to display the total into the Space field:
Finally
In this article, the final output is displayed on a Space field, so the data was not saved onto the record itself. To insert the calculations into a number or text field (so the data will be saved onto Kintone), use the app.record.create.submit and app.record.edit.submit events and overwrite data of the event object instead of using the app.record.detail.show event.
Check the API documents for these events for an explanation on how to do so.