お世話になっております。
フォームブリッジで「回答」ボタンを無条件で非表示にしたいと思っています。
過去の投稿を参照し、
最新のページも見ながら下記の通りコードを作成してみたのですが、
うまく反映されず・・・。
cssでも構わないのですが、お知恵を頂けましたら幸いです。
宜しくお願いします。
// フォームのDOMが作成された後
formBridge.events.form.show = [function(state) {
// 非活性
document.getElementsByClassName('fb-custom--button--submit')[0].style.pointerEvents = 'none';
}];
なお過去投稿では非活性とあったので、ボタン自体は出現してしまうのかな？と初心者ながらに思ったのですが、
出現自体も消せる状態を実現したく・・・。
わがままな要望であることは重々承知の上でのお願いで大変恐縮なのですが、
どうぞ宜しくお願いします。
1)試しにコンソール画面で以下を入力したらボタンは消えました。
document.getElementsByClassName('fb-custom--button--submit')[0].style.display = 'none';
2)回答ボタンを消すと何か良いことがあるのですか？消したいという背景がわかるとありがたいです。
3)配列を経由しない([0]とかが出てこない)
document.querySelector('.fb-custom--button--submit').style.display = 'none';
などもあるかなと思いました。
4)devtoolで消したい要素を選択して、コピーしてChatGPTの画面に貼り付けて、JavaScriptで消したいと伝えるとコンソール画面で試せるようなコードが出てきました。
ご返信ありがとうございます。
1),3) こちらで試してみたのですが、残念ながら適用されませんでした…。
4) copilotは利用しているので、色々試してみます。
2) 正直formbridgeじゃなくとも、kViewerでも実現できるのであればツールは問わないのですが、条件分岐を利用したく、formbridgeの回答ボタンさえ非表示にできたら…と思っています。
案の定、コードの前半部分がミスっていました。
下記コードにて非表示できました。ありがとうございました！
formBridge.events.on('form.show', function (context){
document.querySelector('.fb-custom--button--submit').style.display = 'none';
});
すべての場合にあてはまるわけではないですが
表示関連のカスタマイズは、
対象の要素を特定して、カスタマイズを作用させる
・開発者ツールのコンソール画面から特定の要素がつかめているかを確認する
・特定の要素に対して、変化を加えられるかを確認
・console.log()で変数などの中身を表示したり、debuggerをつかってブレイクポイントをつけて、その時点での変数などの状態を確認します。
const element = document.getElementsByClassName('fb-custom--button--submit');
debugger; // ここで実行が一時停止し、変数やDOMの状態を確認できます
if (element) {
console.log(element)
debugger; // ここで実行が一時停止し、変数やDOMの状態を確認できます
element[0].innerText = '変更されたテキスト';
}
chromeのスニペット機能などを使うこともあります。
ここまでやれば、イベントを追加してファイルを読み込んで調整します。ここで動かない場合、イベント側で失敗している可能性が高いので原因追及がしやすいです。
もし、いきなりイベントと表示カスタマイズを反映させようとして、デバッグになれていないとどこまで処理が進んでいるのかわからないので、何が失敗しているのか、怪しいのかがわかりにくいと思います。
参考
kintone JavaScriptカスタマイズデバッグまとめ - cybozu developer network
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。