【フォームブリッジ】kViewerルックアップ一覧のデータ取得方法

フォームブリッジのkViewerルックアップフィールドに関するカスタマイズを作成したいです。

添付のように絞り込み画面に表示されたデータを配列に格納する方法を教えていただきたいです。(以下、ルックアップ一覧画面と呼ぶ)

 

トリガーは

にチェックを入れたときを想定しており、実装済みです。

fb.events.fields[‘取得’].changed = [function (state) {  …

 

 

全体の流れは以下のように考えております。

①絞り込む文字列を入力

②取得チェックを入れる

③自動で虫眼鏡ボタンを押下(ここまで実装済み)

document.querySelector(‘[data-vv-name = “ルックアップ自動table-0-ルックアップ1field”]’).querySelector(‘button’).click(); //ルックアップの虫眼鏡を自動押下

④ルックアップ一覧画面に表示されている項目Aと項目Bのデータを自動で格納

⑤ルックアップ一覧画面を自動で閉じる

⑥④のデータをサブテーブルに自動で入力

④~⑥の実装方法がありましたら教えていただきたいです。

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

maruさん

こんにちは。

 

④ルックアップ一覧画面に表示されている項目Aと項目Bのデータを自動で格納

これは、ルックアップ1を取得した際に

項目A→その行のフィールド2

項目B→その行のフィールド3

に格納ということでしょうか?

この動きであれば、kViewerルックアップの設定内の「選択時にAPIビューのレコードからフィールドの値を変更」で可能です。

 

認識が誤っていたらご返信ください。

koichiさん

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

これは、ルックアップ1を取得した際に

項目A→その行のフィールド2

項目B→その行のフィールド3

に格納ということでしょうか?

>その通りでございますが、言葉足らずですみません。

④で表示されているすべてのデータ(3行)を「選択」することなく自動で入力したいです。

④のトリガーはポップアップ表示をトリガーにすることを考えております。

可能でしょうか。

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

 

maruさん

ルックアップした検索結果全てをテーブルに一括で入れるということで理解しました。

 

以下のようなメソッドを使い、DOM操作すれば可能と思います。

getElementsByClassName

getElementsByTagName

querySelectorAll

 

①ルックアップダイアログの行要素を取得

②行要素の個数分だけテーブル行追加ボタンを押す(1行目から上書きか、末尾に追加するかで、押す回数が変わる)

③追加したテーブル行の各フィールドに①で取得した値を入れる

④各行のルックアップ検索ボタンを押す(③において、ルックアップ参照後の値を各フィールドに入力するだけでよければ、④は不要)

koichiさん、ご返信ありがとうございます。

ルックアップした検索結果全てをテーブルに一括で入れるということで理解しました。

>おっしゃる通りです。

 

以下のようなメソッドを使い、DOM操作すれば可能と思います。

getElementsByClassName

getElementsByTagName

querySelectorAll

>要素の取得について知識がないのですが、

  //getElemntsしてルックアップポップアップの要素を取得するfunction
  var lines ;
  var linesLength ;
  function getElement(state){
      //表の全要素の取得
      lines = document.getElementsByClassName("el-dialog__body");
      //行要素の個数取得
      linesLength = lines.length;
      //1行目の選択ボタン押下
      document.querySelector('.kviewer-lookup-modal tbody tr:nth-child(1) td:nth-child(1) button').querySelector('button').click();
  }
  //取得したデータをサブテーブルに自動入力する
  function enterDataForSubtable (state){
      //lineslength分サブテーブルの最下行にデータを挿入する
      //-----------
    }

  fb.events.kviewer.records.mounted = [function (state){
      getElement(state);
      enterDataForSubtable(state);
      return state;
  }]

こちらのページを参考にまずはコード作成を試みたのですが、うまくいきませんでした。

各種のメソッドの使用方法等をご教授いただければと思います。

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

maruさん

必要になりそうな処理を羅列します。長文になりますがご了承ください。

【ルックアップダイアログの要素を取得する】

const el = document.getElementsByClassName('el-dialog__body');

この場合は、class「el-dialog__body」を持つ要素を全て取得した配列となります。

 

今回のケースでは、一番最初の要素で良いと思いますので、[0]番目を取得します。

const el = document.getElementsByClassName('el-dialog__body')[0];

 

 

【ルックアップ検索結果の行要素を取得する】

const tr = el.querySelectorAll('tbody tr');

HTML上の<tr>タグが各行の要素です。
ルックアップダイアログ要素の配下にある「tbody」の更に配下にある「tr」を全て取得します。

 

【テーブル行追加ボタンを取得して押す】

const plusButton = document.getElementsByClassName('plus icon')[0];

テーブルが1つしかなければ、行追加ボタンは常に1つしか出てきません。
上記のように、[0]番目を指定し、追加ボタンを取得できます。

 

plusButton.click();

これでボタンを押したことになるので、空行が追加されます。

このボタン取得と押下処理を上記trの配列長分ループします。
※この時にテーブルの1行目から上書きする場合は、「配列長 - 1」回のループです。

 

【各行にルックアップの結果を入力する】

const tableRow = document.querySelectorAll('.ui.table.collapsing.celled.unstackable>tbody>tr');

テーブルの各行の要素を取得します。

 

for (let i = 0; i < tr.length; i++) {
  state.record.テーブル名.value[tableRow.length - tr.length + i].value.フィールド名.value = tr[i].getElementsByTagName('td')[★].textContent;
}

  ★はルックアップ検索結果のうち、入力したいフィールドの列番号です。左から0, 1, 2・・・

 

【ルックアップダイアログを閉じる】

const closeButton = document.getElementsByClassName('el-dialog__close el-icon el-icon-close')[0];

右上の×ボタンの要素を取得します。

 

closeButton.click();

これを押す処理を入れて、ダイアログが閉じます。

 

 

要素の取得は上記のような形でできますが
表示までに若干の遅延があるため、これだけでは一筋縄ではいきません。
以下のような遅延処理を挟みながら処理します。

 

【一定時間間隔で繰り返し実行する】

let intervalId1 = setInterval(function() {

  // 1000ミリ秒間隔で行う処理

  // 繰り返しを停止する場合
    clearInterval(intervalId1);

}, 1000);

 

【一定時間後に実行する】

setTimeout(function() {

  // 1000ミリ秒後に行う処理

}, 1000);

koichiさん

 

ご丁寧なご返信をありがとうございます。

アドバイスいただいたコードで基本的な実装ができました。

(複数回の絞り込みに対応するテーブルへの自動入力制御などはまだ行えてません。)

 

ルックアップ後のポップアップでは3フィールドしか表示できず、いただいたコードですと、3フィールドしか転記ができないと思います。

for (leti =0; i < tr.length; i++) {
  state.record.テーブル名.value[tableRow.length - tr.length + i].value.フィールド名.value= tr[i].getElementsByTagName('td')[★].textContent;
}

ルックアップ後のポップアップに表示されていないフィールド値を取得することは可能でしょうか。

 

度々申し訳ございません。よろしくお願いいたします。

maruさん

 

kViewerルックアップは、設定画面で選択した最大3つのフィールドしか取得できません。

これを超えるフィールドを取得する術がないため、不可という回答になります。

フォームブリッジの仕様が変わることを期待するしかないですね。

koichiさん

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

ご教授いただいた内容で一旦運用してみます。ありがとうございました。

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