Add a new table row filled with data

This sample code adds data into a new row of a table, and copies values from other fields in the same App.

Sample Image

addnewrow.gif

Sample Code

// Add a row with data into a table with a button click

(function() {
    'use strict';

    var SPACE = 'buttonspace'; // Element ID of Blank Space field
    var TEXT = 'textfield'; // Field code of text field
    var NUMBER = 'numberfield'; // Field code of number field
    var CHECKBOX = 'checkboxfield'; // Field code of checkbox field

    var TABLE = 'mytable'; // Field code of table field
    var TABLE_TEXT = 'text_in_table'; // Field code of text field in a table
    var TABLE_NUMBER = 'number_in_table'; // Field code of number field a table
    var TABLE_CHECKBOX = 'checkbox_in_table'; // Field code of checkbox field in a table

    var events = ['app.record.create.show', 'app.record.edit.show'];

    kintone.events.on(events, function(event) {
        var record = event.record;
        var elSpace = kintone.app.record.getSpaceElement(SPACE);
        var elButton = document.createElement('button');
        elButton.textContent = 'Add to table';
        elSpace.appendChild(elButton);

        elSpace.addEventListener('click', function() {
            var recordData = kintone.app.record.get();
            var rec = recordData.record;

            // add row with data into table
            var addData = {};
            addData.value = {};
            addData.value[TABLE_TEXT] = {
                "type": "SINGLE_LINE_TEXT",
                "value": rec[TEXT].value
            };
            addData.value[TABLE_NUMBER] = {
                "type": "NUMBER",
                "value": rec[NUMBER].value
            };
            addData.value[TABLE_CHECKBOX] = {
                "type": "CHECK_BOX",
                "value": rec[CHECKBOX].value
            };
            rec[TABLE].value.push(addData);

            // delete values after inserting into table
            rec[TEXT].value = "";
            rec[NUMBER].value = "";
            rec[CHECKBOX].value = [];

            kintone.app.record.set(recordData);
        });
    });
}());

Notes

Make sure to match the Field code of your fields, with the Field code written in the code.
The button will be placed on the Blank Space field of the app. Make sure to match the Element ID of the Blank Space field with the Element ID written in the code.

 

Refer to the Tutorial page, on how to add scripts to your app.

