サブテーブル 追加、削除ボタン1行目以外非表示

サブテーブル追加時に下にではなく、上に追加して最新データが上にくるようにしたいと考えております。 上に追加するのは、1行目を空にして1行目の追加、削除ボタンで追加するようにしたのですが、間違えないように2行目のボタンを非表示したいです。https://developer.cybozu.io/hc/ja/community/posts/115010418386こちらを参考にしたのですが1行目からボタンが非表示になり色々変更したのですが上手くいかなかったのでご教授頂けませんか?

以下のような形で可能かと思います。常に1行目を先頭にするように、とのことで、行追加時に1行目の内容を2行目にコピーし1行目を空白にする処理を追加しています。不要であれば下の部分は削除して下さい。

4行目にサブテーブルのフィールドコード、5行目にサブテーブルに割り振られている番号(Chromeであればサブテーブル上で右クリックから「検証」を選択すると「subtable-xxxxxxx」と記載されています)を指定して下さい。

また、あくまでもkintone仕様外のDOM操作であることには注意して下さい。

(function() {
  'use strict';

  let tableField = 'テーブル' // サブテーブルのフィールドコード
  let tableElement = 'subtable-xxxxxxx' // サブテーブルに振られている番号

  kintone.events.on([
    'app.record.create.show', 'app.record.edit.show',
  'app.record.create.change.' + tableField, 'app.record.edit.change.' + tableField
  ], (event) => {
    let record = event.record;

    // 2行目以降のボタンを非表示にする
    [...document.getElementsByClassName(tableElement)[0].getElementsByClassName('subtable-operation-gaia')].forEach((td, index) => {
      if (index > 1) {
        td.style.display = 'none';
      } else {
        td.style.display = 'table-cell';
      }
    });

    // 2行目に1行目の内容をコピー
    if (event.changes?.row) {
      let secondRowValue = record[tableField].value[1].value;

      record[tableField].value[1].value = record[tableField].value[0].value;
      record[tableField].value[0].value = secondRowValue;
    }

    return event;
  });
})();

ご返信有り難うございます。
凄いですね。私が思っていたよりももっと上の方法を提示して頂いて有り難うございます。
もし宜しければ、2行目を1行目にコピーする際、一部テーブル内の別フィールドに変更したいのとコピーせずに空白のままにしたいフィールドがあるのですが、それは可能でしょうか?

2行目 A B D E
1行目 A B C D E
こんな形でBフィールドはテーブル追加時にCフィールドにコピーされBフィールドは空白にしたいと思っております。
宜しくお願い致します

Hiroさま

以下のような形で可能です。が、認識の相違があってはいけないので、行追加時(2行目が差し込まれる形で追加された時)に1行目にあった内容を2行目にコピーして1行目を空白にする、という処理のつもりでしたが間違いないでしょうか。

6行目以降のparallelFieldsに「2行目にコピーされるフィールド」を左側「1行目のコピーするフィールド」を右側に必要分だけ記載して下さい(左側に記載されていないフィールドは空白になります)。

(function() {
  'use strict';

  let tableField = 'テーブル' // サブテーブルのフィールドコード
  let tableElement = 'subtable-xxxxxxx' // サブテーブルに振られている番号
  let parallelFields = { // 左側に2行目のフィールドコード 右側に1行目のフィールドコード 空白にしたいフィールドは含めない
    'C': 'B', // 行追加時に2行目のCフィールドに1行目のBフィールドの値をコピーしたい場合は左のように記載
    'A': 'A',
    'D': 'D',
    'E': 'E'
  };

  kintone.events.on([
    'app.record.create.show', 'app.record.edit.show',
    'app.record.create.change.' + tableField, 'app.record.edit.change.' + tableField
  ], (event) => {
    let record = event.record;

    // 2行目以降のボタンを非表示にする
    [...document.getElementsByClassName(tableElement)[0].getElementsByClassName('subtable-operation-gaia')].forEach((td, index) => {
      if (index > 1) {
        td.style.display = 'none';
      } else {
        td.style.display = 'table-cell';
      }
    });

    // 2行目に1行目の内容をコピー
    if (event.changes?.row) {
      let firstRow = record[tableField].value[0];
      let secondRow = record[tableField].value[1];

      for (let fieldCode in firstRow.value) {
        if (parallelFields[fieldCode]) {
          secondRow.value[fieldCode].value = firstRow.value[parallelFields[fieldCode]].value;
        } else {
          secondRow.value[fieldCode].value = firstRow.value[fieldCode].type.match(/CHECK|SELECT|FILE/) ? []: '';
        }
      };

      for (let fieldCode in firstRow.value) {
        firstRow.value[fieldCode].value = firstRow.value[fieldCode].type.match(/CHECK|SELECT|FILE/) ? []: '';
      };
    }

    return event;
  });
})();

