kViewerで項目の値によって特定の項目の表示・非表示を切り替えたい

kViewerの項目Aの値が「確定」の場合は、項目Bと項目Cを非表示に、

項目Aの値が「確定」以外の場合は、項目Bと項目Cを表示したいのですが、Javascriptではどのような構文にすれば実現できるでしょうか?

マツさん

こんにちは

 

イベント「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’);

}];

})();

======

マツさん

1点確認ですが

if (state.record.登録確定.value !=‘確定’) { ですと「確定」でない場合に非表示なりますよ。

「確定」の場合に非表示であれば、 == としてみてください。

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

 

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