【FormBridge】ラジオボタンのフィールド名をJavaScriptなどで非表示にしたい

kintone カスタマイズ
1

FormBridgeにて、ラジオボタンのフィールド名を非表示に設定した項目について、確認画面ではフィールド名を表示させたいと考えています。
しかし、「フィールド名を表示しない」を設定している項目では、確認画面でフィールド名が表示されないため、その設定を外し、JavaScriptなどを使用して非表示にする方法を検討しています。

現在、ラジオボタンのフィールドコードを取得することまでは理解しているのですが、その後のフィールド名を取得する方法が分からず、様々な記事を参照しながらカスタマイズを試みましたが、フィールド名の非表示には成功しておりません。

つきましては、以下の点についてご教示いただけますか。
①フィールド名を取得する方法
②フィールド名を非表示にする方法

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

<JavaScript実行コード>

(function() {
'use strict';
fb.events.form.mounted = [function(state) {
  fb.getElementByCode('フィールドコード').getElementsByTagName('label')[0].style.display = 'none';
  return state;
}];
})();
2

質問内容を理解できていないかもしれません。

既に②については質問文中のコードで動作していました。

エラーがでていたのでしょうか？よくわかりませんでした。

(() => {
    fb.events.form.mounted = [(state) => {
        console.log(fb.getElementByCode('moji').getElementsByTagName('label')[0].innerText)
        fb.getElementByCode('moji').getElementsByTagName('label')[0].style.display = 'none';
        return state;
    }];
})();

image
image415×254 3.66 KB

テンプレートの見だしは残してほしいです。

### 発生した問題やエラーメッセージを具体的に書きましょう
3

返信ありがとうございます。
正しく実施されるとそのようになるのですね。助かります。

エラーを確認したところ、コンソールに以下が記載されていました。

TypeError: Cannot read properties of null (reading 'getElementsByTagName')

getElementsByTagName で存在しない要素を指定しているからエラーが吐かれているそうです。
おそらくラベルの指定要素が間違っているか、labelがそもそもないのか、だと考えています。
この時、考えられる対処法があれば教えて欲しいです。

4

情報をください。
質問者が書いていない・どっちか判然としないことを想像するのは大変です。

  • 質問者の環境での消したいラジオボタンのフィールドコード
  • 設定画面でフィールラベルを表示するようにしているのか、していないのか？
  • どの画面でエラーが出ているのか？入力画面？確認画面？
  • 以下のコードのフィールドコードmojiを変更して消したいフィールドコードに合わせて実行した結果を教えてください。
(() => {
    fb.events.form.mounted = [(state) => {
        console.log(fb.getElementByCode('moji').getElementsByTagName('label')[0].innerText)
        fb.getElementByCode('moji').getElementsByTagName('label')[0].style.display = 'none';
        return state;
    }];
})();
5

情報共有が至らず大変申し訳ございません。
以下に共有させていただきます。

・ラジオボタンのフィールドコード
eq1_fcode

・フィールドラベルを表示しているか否か
フィールドラベルを表示するようにしている

・どの画面でエラーが出ているか。
入力画面

(() => {
  fb.events.form.mounted = [(state) => {
      console.log(fb.getElementByCode('eq1_fcode').getElementsByTagName('label')[0].innerText)
      fb.getElementByCode('eq1_fcode').getElementsByTagName('label')[0].style.display = 'none';
      return state;
  }];
})();

を実行した結果、eq1_fcodeのフィールド名は非表示にならず、上記で共有したエラーが記載される。

以上となります。よろしくお願いいたします。

6

formbridgeの設定画面側でラベルを非表示にすると画面表示されているhtmlに隠されているわけではなくlabelタグ自体がありませんでした。
chrome Devtoolのelementタブで確認できます。

質問文の

これが混乱させています。
JavaScriptやformbridgeの仕様、カスタマイズに詳しくなかったとしても
これからやろうとしていることなのか、現在どうなっているのかを区別して書かないのは
読み取りづらいです。

必要な情報があれば、設定画面で非表示にした場合のhtmlの要素をチェックするだけで確認できました。

7

検証ありがとうございます。
設定画面と入力画面、確認画面の違いが区別ついておらず、改めて確認させてください。
自分としての理解は以下の通りです。
＜設定画面＞
ラジオボタンや文字列(1行)の追加など、FormBridgeを管理者側で編集できる画面
<入力画面>
プレビューなどで確認できる、回答者がアンケートに回答するときに表示される画面
<確認画面>
回答者が最後までアンケートを回答した時に表示される、自分がどのような回答をしたか確認できる画面

という認識です。そのため、自分のやりたいこととしては、
「入力画面で非表示にしたラジオボタンのフィールド名を、確認画面で表示させたい」
となります。

aaaさんの回答によると、labelタグ自体が存在しないため、JavaScriptコードのlabel指定を削除すればよい、という結論になるでしょうか。

再三の質問となってしまい申し訳ございません。以上よろしくお願いいたします。

8

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

FormBridgeのフィールドコードを取得してコンソールに表示させるJavaScriptを実装しましたが、Microsoft Edgeの開発者ツールで確認すると、"null"が返ってきました。FormBridgeで指定しているフィールドコードの取得が上手く行かず、開発が進んでおりません。この問題の解決方法についてご教示いただけますでしょうか。
以下に実装したJSコードを記載します。

(() => {
  fb.events.form.mounted = [function (state) {
      var textfield = fb.getElementByCode('eq1_fcode');
      console.log(textfield);
      return state;
  }];
})();

なお、フィールドコードが正しく設定されていることは確認済みです。
以上となります。よろしくお願いいたします。

9

こちら、自己解決しました。

作成したフォームはステップフォームを採用しており、特定のフィールドコードはステップの中盤に存在していました。自身が作成したJavaScriptコードでは、fb.events.form.mountedイベントを使用していたため、最初に表示されたステップでのみ発火し、その後のステップではJavaScriptは実行されていませんでした。

この問題を解決するため、特定のフィールドコードが表示される時に発火する、fb.events.fields.{fieldcode}.mountedイベントを採用しました。これにより、フィールド要素の取得が可能となり、フィールドのラベル要素の取得およびラベル要素の非表示も実装できました。

発火タイミングの理解不足により発生した問題でした。ご迷惑をおかけし、申し訳ございませんでした。

10

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