早々のご返信有り難うございます!
ご認識の通りで1行目を常に最新のデータを入力出来るように空白にしたいと思っており、変更しない一部のフィールドはコピー出来ればと思っております。
因みにサブテーブル毎に振られている番号を調べるとfm-subtable〜を確認出来たのですがこれで合っているでしょうか?
宜しくお願い致します。

Hiroさま

このような形であると思いますが、fm-subtable…ということは、フォーム設定画面上で参照されているかと思います。テスト環境でも問題ないのでレコードの詳細閲覧画面や新規作成画面等からご確認下さい。

ご返信ありがとうございます。

すみません。私が勘違いをしておりまして行追加時(2行目が差し込まれる形で追加された時)に1行目にあった内容を2行目にコピーして1行目には必要な項目は残す、という処理をさせないといけませんでした。


1行目 A     B     D E

追加↓
2行目 A   B    C D E

例で行きますと、1行目を2行目にコピーした時にコピーは全て行って、1行目にBフィールドの値(日付)をCフィールドの値(日付)にいれて残りのフィールドは空白するか残すかは設定出来るようにしたいと思っております。

また2行目以降のボタンの非表示に関しては、消去ボタンのみ表示したいと思っております。

こちらの勘違いでは大変お手数お掛けして申し訳ないのですが、宜しくお願いします。

 

Hiroさま

以下のような形でしょうか?2行目以降の+ボタンのみ非表示にする処理と1行目のフィールドの値を残す処理を加えています。
複数のフィールドにコピーしたい場合(1行目のBの値を2行目のBとC両方にコピー)、6行目以降のparallelFieldsに’C’: ‘B’, ‘B’: 'B’と記載すれば問題ありません。
13行目に追加したclearFieldsに含まれるフィールドのみ、1行目は空白になるようにしています。

(function() {
  'use strict';

  let tableField = 'テーブル' // サブテーブルのフィールドコード
  let tableElement = 'subtable-xxxxxxx' // サブテーブルに振られている番号
  let parallelFields = { // 左側に2行目のフィールドコード 右側に1行目のフィールドコード
    'C': 'B', // 行追加時に2行目のCフィールドに1行目のBフィールドの値をコピーしたい場合は左のように記載
    'B': 'B',
    'A': 'A',
    'D': 'D',
    'E': 'E'
  };
  let clearFields = ['A', 'B', 'C']; // 削除する1行目のフィールドコード

  kintone.events.on([
    'app.record.create.show', 'app.record.edit.show',
    'app.record.create.change.' + tableField, 'app.record.edit.change.' + tableField
  ], (event) => {
    let record = event.record;

    // 2行目以降の+ボタンを非表示にする
    [...document.getElementsByClassName(tableElement)[0].getElementsByClassName('subtable-operation-gaia')].forEach((td, index) => {
      if (index > 1) {
        td.firstChild.style.display = 'none';
        td.lastChild.style.marginLeft = '12px';
      } else {
        td.firstChild.style.display = 'inline';
        td.lastChild.style.marginLeft = '4px';
      }
    });

    // 2行目に1行目の内容をコピー
    if (event.changes?.row) {
      let firstRow = record[tableField].value[0];
      let secondRow = record[tableField].value[1];

      for (let fieldCode in firstRow.value) {
        if (parallelFields[fieldCode]) {
          secondRow.value[fieldCode].value = firstRow.value[parallelFields[fieldCode]].value;
        } else {
          secondRow.value[fieldCode].value = firstRow.value[fieldCode].type.match(/CHECK|SELECT|FILE/) ? []: '';
        }
      };

      for (let fieldCode in firstRow.value) {
        if (clearFields.includes(fieldCode)) {
          firstRow.value[fieldCode].value = firstRow.value[fieldCode].type.match(/CHECK|SELECT|FILE/) ? []: '';
        }
      };
    }

    return event;
  });
})();

