フォームブリッジのカスタマイズによる表示/非表示 style.displayが使用できない

[Legacy_Account2408 (maru（Legacy Account）)]

このサイトを参考にルックアップフィールドの表示制御をプログラミングしました。

 fb.events.form.mounted = [function (state) { 内では

hiddenElement.style.display = ‘none’; を使用できましたが

 

 fb.events.fields[‘申請者区分’].changed = [function (state) { 内では

hiddenElement.style.display = ‘none’; がエラーになってしまいます。

//特定の作成ルックアップフィールドを非表示にする
        hiddenFields.forEach(function (hiddenElement) {
            hiddenElement.style.visibility = 'hidden';
        });

 

実装目標は「申請者区分」ドロップダウンフィールドの値に沿ったルックアップフィールドを表示することです。

「申請者区分」ドロップダウンフィールドの変更時に表示の制御だけでなく表示したルックアップフィールドの虫眼鏡ボタンも自動で押下したいため、フォームブリッジの標準機能での表示制御は行っておりません。

 

ご助言いただけたらと思います。よろしくお願いいたします。

 

[Legacy_Account1740 (江田篤史（Legacy Account）)]

Kさん

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

hiddenFieldsの内のいずれかが、styleだけの変更でなく要素ごと削除されるような処理が混ざっているなどが要因として考えられます。
一度、JavaScriptカスタマイズはルックアップフィールドの表示非表示の処理だけにして、正常に動作するかご確認いただけますか？

もしそれでも動作しない場合は、エラーメッセージと、可能でしたらソースコードをご提示いただけると何かお力になれるかもしれません。

[Legacy_Account2408 (maru（Legacy Account）)]

江田篤史さん

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

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

ご指導いただいた通り、JavaScriptカスタマイズはルックアップフィールドの表示非表示の処理だけにして動作確認を行ったところ、以下のようなエラーメッセージが表示されました。

 var allLookup = ['A作成ルックアップ','B作成ルックアップ','C作成ルックアップ'];
    var hiddenElements;
    var hiddenFields = [];

    fb.events.form.mounted = [function (state) {
        //申請者区分フィールド値を取得する
        var shinsei = state.record['申請者区分'].value;
        var lookupCode = shinsei + '作成ルックアップ';
        //１つの作成ルックアップのみを表示する
        for (var i = 0; allLookup.length > i; i++) {
            if (allLookup[i] === lookupCode) {
               //何もしない
            } else {
                hiddenFields.push(allLookup[i])
            }
        }
        //特定の作成ルックアップフィールドを非表示にする
        hiddenElements = hiddenFields.map(function (hiddenField) {
            return fb.getElementByCode(hiddenField);
        });
        hiddenElements.forEach(function (hiddenElement) {
            hiddenElement.style.display = 'none';
        });
    }];

    //申請者区分フィールドを変更したときの処理
    fb.events.fields['申請者区分'].changed = [function (state) {
        //作成部署ルックアップデータをCLEARにする
        state.record['post'].value = null;
        //申請者区分フィールド値を取得する
        var shinsei = state.record['申請者区分'].value;
        var lookupCode = shinsei + '作成ルックアップ';
        //１つの作成ルックアップのみを表示する
        //var hiddenFields = [];
        for (var i = 0; allLookup.length > i; i++) {
            if (allLookup[i] === lookupCode) {
                //何もしない
            } else {
                hiddenFields.push(allLookup[i])
            }
        }
         ///特定の作成ルックアップフィールドを非表示にする
         /*hiddenElements = hiddenFields.map(function (hiddenField) {
            return fb.getElementByCode(hiddenField);
        });
        hiddenElemens.forEach(function (hiddenElement) {
            hiddenElement.style.display = 'none';
        });*/
        hiddenFields.forEach(function (hiddenElement) {  //64行目
            hiddenElement.style.display = 'none';     //65行目
        });

        //申請者区分フィールド値に相応のルックアップの選択画面を表示する(開きたいルックアップは文字列で直接フィールドコードを打つ。)
       /* if (shinsei == 'A') {
            document.querySelector('[data-vv-name = "A作成ルックアップ"]').querySelector('button').click();
        }
    //以下省略
    */

ご助力いただけると幸いです。よろしくお願いいたします。

 

[Legacy_Account1740 (江田篤史（Legacy Account）)]

Kさん

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

そのコード上では、hiddenFieldsはフィールドコードを示す文字列の配列です。

styleプロパティを指定するのは、HTMLElementに対してです。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

64行目付近の記述も、「fb.events.form.mounted イベント」での記述を真似て、fb.getElementByCode()で取得したHTMLElementに対してstyleを適用するのが良いかと思います。

 

[Legacy_Account2408 (maru（Legacy Account）)]

江田篤史さん

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

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

//特定の作成ルックアップフィールドを非表示にする
         hiddenElements = hiddenFields.map(function (hiddenField) {
            return fb.getElementByCode(hiddenField);
        });
        hiddenElemens.forEach(function (hiddenElement) {
            hiddenElement.style.display = 'none';
        });
        // hiddenFields.forEach(function (hiddenElement) { //64行目
            // hiddenElement.style.display = 'none'; //65行目
        // });

先ほどの64,65行目の代わりに６行追加しました。

hiddenFieldsに対してfb.getElementByCode()しています。

その時にエラーが発生しました。

前回の私のコメントのコード２行目でhiddenElementsを定義していますが、、、違うんですね。

根本的な部分から理解不足ですみません。

ご助言いただけたらと思います。

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

[Legacy_Account1740 (江田篤史（Legacy Account）)]

Kさん

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

返信が遅くなり申し訳ございません。

61行目が「hiddenElemens」となっており、「t」が抜けている気がします。

[Legacy_Account2408 (maru（Legacy Account）)]

江田篤史さん

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

脱字確認しました、初歩的なミスでお手数をおかけいたしました。

訂正したところまだ style でエラーが出てしまいます。

引き続きご指導いただければと思います。よろしくお願いいたします。

[Legacy_Account1740 (江田篤史（Legacy Account）)]

Kさん

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

fb.getElementByCode(hiddenField)でnullが返ってきているということかと思います。

hiddenFieldの元となっているallLookupに指定したフィールドコードに誤りがないかご確認いただけますか？
また、フォームブリッジの標準機能での表示制御や他のJavaScriptで、ルックアップの表示の切り替えがないか今一度ご確認いただけますか？

エラーとは別件で、ご提示いただいたコードについて1つ気になった点があります。
申請者区分が複数回変更された場合、hiddenFieldsが累積されるので、結果として全ルックアップフィールドが非表示になるかと思います。
こちらもご確認いただければと思います。

[Legacy_Account2408 (maru（Legacy Account）)]

江田篤史さん

お世話になっております。ご返信ありがとうございます。

 

hiddenFieldの元となっているallLookupに指定したフィールドコードに誤りがないかご確認いただけますか？

>allLookupに誤りはありませんでした。

また、フォームブリッジの標準機能での表示制御や他のJavaScriptで、ルックアップの表示の切り替えがないか今一度ご確認いただけますか？

>標準機能で表示制御設定を行っておりませんでした。

 

①fb.events.form.mounted イベント で表示制御

② fb.events.fields[‘申請者区分’].changedイベント で表示制御

を行っていたため「fb.getElementByCode(hiddenField)でnull」になっているようです。

①を削除し②だけで実行した結果、１度だけchangeに対応してくれました。

「hiddenFieldsが累積されるので、結果として全ルックアップフィールドが非表示」についてhiddenFieldsを初期化すれば①②併用かつ複数回のchangeに対応してくれるでしょうか？

hiddenFields.length = 0;

を②の１行目に追加しましたが相変わらず同じエラーが出てしまいます。

ご多忙とは存じますが引き続きご指導いただけると幸いです。

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

 

var hiddenFields =[];
//以下②のコード
fb.events.fields['申請者区分'].changed = [function (state) {
        //hiddenFieldsをフレッシュする
        hiddenFields.length = 0;
        //申請者区分フィールド値を取得する
        var shinsei = state.record['申請者区分'].value;
        var lookupCode = shinsei + '作成ルックアップ';
        //１つの作成ルックアップのみを表示する
        for (var i = 0; allLookup.length > i; i++) {
            if (allLookup[i] === lookupCode) {
                //何もしない
            } else {
                hiddenFields.push(allLookup[i])
            }
        }
        //特定の作成ルックアップフィールドを非表示にする
        hiddenElements = hiddenFields.map(function (hiddenField) {
            return fb.getElementByCode(hiddenField);
        });
        hiddenElements.forEach(function (hiddenElement) {
            hiddenElement.style.display = 'none';
        });
return state
}];

[Legacy_Account1740 (江田篤史（Legacy Account）)]

Kさん

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

左様でしたか。

申し訳ございません。少し勘違いがありました。
「display: none;」になっているだけでも、fb.getElementByCode()で取得できなくなりますね。

参考ページと同様に、fb.events.form.mountedイベント内で全てのルックアップフィールドのElementオブジェクトを取得しておき、配列として保持するのが良いかと思います。

fb.events.fields[‘申請者区分’].changedイベント内では、保持したElementオブジェクトの配列についてループを回して、displayの設定を行うと良いです。
表示非表示を区別はフィールドコードを元に行っていると思うので、フィールドコードの配列とElementオブジェクトの配列の紐付けが必要かと思います。
いくつか方法はありますが、配列のindexで紐付けるのが容易かと思います。

(function () {
  "use strict";
  var switchField = '申請者区分'; //判別用のドロップダウンフィールドのフィールドコード
  var hiddenFields = [ //表示非表示を切り替えるフィールドのフィールドコード
    'A作成ルックアップ',
    'B作成ルックアップ',
    'C作成ルックアップ'
  ];
  var hiddenElements;
  fb.events.form.mounted = [function () {
    hiddenElements = hiddenFields.map(function(hiddenField){
      return fb.getElementByCode(hiddenField);
    });
    hiddenElements.forEach(function(hiddenElement){
      hiddenElement.style.display = 'none';
    });
  }];
  fb.events.fields[switchField].changed = [function (state) {
    var selectedIndex = hiddenFields.findIndex(function(hiddenField) {
      return hiddenField === state.record[switchField].value + '作成ルックアップ';
    });
    hiddenElements.forEach(function(hiddenElement, index){
      if(index === selectedIndex){
        hiddenElement.style.display = 'inline-block';
      }else{
        hiddenElement.style.display = 'none';
      }
    });
  }];
})();

[Legacy_Account2408 (maru（Legacy Account）)]

江田篤史さん

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

コードのご開示ありがとうございます。

いただいたコードで実行したところ希望通りに動きました。

また、ほかの機能も書き足し、全機能を実現することができました。

ご指導ありがとうございました。