# ボタン押下で、サブテーブルの値を同レコード内のサブテーブルに反映したい(kintone)

**URL:** <https://community.cybozu.dev/t/topic/139>\
**Category:** kintone 開発相談\
**Created:** [2022 年 10 月 5 日午前 9:26 UTC](https://community.cybozu.dev/t/topic/139 "2022-10-05T09:26:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2984](https://avatars.discourse-cdn.com/v4/letter/l/ecb155/32.png) [@Legacy\_Account2984](https://community.cybozu.dev/u/Legacy_Account2984)\
**Post date:** [2022 年 10 月 5 日午前 9:26 UTC](https://community.cybozu.dev/t/topic/139/1 "2022-10-05T09:26:26Z")

</div>

JavaScript未経験者です。

度々の投稿を失礼いたします。

当サイトで類似の質問をいくつか拝見したのですが、解決せず、お知恵をお借りしたく思います。

レコードの新規登録、または編集時に、画面内にボタンを2つ配置し、

ボタン①チェック状態をコピー&ペースト

ボタン②サブテーブルをコピー&ペースト

という挙動をさせたいです。

レコードの保存時イベントではなく、編集中に任意で押下するボタンとしたく作成しています。

コピー元、ペースト先は、フィールドコードのみ相違する、全く同じ構造のフィールドです。

&nbsp;

①ボタン①チェック状態をコピー&ペースト

→ボタン配置、押下時のコピー&ペーストも成功

ボタン②サブテーブルをコピー&ペースト

→ボタン配置のみ成功、 **押下時のコピー&ペーストができない**

&nbsp;

・2つの処理を1つのファイルに書く方法が間違っている

・サブテーブルの取り扱いが間違っている

上記いずれか、または両方かと思いますが、具体的な修正方法がわからず、手が止まってしまいました。

下記にコードを記載しますので、誤っている部分をご指摘いただけないでしょうか。

※コードブロックに貼り付けまたはプレーンテキストとして貼り付けをしてもなぜか平文になってしまうため、見づらく、申し訳ございません。

&nbsp;

よろしくお願いいたします。

&nbsp;

(function() {  
&nbsp;“use strict”;  
&nbsp;kintone.events.on([‘app.record.edit.show’, ‘app.record.create.show’], function(event) {  
&nbsp;var mySpaceFieldButton = document.createElement(‘button’);  
&nbsp;mySpaceFieldButton.id = ‘copy\_button\_Chekc’;  
&nbsp;mySpaceFieldButton.innerHTML = ‘チェック状態を反映’;  
&nbsp;  
&nbsp;var mySpaceFieldButton2 = document.createElement(‘button’);  
&nbsp;mySpaceFieldButton2.id = ‘copy\_button\_subTable’;  
&nbsp;mySpaceFieldButton2.innerHTML = ‘サブテーブルを反映’;&nbsp;  
&nbsp;  
&nbsp;mySpaceFieldButton.onclick = function() {

var fieldValue1 = ‘’;  
var fieldValue2 = ‘’;

&nbsp;var rec = kintone.app.record.get();  
&nbsp;if (rec) {  
&nbsp;fieldValue1 = rec.record.チェックボックスA.value;  
&nbsp; fieldValue2 = rec.record.チェックボックスB.value;  
&nbsp;}  
&nbsp;rec.record.チェックボックスAA.value = fieldValue1;  
&nbsp; rec.record.チェックボックスBB.value = fieldValue2;

&nbsp;kintone.app.record.set(rec);  
}

// mySpaceFieldButton2.onclick = function() {

// var rec2 = kintone.app.record.get();  
// if (rec2) {  
// var table = record[‘サブテーブルA’].value;  
// }  
// rec2.record.[‘サブテーブルB’].value = table;  
&nbsp; &nbsp;&nbsp;  
// kintone.app.record.set(rec2);  
//}  
&nbsp;kintone.app.record.getSpaceElement(‘btn\_Check’).appendChild(mySpaceFieldButton);  
&nbsp;kintone.app.record.getSpaceElement(‘button\_subTable’).appendChild(mySpaceFieldButton2);

&nbsp;});  
})();

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2534](https://avatars.discourse-cdn.com/v4/letter/l/e9a140/32.png) [@Legacy\_Account2534](https://community.cybozu.dev/u/Legacy_Account2534)\
**Post date:** [2022 年 10 月 5 日午後 11:42 UTC](https://community.cybozu.dev/t/topic/139/2 "2022-10-05T23:42:14Z")

</div>

田中千穂さん

> ・2つの処理を1つのファイルに書く方法が間違っている  
> ・サブテーブルの取り扱いが間違っている

こちら原因は2番目になります。サブテーブルに含まれるフィールド名は異なるので、チェックボックスと同じようにコピーする必要があります。

```
record['サブテーブルA'].value[0].value['フィールドA'].value = record['サブテーブルB'].value[0].value['フィールドB'].value;

```

また、元のコードに不具合がありましたので修正箇所をお知らせします。

**修正前**

```
mySpaceFieldButton2.onclick = function () {
  var rec2 = kintone.app.record.get();
  if (rec2) {
    var table = record['サブテーブルA'].value;
  }
rec2.record.['サブテーブルB'].value = table;

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

```

**修正後**

```
mySpaceFieldButton2.onclick = function () {
var rec2 = kintone.app.record.get();
var table = rec2.record['サブテーブルA'].value;
rec2.record['サブテーブルB'].value = copyTable(table); // TODO: copyTable 関数を実装

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

```

以上になります。ご不明な点がありましたら。気兼ねなくご質問ください。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1177](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@Legacy\_Account1177](https://community.cybozu.dev/u/Legacy_Account1177)\
**Post date:** [2022 年 10 月 5 日午後 11:54 UTC](https://community.cybozu.dev/t/topic/139/3 "2022-10-05T23:54:02Z")

</div>

追記）入力中に他の方がコメントされていたので、以下は読まなくて問題ありません。

&nbsp;

最初にコードの補足を3か所ほどしますが、

```
if (rec2) {
var table = record['サブテーブルA'].value;
}

```

→ 「rec2.record[‘サブテーブルA’].value」と記載する必要があります。

```
rec2.record.['サブテーブルB'].value = table;

```

→ 「rec2.record[‘サブテーブルB’].value…」と記載する必要があり、ドット記法（record.サブテーブルB.value）またはブラケット記法（record[‘サブテーブルB’][‘value’]）どちらかのみを使用し、両方を使用すると構文エラーになります。

```
kintone.app.record.getSpaceElement('button_subTable').appendChild(mySpaceFieldButton2);

});
})();

```

→ボタン設置後に「return event」をする必要があります。このコード自体は問題なく実行しますが、他のコード（同じイベントを使用してレコード内を操作するもの）が動作しなくなる可能性があります（function(event)で始めたものはreturn eventをすると覚えて問題ありません）。

また、コードブロックの投稿についてですが、入力欄上のツールバーの中にコードブロックへの変換（[\>\_]）があります。

&nbsp;

質問への回答ですが、サブテーブルの取り扱いに問題があります。  
サブテーブル内にもそれぞれフィールドがあり、これらは違うフィールドコードになる（サブテーブルAの文字列のフィールドコード≠サブテーブルBの文字列のフィールドコード）ので、そのままイコールで代入しようとするとエラーになります。

以下のような処理で可能です。サブテーブルAのフィールドコードと、サブテーブルBのフィールドコードを列分記載して下さい。

```
(() => {
  'use strict';

  let subTableColumns = {
  'サブテーブルAのフィールドコード': 'サブテーブルBのフィールドコード',
  'サブテーブルAのフィールドコード': 'サブテーブルBのフィールドコード',
  'サブテーブルAのフィールドコード': 'サブテーブルBのフィールドコード',
  'サブテーブルAのフィールドコード': 'サブテーブルBのフィールドコード',
  'サブテーブルAのフィールドコード': 'サブテーブルBのフィールドコード'
  // ...他に列があれば同じように記載
}; // 左にサブテーブルAのフィールドコード、右にサブテーブルBのフィールドコード

  kintone.events.on([
  'app.record.create.show', 'app.record.edit.show'
], (event) => {
  let checkCopyButton = document.createElement('button');
  let subTableCopyButton = document.createElement('button');

    checkCopyButton.innerHTML = 'チェック状態を反映';
  subTableCopyButton.innerHTML = 'サブテーブルを反映';

  checkCopyButton.onclick = () => {
      let recordData = kintone.app.record.get(), rec = recordData.record;

      rec['チェックボックスAA'].value = rec['チェックボックスA'].value;
    rec['チェックボックスBB'].value = rec['チェックボックスB'].value;

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

    subTableCopyButton.onclick = () => {
    let recordData = kintone.app.record.get(), rec = recordData.record;

      rec['サブテーブルB'].value = rec['サブテーブルA'].value.map((row) => {
      let addRow = {
        value: {}
      };

        Object.keys(subTableColumns).forEach((column) => {
        addRow.value[subTableColumns[column]] = {
          type: row.value[column].type,
          value: row.value[column].value
        };
      });

        return addRow;
    });

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

    kintone.app.record.getSpaceElement('btn_Check').appendChild(checkCopyButton);
  kintone.app.record.getSpaceElement('button_subTable').appendChild(subTableCopyButton);

    return event;
});
})();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2984](https://avatars.discourse-cdn.com/v4/letter/l/ecb155/32.png) [@Legacy\_Account2984](https://community.cybozu.dev/u/Legacy_Account2984)\
**Post date:** [2022 年 10 月 6 日午前 3:41 UTC](https://community.cybozu.dev/t/topic/139/4 "2022-10-06T03:41:02Z")

</div>

川村 様

mls-hashimoto 様

&nbsp;

お世話になっております。ご回答、誠にありがとうございます。

今回、今後のことも考えて、両サブテーブルのフィールドコードを予め明記するような

mls-hashimoto 様の案にて修正させていただきました。

&nbsp;

無事、希望通りの実装をすることができました。

文法、テーブル内のフィールドコードという観点、勉強になりました。

&nbsp;

お二方、この度は、ありがとうございました。

(mls-hashimoto 様 いつも、ありがとうございます。)

&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 6 月 6 日午前 1:00 UTC](https://community.cybozu.dev/t/topic/139/5 "2024-06-06T01:00:44Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。