Overview

This article introduces how to add rows to a table using JavaScript. An Add button is placed inside the record. Clicking the button adds a new row to the end of the table, by pushing data into the end of the table array.

Initial Setup

This section describes building a Kintone App before adding rows to a table.

Create a sample App

First, create a new Kintone App.

Set the fields in the sample App as follows.

Set the fields inside the Table field as follows.

Create sample data

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

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

(() => {
  'use strict';

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

    return event;
  });

  // Function to add a row to the table
  const addRow = () => {
    const record = kintone.app.record.get().record;
    record.contact_list.value.push({
      value: {
        contact_name: {
          value: 'New Contact',
          type: 'SINGLE_LINE_TEXT',
        },
        email_address: {
          value: 'new.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 Edit record. An Add button appears on the Space field.

Click the Add button to add a new row to the end 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('add_contact') retrieves the Space element by its element ID, add_contact. A button labeled Add is created and appended to that element. The addRow function is assigned to the button's onclick event.

1
2
3
4
5

const space = kintone.app.record.getSpaceElement('add_contact');
const addButton = document.createElement('button');
addButton.innerHTML = 'Add';
addButton.onclick = addRow;
space.appendChild(addButton);

Add a Row to the Table

kintone.app.record.get() retrieves the record data.
The Table field is represented as an array, so push() adds a new element to the end of the array. Each field code inside the row requires a type and a value. The Check box value is specified as an array.

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

const record = kintone.app.record.get().record;
record.contact_list.value.push({
  value: {
    contact_name: {
      value: 'New Contact',
      type: 'SINGLE_LINE_TEXT',
    },
    email_address: {
      value: 'new.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 new row of data is added when the Add button is clicked.
To add 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.