テーブルの値を更新するボタンを作成したいです

レコード詳細画面でテーブルの値を更新するボタンを作成したいです。

まず、テーブルの項目として値更新ボタンを作成したいと考えています。

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

こちらの記事を参考にして、

レコード詳細画面のテーブルの下にスペースフィールドを設け、

ボタンを作成することは出来ました。

 

ですが、テーブルにスペースフィールドを追加することができず

ボタンを追加することができませんでした。

 

また、文字列(1行)をテーブルに追加して、

そちらのテキストボックスに対して指定されているクラス名(control-value-gaia)を指定した

document.getElementsByClassNameした結果で変更しようとしたのですが、

要素をうまく取得してこれないみたいでうまくいきませんでした。

 

更新ボタンをテーブル内に1列追加して、

ボタン表示させるにはどのようにしたらよいでしょうか。

 

そちらとボタンの更新処理もうまくいっておりません。

https://developer.cybozu.io/hc/ja/articles/201941784-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%9B%B4%E6%96%B0-PUT- 

こちらの記事を参考に値の更新を行う処理を下記のように記述しました。

値はユーザー選択と日付の値を更新したいです。

 

ボタンを押した結果ではエラーは返ってこないのですが、どちらの値も更新されないです。

返ってくるrespを見ますとrevisionの値が1ずつ更新されて返ってきます。

 

    // 任意のスペースフィールドにボタンを設置

        var mySpaceFieldButton = document.createElement('button');

        mySpaceFieldButton.id = 'my_space_field_button';

        mySpaceFieldButton.innerText = '更新ボタン';


        mySpaceFieldButton.onclick = function () {

            
            var user = kintone.getLoginUser();



            var body = {

                'app': kintone.app.getId(),

                'id': {レコードのID},

                "record": {

                    {テーブルのフィールドコード}: {

                        "value": [

                            {

                                "id": {行のID},

                                "value": {

                                    "ユーザー選択のフィールドコード": {

                                        "code": user.code,

                                        "name": user.name,

                                    },

                                    {日付のフィールドコード}: {

                                        "value":"2021-08-19"

                                    }    

                                }

                            }

                        ]

                    }

                }

            };

              

            kintone.api(kintone.api.url('/k/v1/record.json', true), 'PUT', body, function(resp) {

                // success

                console.log(resp);

            }, function(error) {

                // error

                console.log(error);

            });

        }

        kintone.app.record.getSpaceElement('my_space_field').appendChild(mySpaceFieldButton);

 

ユーザー選択はcodeとnameを指定し、日付はvalueを指定しています。

どのように処理すれば値が更新されるようになるでしょうか。

 

2点お聞きすることになり、申し訳ありませんが、宜しくお願い致します。

 

フクシマさん

お世話になっております。

> 文字列(1行)をテーブルに追加して、そちらのテキストボックスに対して指定されているクラス名(control-value-gaia)を指定したdocument.getElementsByClassNameした結果で変更しようとしたのですが、要素をうまく取得してこれないみたいでうまくいきませんでした。

こちらについて、可能であればコードをご提示いただければ何かお力になれるかもしれません。
また、コンソール画面にエラーが表示されている場合は、エラーメッセージも教えて頂けるとありがたいです。
https://developer.cybozu.io/hc/ja/articles/207613916

 

> ボタンの更新処理もうまくいっておりません。

気がついた限りですが、ユーザー選択のフィールドの値の指定の仕方に問題がありそうです。
https://developer.cybozu.io/hc/ja/articles/202166330
ユーザー選択についてもvalueプロパティに値を指定する必要があるかと思います。
また、値は配列で指定する必要があるかと思います。
登録や更新時は、nameプロパティは省略してしまってよいかと思います。

// ...
ユーザー選択のフィールドコード: {
  value: [
    {
      code: user.code
    }
  ]
},
// ...

江田様

お世話になっております。

ご回答いただきありがとうございます。

 

こちら、ボタンの生成なのですが、このようなコードを書いております。

var element = document.getElementsByClassName("control-value-content-gaia");

console.log(element);

element[18].innerHTML = "<button type='button' onclick='buttonClick()';>更新</button>"

上記のconsole.logの結果なのですが、このように返ってきております。

こちらの内容をchromeで確認していますと、

18のものをクリックしますとボタンを表示したいテーブルのspanタグを指しています。

 

(このようなテーブルの項目の部分にボタンを表示させようとしています。)

 

ですが、HTMLCollectionの要素は13までしかなく、こちら18を指定すると