Was this article helpful?
0 out of 0 found this helpful
Comments
  • Avatar
    玲香

    お世話になっております。
    これを参考に以下のように「日付」と「ドロップダウン」を追加したいですが、なかなかうまくできなくて、アドバイス頂ければ幸いです。
    よろしくお願い致します。

    (function() {
    'use strict';

    var SPACE = 'buttonspace';
    var TEXT = 'textfield';
    var NUMBER = 'numberfield';
    var DATE = 'date';
    var DROP_DOWN = 'drop_down';
    var CHECKBOX = 'checkboxfield';

    var TABLE = 'mytable';
    var TABLE_TEXT = 'text_in_table';
    var TABLE_NUMBER = 'number_in_table';
    var TABLE_DATE = 'date_in_table';
    var TABLE_DROP_DOWN = 'drop_down_in_table';
    var TABLE_CHECKBOX = 'checkbox_in_table';

    var events = ['app.record.create.show', 'app.record.edit.show'];

    kintone.events.on(events, function(event) {
    var record = event.record;
    var elSpace = kintone.app.record.getSpaceElement(SPACE);
    var elButton = document.createElement('button');
    elButton.textContent = 'Add to table';
    elSpace.appendChild(elButton);

    elSpace.addEventListener('click', function() {
    var recordData = kintone.app.record.get();
    var rec = recordData.record;

    // add row with data into table データを含む行をテーブルに追加する
    var addData = {};
    addData.value = {};
    addData.value[TABLE_TEXT] = {
    "type": "SINGLE_LINE_TEXT",
    "value": rec[TEXT].value
    };
    addData.value[TABLE_NUMBER] = {
    "type": "NUMBER",
    "value": rec[NUMBER].value
    };
    addData.value[TABLE_DATE] = {
    "type": "DATE",
    "value": rec[DATE].value
    };
    addData.value[TABLE_DROP_DOWN] = {
    "type": "DROP_DOWN",
    "value": rec[DROP_DOWN].value
    };
    addData.value[TABLE_CHECKBOX] = {
    "type": "CHECK_BOX",
    "value": rec[CHECKBOX].value
    };

    kintone.app.record.set(recordData);
    });
    });
    }())

  • Avatar
    kintone developer network team

    Hi there 玲香

    I see you have included Drop-downs and Dates in your sample - great!
    Now, the reason why your code isn't placing data into your table, is because you forgot this line of code:

    rec[TABLE].value.push(addData);

    This line pushes the new data into your record object that contains information about the current record.
    This should be stated before stating kintone.app.record.set(recordData); .

  • Avatar
    玲香


    kintone developer network team

    お世話になっております。
    ご指導ありがとうございます。
    これからもよろしくお願い致します。

  • Avatar
    kintone developer network team

    We hope things have worked out fine :)

  • Avatar
    玲香

    kintone開発者ネットワークチーム

    いつもお世話になっております。
    「Update date」と「Login user」をテーブルのみで追加したいです。
     Update date⇒today
    Login user⇒Login user
    と設定したいですが、再びアドバイスいただけますでしょうか?

    var TABLE_Update date = 'updatedate_in_table';
    var TABLE_Login user = 'Login user_in_table';

    addData.value[TABLE_Update date] = {
    "type": "DATE",
    "value": today
    };

    addData.value[TABLE_Login user] = {
    "type": "USER_SELECT",
    "value": loginuser

  • Avatar
    kintone developer network team

    We are unsure of what error you are getting from the above code, but here are some points to note:

    1) 'Login user' and 'Login user_in_table' are not valid field codes. If you check your field settings in the App, you can see that the field codes have been automatically changed to 'Login_user' and 'Login_ user_in_table' (underscores have replaced the spaces).
    This is because kintone does not allow any spaces or symbols (apart from the underscore) in their field codes.

    2) User fields are arrays (you can place more than one value in user fields)

  • Avatar
    玲香


    (function() {
    'use strict';

    var SPACE = 'buttonspace';
    var TEXT = 'textfield';
    var NUMBER = 'numberfield';

    var TABLE = 'mytable';
    var TABLE_Date = 'Dete_in_table';
    var TABLE_USER_SELECT = 'USER_SELECT_in_table';
    var TABLE_TEXT = 'text_in_table';
    var TABLE_NUMBER = 'number_in_table';

    var events = ['app.record.create.show', 'app.record.edit.show'];

    kintone.events.on(events, function(event) {
    var record = event.record;
    var elSpace = kintone.app.record.getSpaceElement(SPACE);
    var elButton = document.createElement('button');
    elButton.textContent = 'Add to table';
    elSpace.appendChild(elButton);

    elSpace.addEventListener('click', function() {
    var recordData = kintone.app.record.get();
    var rec = recordData.record;

    // データを含む行をテーブルに追加する
    var addData = {};
    addData.value = {};

    addData.value[TABLE_Date] = {
    "type": "DATE",
    "value": (today)
    };

    addData.value[TABLE_USER_SELECT] = {
    "type": "USER_SELECT",
    "value": Login_user
    };

    addData.value[TABLE_TEXT] = {
    "type": "SINGLE_LINE_TEXT",
    "value": rec[TEXT].value
    };
    addData.value[TABLE_NUMBER] = {
    "type": "NUMBER",
    "value": rec[NUMBER].value
    };

    rec[TABLE].value.push(addData);

    kintone.app.record.set(recordData);
    });
    });
    }());

    「Add to table」で追加した場合、Date:today、USER_SELECT:Login_userで自動入力したいですが、動かない状態です。アドバイスよろしくお願い致します。

  • Avatar
    kintone developer network team

    Please could you share the error which is showing up.
    This will save us time debugging.

    Based off the above code:
    1) You have not defined a variable for the date field
    2) You have not defined a variable for the user field
    3) You are defining the value of the table date as "(today)" which is not a valid value
    4) You are defining the value of the the User selection field as "Login_user" which is a variable you have not defined.

    Try debugging after these issues are fixed.

    If for (3), you are looking to get today's date without referencing the date in a date field, you can use a native Date object in JavaScript
    https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date

    Same, for (4), if you need to get a value for the logged-in user, there is a kintone JavaScript method for that, which will return an object with user information.
    kintone.getLoginUser()
    https://developer.kintone.io/hc/en-us/articles/212494428/

Please sign in to leave a comment.