Overview

This article introduces how to update rows of a table using JavaScript. An Update button is placed inside the record. Clicking the button overwrites the first row of the table by replacing the data.

Initial Setup

This section describes building a Kintone App before updating rows in a table.

Create a sample App

First, create a new Kintone App.

Alternatively, the sample App made in the Dynamically Add Rows to Tables article can be reused. In this case, make sure to update the Blank space field.

Set the fields in the sample App as follows.

Set the fields inside the Table field as follows.

The form should look like the following screenshot.

Create sample data

Next, add a record, and enter three rows of sample data into the table as shown below:

If the App from the previous article is reused, the existing record can be used as is.

Sample Code

Prepare the following JavaScript code in a text editor, and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the JavaScript and CSS Customization settings .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

(() => {
  'use strict';

  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
    // Place the Update button in the Space field
    const space = kintone.app.record.getSpaceElement('update_contact');
    const updateButton = document.createElement('button');
    updateButton.innerHTML = 'Update';
    updateButton.onclick = updateRow;
    space.appendChild(updateButton);

    return event;
  });

  // Function to update the first row of the table
  const updateRow = () => {
    const record = kintone.app.record.get().record;
    const time = new Date().toLocaleTimeString();
    record.contact_list.value[0] = {
      value: {
        contact_name: {
          value: `Updated Contact at ${time}`,
          type: 'SINGLE_LINE_TEXT',
        },
        email_address: {
          value: 'updated.contact@example.com',
          type: 'LINK',
        },
        mailing_list: {
          value: ['Newsletter'],
          type: 'CHECK_BOX',
        }
      }
    };
    kintone.app.record.set({record: record});
  };
})();

Save the settings and click Update App. Open a record and click the Edit record icon. An Update button appears on the Space field.

Click the Update button to overwrite the first row of the "Contact List" field.

Code Explanation

This section explains the sample code above.

Create a Button in the Space Field

The app.record.create.show and app.record.edit.show events run when the Add record screen or Edit record screen is displayed. kintone.app.record.getSpaceElement('update_contact') retrieves the Space element by its element ID, update_contact. A button labeled Update is created and appended to that element. The updateRow function is assigned to the button's onclick event.

1
2
3
4
5

const space = kintone.app.record.getSpaceElement('update_contact');
const updateButton = document.createElement('button');
updateButton.innerHTML = 'Update';
updateButton.onclick = updateRow;
space.appendChild(updateButton);

Update a Row in the Table

kintone.app.record.get() retrieves the record data.
The Table field is represented as an array, so the first row is the element at index 0. Assigning a new object to that index replaces the entire field data of the row. Each field code inside the row requires a type and a value. The Check box value is specified as an array.

The values written into the row are fixed values that are hard-coded in the JavaScript code. new Date().toLocaleTimeString() returns the current local time, so the Contact Name value differs on every click.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

const record = kintone.app.record.get().record;
const time = new Date().toLocaleTimeString();
record.contact_list.value[0] = {
  value: {
    contact_name: {
      value: `Updated Contact at ${time}`,
      type: 'SINGLE_LINE_TEXT',
    },
    email_address: {
      value: 'updated.contact@example.com',
      type: 'LINK',
    },
    mailing_list: {
      value: ['Newsletter'],
      type: 'CHECK_BOX',
    }
  }
};

Finally, kintone.app.record.set() reflects the updated record data on the screen.

1

kintone.app.record.set({record: record});

Notes

The row is updated when the Update button is clicked.
To update a row when the record is saved instead, use a different approach. Edit the table data in the record object passed to the app.record.create.submit.success or app.record.edit.submit.success event, and return the event object. The edited table data is then reflected in the record.

Related Articles

• Tables and the Nested Data Structure
• Dynamically Add Rows to Tables