document.querySelectorで取得する要素を動的に変更したい

kintone カスタマイズ
1

背景・実現したいこと

添付画像のようなルックアップフィールドを持つサブテーブルのドロップダウンを変更時に、対応するルックアップフィールドにドロップダウンの内容をコピーし、取得ボタンを自動で押下し一覧を表示させる

問題点

下記のコードでは、1行目の取得ボタンしか押せないのですが、document.querySelectorにどのような変更点を加えればよろしいでしょうか。初歩的な内容で恐縮ですがよろしくおねがいします。

 

(function() {
"use strict";

function sleep(msec) {
return new Promise(function(resolve) {

setTimeout(function() {resolve()}, msec);

})
}

async function start() {
await sleep(1000);
document.querySelector('.button-simple-cybozu.input-lookup-gaia').click();
}


kintone.events.on([
'app.record.create.change.備品区分',
'app.record.edit.change.備品区分',
], function(event) {
var changes = event.changes;

changes['row'].value['ルックアップ'].value = changes['row'].value['備品区分'].value; // ルックアップフィールドの値

start();

if(!changes['row'].value['備品区分'].value){
changes['row'].value['ルックアップ'].value = null;
}
return event;
});
2

n-u様

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

document.querySelectorAllというメソッドがあるのでそちらを用いると良いと思います．

CSSセレクターに一致する要素が全て配列で取得できるので，ループを回してそれぞれの要素についてclick処理を行うと良いと思います．

[].forEach.call(document.querySelectorAll('.button-simple-cybozu.input-lookup-gaia'), function(element){
element.click();
});
3

江田篤史 様

 

お世話になっております。ご回答いただきありがとうございます。早速試してみます

4

江田 様

 

重ねてのご質問で恐縮なのですが、click処理を一括ではなく随時行う仕様にすることは可能でしょうか。

例
サブテーブル１行目のドロップダウンを変更→１行目の取得ボタンを押下

サブテーブル２行目を追加

サブテーブル２行目のドロップダウンを変更→２行目の取得ボタンを押下

 

5

n-u様

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

ループを回さず，配列の要素番号を指定すれば良いと思います．
変更行を取得するには，findIndexなどで「event.record[‘サブテーブルのフィールドコード’].value[]」と「event.changes.row」を比較すると良いと思います．
27行目のサブテーブルのフィールドコードはご自身のアプリ設定に合わせて適宜変更してください．

(function () {
  "use strict";

  function sleep(msec) {
    return new Promise(function (resolve) {

      setTimeout(function () { resolve() }, msec);

    })
  }

  async function start(rowIndex) {
    await sleep(1000);
    document.querySelectorAll('.button-simple-cybozu.input-lookup-gaia')[rowIndex].click();
  }

  var getChangedRowIndex = function (event, tableCode) {
    return event.record[tableCode].value.findIndex(function (row) {
      return row === event.changes.row;
    });
  }

  kintone.events.on([
    'app.record.create.change.備品区分',
    'app.record.edit.change.備品区分',
  ], function (event) {
    var tableCode = 'テーブル'; //サブテーブルのフィールドコード

    var changes = event.changes;

    changes['row'].value['ルックアップ'].value = changes['row'].value['備品区分'].value; // ルックアップフィールドの値

    start(getChangedRowIndex(event, tableCode));

    if (!changes['row'].value['備品区分'].value) {
      changes['row'].value['ルックアップ'].value = null;
    }
    return event;
  });
})();
6

江田 様

度々ご回答ありがとうございます。無事解決できました。

様々勉強させていただきました。

 

7

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