【formbridge】フィールドが空の場合非表示にしたい

javascript初心者です。

 

フォームブリッジにある特定フィールド(フィールドコード:test)の値が空の場合のみ、そのフィールドを非表示にしたいです。

※このフィールドはkviewerルックアップによって値が入ります

 

以下コードをフォームブリッジへアップロードしてみたのですが想定通り上手くいきません。

どこが間違っているかご指摘いただけますでしょうか?

(function() {
      "use strict";
      //fb.events.kviewer.record.mapped イベント:kViewer連携によりkViewerからレコード情報を取得しフォームに反映した時
      fb.events.kviewer.record.mapped = [function(state) {
              if (!state.record.test.value) {
                      state.fields[test].hide = true;
                      } else {
                      state.fields[test].hide = false;
                      }
                      return state;
              }];
})();

連投失礼いたします。以下コードでも試してみたのですが、やはり動作しませんでした

(function () {
  "use strict";
  var hiddenFields = [ //データがない場合、非表示にするフィールドコード
      'test',
      'test1',
      'test2',
    ];

  fb.events.form.mounted = [function () {
      var hiddenElements = hiddenFields.map(function(hiddenField){
          return fb.getElementByCode(hiddenField);
      });
      for (hiddenField of hiddenFields) {
          if(state.record[hiddenField].value === ''){
              hiddenElements.forEach(function(hiddenElement){
              hiddenElement.style.display = 'none';
              });
      }
  }}];
})();

KT さん

 

state.fields[XX].hide の「XX」はフィールドコードではなく、インデックスを指定するといけそうです。

state.fields[インデックス].hide =true;

 

該当フィールドのインデックスを確認するには、console.logでstateを出力したりすることで、中身を確認する方法があります。

例:

state.fields[XX].hide の「XX」はフィールドコードではなく、インデックスを指定するといけそうです。

ありがとうございます。
すみません、インデックスではなくフィールドコードで指定したいので以下コードで書きなおしました。
しかし、値が入っているフィールドに関しても非表示になってしまいます。

(function () {
  "use strict";
 varhiddenFields = [//データがない場合、非表示にするフィールドコード
     'test',
     'test1',
     'test2',
    ];
  fb.events.form.mounted = [function (state) {
     varhiddenElements = hiddenFields.map(function(hiddenField){
         returnfb.getElementByCode(hiddenField);
      });
     for(var hiddenFieldofhiddenFields) {
         if(state.record[hiddenField].value === ""){
              hiddenElements.forEach(function(hiddenElement){
              hiddenElement.style.display ='none';
              });
      }
  }}];
})();

kviewerルックアップによってフィールドに入った値が認識されておらず、全てのフィールドに対してif文内の処理が行われているようです。

以下発火イベントで書きなおしてみましたが、ダメでした。どう直せばよいかご存じでしょうか?

・fb.events.kviewer.record.mapped

・fb.events.kviewer.records.fetch

・fb.events.kviewer.records.mounted

KTさん

返事が遅くなりすみません。

公式Docによると、fb.events.form.mounted の発火タイミングはフォームのDOMが作成された後です。

つまり、まだ何も入力していない(Lookupによる入力を含む)うちに、JSが実行されます。

この場合、フォームのフィールドは全て空白のため、指定したフィールドが全部非表示になります。

fb.events.kviewer.records.mountedはフォームに値が入る前に発火します。

イベントがいつ発火するかを確認するには、仕様書を調べる他、デバッグで確認することもできます。

プログラムが思う通りに動かない?という時はデバッグをお勧めです。

動かない?そんな時はデバッグをしてみよう!入門編

kintone JavaScript カスタマイズデバッグまとめ

ご返信遅くなり申し訳ございません。
デバッグのやり方はわかったのですが、どの発火イベントを使うべきかわからず苦戦しております。。

submit やconfirmなどのイベントなら使えそうですが、

おそらく保存前に値のないフィールドを非表示にしたいのではないかと思います。

Lookupコピー先フィールドのみ非表示・非表示する場合、

Lookupコピー先フィールドのchangedイベントは使えるのではないかと思います。

ただし、hiddenElement.style.display = ‘none’;を使う場合、一度非表示にしたDom要素は再表示させる操作ができなくなるようです。

例えば、

次のように、Loopup先は2レコードがあり、1行目のレコードを選択して、メールアドレスのフィールドを非表示にした後、

もう一度Lookup選択画面を開き、2行目を選択してメールアドレスのフィールドを再表示させようとすると、consoleに「メールアドレスフィールドのDom要素は見つからない」というエラーが出ます。

state.fields[index].hide で試してみたら、非表示・表示が切り替えられます。

indexは次のように取得します。

let index = "";
for(let i = 0; i < state.fields.length; i++){
  if(state.fields[i].code === hiddenField) {
    index = i;
  }
}

 

何度もすみません。

index取得処理と非表示処理をどう組み合わせてコードとして書くと非表示・表示が切り替えられましたか?
何度試しても上手くいかないのでお聞きしたいです。

fb.events.fields.{fieldCode}.changed イベントを使用しても
想定通り動かず、指定した全フィールド(空以外のフィールドもすべて)が非表示になってしまいます

返事が遅くなり失礼しました。

Lookupによる値のコピーを行うフィールドのみで試しましたが、うまく切り替えられました。

もし、次のように書いてもうまくいけなかったら、ソースコードを見せていただいても大丈夫でしょうか?

個人情報や認証情報などの秘密情報を載せないようにご注意ください。

// 非表示/表示を切り替えるフィールドコードのオブジェクト
var hiddenFields = [
"非表示/表示するフィールドコード "
];

// changed内で非表示/表示を切り替える処理を記載
fb.events.fields.非表示/表示するフィールドコード(任意一つ).changed = [function (state) {
 hiddenFields.forEach(function(code){
            let index = "";
            for(let i = 0; i < state.fields.length; i++){
              if(state.fields[i].code === code) {
                index = i;
              }
            }
            if(state.record[code].value === ""){
              state.fields[index].hide = true;
            }else{
              state.fields[index].hide = false;
            }
          });
}];

 

 

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