# kViewerで項目の値によって特定の項目の表示・非表示を切り替えたい **URL:** \ **Category:** kintone 開発相談\ **Created:** [2021 年 9 月 29 日午前 8:24 UTC](https://community.cybozu.dev/t/topic/5316 "2021-09-29T08:24:05Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![Legacy\_Account1851](https://avatars.discourse-cdn.com/v4/letter/l/dfb087/32.png) [@Legacy\_Account1851](https://community.cybozu.dev/u/Legacy_Account1851)\ **Post date:** [2021 年 9 月 29 日午前 8:24 UTC](https://community.cybozu.dev/t/topic/5316/1 "2021-09-29T08:24:05Z")
kViewerの項目Aの値が「確定」の場合は、項目Bと項目Cを非表示に、 項目Aの値が「確定」以外の場合は、項目Bと項目Cを表示したいのですが、Javascriptではどのような構文にすれば実現できるでしょうか？ ---
**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\ **Post date:** [2021 年 9 月 30 日午前 6:29 UTC](https://community.cybozu.dev/t/topic/5316/2 "2021-09-30T06:29:35Z")
マツさん こんにちは   イベント「kv.events.record.mounted」でレコード詳細画面が作成されたタイミングの処理を定義できます。 kv.detail.getElementByCode(‘フィールド名’)で指定の要素を取得し、非表示の処理を入れました。 [kViewer JavaScriptカスタマイズ](https://kviewer.kintoneapp.com/help/ja/customize) ``` (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'; } }]; })(); ``` ---
**Author:** ![Legacy\_Account1851](https://avatars.discourse-cdn.com/v4/letter/l/dfb087/32.png) [@Legacy\_Account1851](https://community.cybozu.dev/u/Legacy_Account1851)\ **Post date:** [2021 年 9 月 30 日午前 8:52 UTC](https://community.cybozu.dev/t/topic/5316/3 "2021-09-30T08:52:06Z")
[koichi](https://community.cybozu.dev/hc/ja/profiles/900225082446-koichi)さん コメントありがとうございました。 しかしながら動きませんでした。実装したいビューがマイページビューなのですがそれが原因でしょうか？ 無知で申し訳ございませんが、ご教授いただければ幸いです。 ---
**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\ **Post date:** [2021 年 10 月 1 日午前 1:02 UTC](https://community.cybozu.dev/t/topic/5316/4 "2021-10-01T01:02:00Z")
マツさん   ご確認いただきありがとうございます。 確認したところマイページビューでもできるようです。   試しに以下のように間に「console.log」を入れ、 ブラウザのデベロッパーツールで、どこまで到達できているかご確認お願いいたします。 何かエラーが発生すれば、consoleタブに表示されます。   デベロッパーツールを初めて使われる場合は、下記ご参照ください。 [動かない？そんな時はデバッグをしてみよう！入門編](https://community.cybozu.dev/hc/ja/articles/207613916-%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84-%E3%81%9D%E3%82%93%E3%81%AA%E6%99%82%E3%81%AF%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%82%92%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86-%E5%85%A5%E9%96%80%E7%B7%A8) ``` (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'; } }]; })(); ``` ---
**Author:** ![Legacy\_Account1851](https://avatars.discourse-cdn.com/v4/letter/l/dfb087/32.png) [@Legacy\_Account1851](https://community.cybozu.dev/u/Legacy_Account1851)\ **Post date:** [2021 年 10 月 1 日午前 8:31 UTC](https://community.cybozu.dev/t/topic/5316/5 "2021-10-01T08:31:12Z")
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’); }]; })(); ＝＝＝＝＝＝ ---
**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\ **Post date:** [2021 年 10 月 1 日午後 12:52 UTC](https://community.cybozu.dev/t/topic/5316/6 "2021-10-01T12:52:13Z")
マツさん 1点確認ですが if (state.record.登録確定.value **!=** ‘確定’) { ですと「確定」でない場合に非表示なりますよ。 「確定」の場合に非表示であれば、 **==** としてみてください。 ---
**Author:** ![Legacy\_Account1851](https://avatars.discourse-cdn.com/v4/letter/l/dfb087/32.png) [@Legacy\_Account1851](https://community.cybozu.dev/u/Legacy_Account1851)\ **Post date:** [2021 年 10 月 3 日午後 11:56 UTC](https://community.cybozu.dev/t/topic/5316/7 "2021-10-03T23:56:43Z")
koichiさん ご説明不足で済みません。 「!=」と「==」の違いは理解した上で、試してみましたが思った通り動きませんでした。常に非表示の状態でした。 ---
**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\ **Post date:** [2021 年 10 月 4 日午前 2:43 UTC](https://community.cybozu.dev/t/topic/5316/8 "2021-10-04T02:43:30Z")
マツさん   ご確認ありがとうございます。   if (state.record.登録確定.value != ‘確定’) { のコードで 「確定」であっても「確定」でなくても、常に非表示であったいうことですね。 if文の条件に何か原因があるかもしれません。   各フィールドは何を使用されていますか？ 例） 「登録確定」：チェックボックス 「特典チケット残枚数」：数値 「static\_field\_特記事項」：ラベル（kViewer静的フィールド） ---
**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\ **Post date:** [2021 年 10 月 4 日午前 3:13 UTC](https://community.cybozu.dev/t/topic/5316/9 "2021-10-04T03:13:27Z")
マツさん   併せて、先のコード上に記載したフィールドコード（「登録確定」や「特典チケット残枚数」）が kintoneアプリ上のフィールドコードと一致していることもご確認お願いします。 ※kViewer上のフィールド名は使えません。 ---
**Author:** ![Legacy\_Account1851](https://avatars.discourse-cdn.com/v4/letter/l/dfb087/32.png) [@Legacy\_Account1851](https://community.cybozu.dev/u/Legacy_Account1851)\ **Post date:** [2021 年 10 月 4 日午前 4:36 UTC](https://community.cybozu.dev/t/topic/5316/10 "2021-10-04T04:36:46Z")
koichiさん できました！ありがとうございました！！ 原因は、ご指摘いただいた以下の点で、kintoneとkViewerのフィールドコードが不一致であったためでした。 ＞kintoneアプリ上のフィールドコードと一致していることもご確認お願いします。 ＞※kViewer上のフィールド名は使えません。   もう1点質問なのですが、FormBrigdeと連携していて、kViewerにFormBrigde連携ボタンを表示しているのですが、このボタンも「登録確定」フィールドの値によって表示・非表示を切り替えることは可能でしょうか？ ---
**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\ **Post date:** [2021 年 10 月 4 日午前 5:42 UTC](https://community.cybozu.dev/t/topic/5316/11 "2021-10-04T05:42:08Z")
マツさん フィールドコードの不一致でしたか。解決して良かったです。   FormBridge連携ボタンはif文内に下記を追記してみてください。 「kv-fb-content」というclass名が付いていますので、その要素を非表示にする処理となります。 document.getElementsByClassName(‘kv-fb-content’)[0].style.display = ‘none’; ---
**Author:** ![Legacy\_Account1851](https://avatars.discourse-cdn.com/v4/letter/l/dfb087/32.png) [@Legacy\_Account1851](https://community.cybozu.dev/u/Legacy_Account1851)\ **Post date:** [2021 年 10 月 4 日午前 7:00 UTC](https://community.cybozu.dev/t/topic/5316/12 "2021-10-04T07:00:42Z")
koichiさん 早速コメントありがとございました。 ボタン制御も無事実装できました。 これですべてやりたいことは実現できました。ありがとうございました。 ---
**Author:** ![Legacy\_Account1397](https://avatars.discourse-cdn.com/v4/letter/l/4491bb/32.png) [@Legacy\_Account1397](https://community.cybozu.dev/u/Legacy_Account1397)\ **Post date:** [2022 年 12 月 27 日午後 8:36 UTC](https://community.cybozu.dev/t/topic/5316/13 "2022-12-27T20:36:53Z")
上述の「document.getElementsByClassName(‘kv-fb-content’)[0].style.display = ‘none’;」の部分の様な、カスタマイズコード中でDOMを直接更新するコードは、2022/12月時点では、kviewerの"レコード詳細画面”の定義で 上書きされてしまって、タイミングによって機能しない場合が在りました。 私が 嵌ったコードは、このフォーラムのQ&Aに 掲示しています。 [kviewerのSubTable中のカラムを条件付きで非表示にできる方法 伺い – cybozu developer network](https://community.cybozu.dev/hc/ja/community/posts/13745250464665-kviewer%E3%81%AESubTable%E4%B8%AD%E3%81%AE%E3%82%AB%E3%83%A9%E3%83%A0%E3%82%92%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E3%81%A7%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AB%E3%81%A7%E3%81%8D%E3%82%8B%E6%96%B9%E6%B3%95-%E4%BC%BA%E3%81%84?page=1#community_comment_13947360398105)   ---
**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\ **Post date:** [2023 年 12 月 8 日午前 12:43 UTC](https://community.cybozu.dev/t/topic/5316/14 "2023-12-08T00:43:56Z")
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。