新規投稿
フォローする

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

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

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

0

11件のコメント

Avatar
koichi

マツさん

こんにちは

 

イベント「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';
  }

 }];

})();
1
Avatar
マツ

koichiさん

コメントありがとうございました。

しかしながら動きませんでした。実装したいビューがマイページビューなのですがそれが原因でしょうか?

無知で申し訳ございませんが、ご教授いただければ幸いです。

0
Avatar
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により編集されました
0
Avatar
マツ

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');

}];

})();

======

0
Avatar
koichi

マツさん

1点確認ですが
if (state.record.登録確定.value != '確定') { ですと「確定」でない場合に非表示なりますよ。
「確定」の場合に非表示であれば、== としてみてください。
0
Avatar
マツ

koichiさん

ご説明不足で済みません。

「!=」と「==」の違いは理解した上で、試してみましたが思った通り動きませんでした。常に非表示の状態でした。

0
Avatar
koichi

マツさん

 

ご確認ありがとうございます。

 

if (state.record.登録確定.value != '確定') { のコードで

「確定」であっても「確定」でなくても、常に非表示であったいうことですね。

if文の条件に何か原因があるかもしれません。

 

各フィールドは何を使用されていますか?

例)

「登録確定」:チェックボックス

「特典チケット残枚数」:数値

「static_field_特記事項」:ラベル(kViewer静的フィールド)

koichiにより編集されました
0
Avatar
koichi

マツさん

 

併せて、先のコード上に記載したフィールドコード(「登録確定」や「特典チケット残枚数」)が

kintoneアプリ上のフィールドコードと一致していることもご確認お願いします。

※kViewer上のフィールド名は使えません。

0
Avatar
マツ

koichiさん

できました!ありがとうございました!!

原因は、ご指摘いただいた以下の点で、kintoneとkViewerのフィールドコードが不一致であったためでした。

>kintoneアプリ上のフィールドコードと一致していることもご確認お願いします。

>※kViewer上のフィールド名は使えません。

 

もう1点質問なのですが、FormBrigdeと連携していて、kViewerにFormBrigde連携ボタンを表示しているのですが、このボタンも「登録確定」フィールドの値によって表示・非表示を切り替えることは可能でしょうか?

0
Avatar
koichi

マツさん

フィールドコードの不一致でしたか。解決して良かったです。

 

FormBridge連携ボタンはif文内に下記を追記してみてください。

「kv-fb-content」というclass名が付いていますので、その要素を非表示にする処理となります。

document.getElementsByClassName('kv-fb-content')[0].style.display = 'none';

1
Avatar
マツ

koichiさん

早速コメントありがとございました。

ボタン制御も無事実装できました。

これですべてやりたいことは実現できました。ありがとうございました。

1
サインインしてコメントを残してください。