kViewerで項目の値によって特定の項目の表示・非表示を切り替えたい マツ 2021年09月29日 08:24 kViewerの項目Aの値が「確定」の場合は、項目Bと項目Cを非表示に、 項目Aの値が「確定」以外の場合は、項目Bと項目Cを表示したいのですが、Javascriptではどのような構文にすれば実現できるでしょうか？ 0
12件のコメント
マツさん
こんにちは
イベント「kv.events.record.mounted」でレコード詳細画面が作成されたタイミングの処理を定義できます。
kv.detail.getElementByCode('フィールド名')で指定の要素を取得し、非表示の処理を入れました。
kViewer JavaScriptカスタマイズ
(function() {
'use strict';
kv.events.record.mounted = [function(state) {
// 項目Aの値が「確定」の場合は、項目Bと項目Cを非表示
if (state.record.項目A.value == '確定') {
kv.detail.getElementByCode('項目B').style.display = 'none';
kv.detail.getElementByCode('項目C').style.display = 'none';
}
}];
})();
koichiさん
コメントありがとうございました。
しかしながら動きませんでした。実装したいビューがマイページビューなのですがそれが原因でしょうか？
無知で申し訳ございませんが、ご教授いただければ幸いです。
マツさん
ご確認いただきありがとうございます。
確認したところマイページビューでもできるようです。
試しに以下のように間に「console.log」を入れ、
ブラウザのデベロッパーツールで、どこまで到達できているかご確認お願いいたします。
何かエラーが発生すれば、consoleタブに表示されます。
デベロッパーツールを初めて使われる場合は、下記ご参照ください。
動かない？そんな時はデバッグをしてみよう！入門編
(function() {
'use strict';
kv.events.record.mounted = [function(state) {
console.log('test1');
// 項目Aの値が「確定」の場合は、項目Bと項目Cを非表示
if (state.record.項目A.value == '確定') {
console.log('test2');
kv.detail.getElementByCode('項目B').style.display = 'none';
kv.detail.getElementByCode('項目C').style.display = 'none';
}
}];
})();
koichiさん
以下の構文で実行しましたがダメでした。デベロッパーツールの結果は添付画像の通りとなりました。。。
＝＝構文＝＝
(function() {
'use strict';
kv.events.record.mounted = [function(state) {
console.log('test1');
// 項目Aの値が「確定」の場合は、項目Bと項目Cを非表示
if (state.record.登録確定.value != '確定') {
console.log('test2');
kv.detail.getElementByCode('特典チケット残枚数').style.display = 'none';
kv.detail.getElementByCode('static_field_特記事項').style.display = 'none';
}
console.log('test3');
}];
})();
＝＝＝＝＝＝
マツさん
koichiさん
ご説明不足で済みません。
「!=」と「==」の違いは理解した上で、試してみましたが思った通り動きませんでした。常に非表示の状態でした。
マツさん
ご確認ありがとうございます。
if (state.record.登録確定.value != '確定') { のコードで
「確定」であっても「確定」でなくても、常に非表示であったいうことですね。
if文の条件に何か原因があるかもしれません。
各フィールドは何を使用されていますか？
例）
「登録確定」：チェックボックス
「特典チケット残枚数」：数値
「static_field_特記事項」：ラベル（kViewer静的フィールド）
マツさん
併せて、先のコード上に記載したフィールドコード（「登録確定」や「特典チケット残枚数」）が
kintoneアプリ上のフィールドコードと一致していることもご確認お願いします。
※kViewer上のフィールド名は使えません。
koichiさん
できました！ありがとうございました！！
原因は、ご指摘いただいた以下の点で、kintoneとkViewerのフィールドコードが不一致であったためでした。
＞kintoneアプリ上のフィールドコードと一致していることもご確認お願いします。
＞※kViewer上のフィールド名は使えません。
もう1点質問なのですが、FormBrigdeと連携していて、kViewerにFormBrigde連携ボタンを表示しているのですが、このボタンも「登録確定」フィールドの値によって表示・非表示を切り替えることは可能でしょうか？
マツさん
フィールドコードの不一致でしたか。解決して良かったです。
FormBridge連携ボタンはif文内に下記を追記してみてください。
「kv-fb-content」というclass名が付いていますので、その要素を非表示にする処理となります。
document.getElementsByClassName('kv-fb-content')[0].style.display = 'none';
koichiさん
早速コメントありがとございました。
ボタン制御も無事実装できました。
これですべてやりたいことは実現できました。ありがとうございました。
上述の「document.getElementsByClassName('kv-fb-content')[0].style.display = 'none';」の部分の様な、カスタマイズコード中でDOMを直接更新するコードは、2022/12月時点では、kviewerの"レコード詳細画面”の定義で 上書きされてしまって、タイミングによって機能しない場合が在りました。
私が 嵌ったコードは、このフォーラムのQ&Aに 掲示しています。
kviewerのSubTable中のカラムを条件付きで非表示にできる方法 伺い – cybozu developer network