ご返信ありがとうございます。

ホント凄いです。理想通りの動きとなりました。本当にありがとうございます。ただテーブルに入っている添付ファイルのコピーはフィールドコードだけでは出来なかったのですがさすがに添付ファイルまでは空白にしたりコピーは難しいでしょうか?

Hiroさま

添付ファイルの場合、以下の通りフィールド変更イベントでは値の取得や書き換えができません。

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

方法自体はありますが、かなり複雑になります。

承知致しました。

この度は色々ご教授頂き有難うございます。やりたいことが実現できました。

本当にありがとうございました。

何度もすいません。

一つぬけていた箇所がありまして、1行目を2行目にコピーした時に1行目のBフィールドを1行目のCフィールドにコピーすることは可能でしょうか?

1行目 A B C     D E

追加↓ボタンを押した後

1行目 A     B     D E →1行目のBフィールドをCフィールドにコピーしたい
2行目 A   B    C D E

何度もご質問ばかりして大変申し訳ありませんが、再度ご確認頂けると幸いです。

宜しくお願いします。

Hiroさま
以下のような形でいかがでしょうか。当初から変わって不要になってしまった処理も含まれますが…

(function() {
  'use strict';

  let tableField = 'テーブル' // サブテーブルのフィールドコード
  let tableElement = 'subtable-xxxxxxx' // サブテーブルに振られている番号
  let parallelFields = { // 左側に2行目のフィールドコード 右側に1行目のフィールドコード
    'A': 'A',
    'B': 'B',
    'D': 'D',
    'E': 'E'
  };
  let firstRowCopyFields = { // 左側に1行目のコピーされるフィールド 右側に1行目のコピーするフィールド
    'C': 'B'
  };
  let clearFields = ['A', 'B', 'D', 'E']; // 削除する1行目のフィールドコード

  kintone.events.on([
    'app.record.create.show', 'app.record.edit.show',
    'app.record.create.change.' + tableField, 'app.record.edit.change.' + tableField
  ], (event) => {
    let record = event.record;

    // 2行目以降の+ボタンを非表示にする
    [...document.getElementsByClassName(tableElement)[0].getElementsByClassName('subtable-operation-gaia')].forEach((td, index) => {
      if (index > 1) {
        td.firstChild.style.display = 'none';
        td.lastChild.style.marginLeft = '12px';
      } else {
        td.firstChild.style.display = 'inline';
        td.lastChild.style.marginLeft = '4px';
      }
    });

    // 2行目に1行目の内容をコピー
    if (event.changes?.row) {
      let firstRow = record[tableField].value[0];
      let secondRow = record[tableField].value[1];

      for (let fieldCode in firstRow.value) {
        if (parallelFields[fieldCode]) {
          secondRow.value[fieldCode].value = firstRow.value[parallelFields[fieldCode]].value;
        } else {
          secondRow.value[fieldCode].value = firstRow.value[fieldCode].type.match(/CHECK|SELECT|FILE/) ? []: '';
        }
      };

      for (let fieldCode in firstRow.value) {
        if (firstRowCopyFields[fieldCode]) {
          firstRow.value[fieldCode].value = firstRow.value[firstRowCopyFields[fieldCode]].value;
        }
        if (clearFields.includes(fieldCode)) {
          firstRow.value[fieldCode].value = firstRow.value[fieldCode].type.match(/CHECK|SELECT|FILE/) ? []: '';
        }
      };
    }

    return event;
  });
})();

mls-hashimoto

完璧です。

この度はご丁寧に教えて頂き本当に有難うございました。

せび活用させて頂きます。