レコード編集画面でボタン押下時にサブテーブルの最上部に行を追加

はじめまして。

光澤と申します。

昨日投稿させて頂いたのですが、何故か消えていましたので、

もう一度投稿させていただきます。

 

レコード編集画面で作成したボタン押下時にサブテーブルに行を追加したいです。

下記の記事を参考にさせて頂きました。

https://developer.cybozu.io/hc/ja/articles/201941984

しかし、mySpaceFieldButton.onclick = function () の中に記述すると途端に動かなくなりました。

(クリック時にwindow.alertは動くことは確認しました)

行追加が可能な条件があるのでしょうか?

また行追加時に最上部に行を追加する場合はどのように記述するのでしょうか。

よろしければ、皆様ご教授願います。

 

ソース↓↓↓

 

(function() {
   “use strict”;
    kintone.events.on(‘app.record.create.show’, function(event) {
        var record = event.record;
        record[‘文字列_0’][‘value’] = ‘この文字列で上書き’;
        record[“Table”].value[0].value[‘文字列_1’].value = ‘テーブルの1レコード目を上書き’;
       
        // スペースフィールドにボタンを設置
        var mySpaceFieldButton = document.createElement(“button”);      /*ボタン*/
        mySpaceFieldButton.id = “my_space_field_button”;
        mySpaceFieldButton.innerHTML = “このボタンを押下すると<br>入力した情報が明細一覧に登録されます”;
        mySpaceFieldButton.style.height = “70px”;                       /*ボタンの高さ*/
        mySpaceFieldButton.style.width = “350px”;                       /*ボタンの幅*/
        kintone.app.record.getSpaceElement(“my_space_field”).appendChild(mySpaceFieldButton);
       
        mySpaceFieldButton.onclick = function () {
       
            //サブテーブルの末尾に行を追加する
            var newRow = {
                value: {
                    文字列_1: {
                        type: ‘SINGLE_LINE_TEXT’,
                        value: ‘iiiii’
                    },
                    文字列_2: {
                        type: ‘SINGLE_LINE_TEXT’,
                        value: ‘aaaaa’
                    }
                }
            };
            record[“Table”].value.push(newRow);
        }
       
        return event;
    });
})();

 

光澤 公平さん

 

レコード追加イベントのハンドラーがすでに終わっているのが原因ですね。

return eventがボタンクリックの処理(onclick~~)の前にすでに処理されてしまうので、

フィールドの操作ができていないようです。

その場合、別途eventを返す方法を用いれば、実現可能ですね

▼ レコードに値をセットする

https://developer.cybozu.io/hc/ja/articles/201942014#step4

 

また、テーブルの操作は配列の処理と同じなのでunshiftが利用できます!

https://qiita.com/takeharu/items/d75f96f81ff83680013f

 

(function() {
   “use strict”;
    kintone.events.on(‘app.record.create.show’, function(event) { 
        var record = event.record; 
        record[‘文字列_0’][‘value’] = ‘この文字列で上書き’;
        record[“Table”].value[0].value[‘文字列_1’].value = ‘テーブルの1レコード目を上書き’; 
        
        // スペースフィールドにボタンを設置
        var mySpaceFieldButton = document.createElement(“button”);      /*ボタン*/
        mySpaceFieldButton.id = “my_space_field_button”;
        mySpaceFieldButton.innerHTML = “このボタンを押下すると<br>入力した情報が明細一覧に登録されます”;
        mySpaceFieldButton.style.height = “70px”;                       /*ボタンの高さ*/
        mySpaceFieldButton.style.width = “350px”;                       /*ボタンの幅*/
        kintone.app.record.getSpaceElement(“my_space_field”).appendChild(mySpaceFieldButton);
        
        mySpaceFieldButton.onclick = function () {
        
            //サブテーブルの末尾に行を追加する 
            var newRow = { 
                value: { 
                    文字列_1: { 
                        type: ‘SINGLE_LINE_TEXT’, 
                        value: ‘iiiii’ 
                    },
                    文字列_2: { 
                        type: ‘SINGLE_LINE_TEXT’, 
                        value: ‘aaaaa’ 
                    } 
                }
            };
            record[“Table”].value.unshift(newRow); 

            kintone.app.record.set(event);
        }
        
        return event;
    }); 
})();

 

BB 様

お世話になります。

ソースの手直しまで本当にありがとうございます。実装してみます。

勉強不足ですいませんでした。