Auto-populate Table Rows

Contents

Overview

This article introduces how to auto-populate Table rows of an App's record.

Sample Image

When the user creates a new record, the Table field is automatically populated with data. The number of rows to be populated and the table values are specified within the code.

Prepare the App

Create an App (External link) with the following fields and settings.

Field Type Field Name Field Code Notes
Table Table Table See the table below for the fields to place inside.

Set the following fields and settings for the Table field.

Field Type Field Name Field Code
Number Number Number
Text Animals Animals

The form should look like the following image:

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 (External link) .

 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

(function() {
  'use strict';

  kintone.events.on('app.record.create.show', function(event) {
    // create rows
    var newRow1 = createValue_('1', 'Cat');
    var newRow2 = createValue_('2', 'Dog');
    var newRow3 = createValue_('3', 'Fish');
    var newRow4 = createValue_('4', 'Turtle');
    var newRow5 = createValue_('5', 'Seal');

    // set values table
    event.record.Table.value = [
      newRow1,
      newRow2,
      newRow3,
      newRow4,
      newRow5
    ];
    return event;
  });

  function createValue_(number, text) {
    return {
      'value': {
        'Number': {
          'type': 'NUMBER',
          'value': number
        },
        'Animals': {
          'type': 'SINGLE_LINE_TEXT',
          'value': text
        }
      }
    };
  }
})();

After saving the settings and clicking on Update App, start to add a new record into the App. The record's Table field should automatically populate with data.