Uncaught TypeError: Cannot set property ‘innerHTML’ of undefined

とエラーが返ってきます。

undefinedに対してinnerHTMLのプロパティはないとのことで、18はないようですが、

HTMLCollectionの他のものを見ましても該当のものにあたるものはなさそうなのですが、

どのようにしたらよろしいでしょうか?

 

また、ご指摘いただきましたユーザー選択のフィールドの指定の値を

以下のように変更したのですが、変わらず、項目が更新されません。

 

      var user = kintone.getLoginUser();

            var body = {

                'app': kintone.app.getId(),

                'id': kintone.app.record.getId(),

                "record": {

                    "tableCd": {

                        "value": [

                            {
// テーブルの更新しようとしている列のID
                                "id": event['record']['TableCd']['value'][0]['id'],

                                "value": {

                                    "ユーザー選択のフィールドコード": {

                                        value: [{

                                            "code": user.code,

                                            }

                                        ]

                                    },

                                    // "日付のフィールドコード": {

                                    //     "value":"2021-8-19"

                                    // }    

                                }

                            }

                        ]

                    }

                }

            };

              

            kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body, function(resp) {

                // success

                console.log(resp);

            }, function(error) {

                // error

                console.log(error);

            });

        }

日付は今はコメントアウトしまして、

ユーザー選択だけでも先に更新できないか試しているのですが、

エラーは返ってきませんが、変わらず値は更新されておりません。

何かまだ間違えておりますでしょうか。

何かご気づきの点あればご教授いただけましたら幸いです。

フクシマさん

お世話になっております。

> HTMLCollectionの要素は13までしかなく、こちら18を指定するとUncaught TypeError: Cannot set property ‘innerHTML’ of undefinedとエラーが返ってきます。
'app.record.detail.show’イベント内でdocument.getElementsByClassName(“control-value-content-gaia”)を呼び出していると思いますが、この時点ではまだサブテーブルのDOMの生成が完了していないのかと思います。
MutationObserverでDOMの変更を監視し、サブテーブルのDOMの生成完了後に実行するといった工夫が必要かと思います。
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

 

> ユーザー選択だけでも先に更新できないか試しているのですが、エラーは返ってきませんが、変わらず値は更新されておりません。
console.log(resp)としていると思いますが、こちらはどのように出力されているでしょうか?

江田様

お世話になっております。

 

DOMの生成が完了していなかったんですね…

ありがとうございます。こちらの方法で作成してみようと思います。

 

console.log(resp)の結果は以下のようになっております。

revisionが更新されて返ってきております。

こちら、フィールドの項目の指定方法を間違えているので更新されないのでしょうか。

こちら追記させていただきます。

 

以前のコードが

                 "ユーザー選択のフィールドコード": {
                                        value: [{
                                            "code": user.code,
                                            }
                                        ]
                                    },

とvalueをダブルクォーテーションで囲んでいなかったため、囲むように変更しました。

また、他の項目について変更できるかどうか試してみたところテーブル以外のものの値は更新できました。

以下が、その試したコードでフィールド指定している部分です。

 

var body = {

                'app': kintone.app.getId(),

                'id': kintone.app.record.getId(),

                "record": {

                    "文字列(1行)のフィールドコード": {

                        "value":"更新テスト"

                    },

                    "tableCd": {

                        "value": [

                            {

                                "id": event['record']['TableCd']['value'][0]['id'],

                                "value": {

                                    "ユーザー選択のフィールドコード": {

                                        "value" : [{

                                            "code" : user.code

                                            }

                                        ]

                                    },

                                    "日付のフィールドコード": {

                                        "value":"2021-8-19"

                                    }  

                                }

                            }

                        ]

                    }

                }

            };

 

こちらの指定で文字列1行のテキストボックスの値が更新テストに更新されることは確認しました。

ですが、テーブルの2項目につきまして更新されません。

現在、その2項目とも何も入っていない状態ですが、そのまま何も入っていない状態のままです。

 

フィールドの編集権限がないものかと思いまして、以下のコードを

kintone.events.on(‘app.record.detail.show’, function(event) { の部分に追記しましたがダメでした。

 

event['record']['TableCd']['value'][0]['value']['ユーザ選択のフィールドコード']['disabled'] = false;

event['record']['TableCd']['value'][0]['value']['日付のフィールドコード']['disabled'] = false;

return event;

以上などを更新で試しているのですが、

もし、何かお気づきの点あればお教えください。

宜しくお願い致します。