# kViewer Myページ 条件分岐でのフィールドの表示設定

**URL:** <https://community.cybozu.dev/t/topic/8109>\
**Category:** kintone 開発相談\
**Created:** [2023 年 9 月 15 日午前 12:27 UTC](https://community.cybozu.dev/t/topic/8109 "2023-09-15T00:27:02Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![bpj0138](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@bpj0138](https://community.cybozu.dev/u/bpj0138)\
**Post date:** [2023 年 9 月 15 日午前 12:27 UTC](https://community.cybozu.dev/t/topic/8109/1 "2023-09-15T00:27:02Z")

</div>

> [@kViewer フォームブリッジ編集ボタン非表示](https://community.cybozu.dev/t/topic/8017):
>
> やりたいことは以下の通りです。 kViewerの詳細画面表示時、Kintoneレコードのお申込み内容が ”お申込み前" でないとき、エラーポップを表示し、フォームブリッジ編集ボタンを非表示にしたい。 ユーザーの複数回の回答を防ぎたく、実相を試みております。 以下の設定をしていたのですが、制御後もURL先に飛べ、フォームブリッジ編集ボタンを押すことができるため、トラブルになってしまいました。 …

投稿していた内容ですが、返信できない環境のままクローズされてしまいましたので再投稿させていただきます。

※やりたいこと  
kViewerのMyページ レコード詳細画面を表示した時  
お申込み内容の値によって、表示するフィールドを変更したい。  
お申込み内容の値によって、フォームブリッジ編集ボタンの表記を変更したい。

 ![image](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/1b2c7eccdab711e120416cf658bba52677ca8c2a.png)

以下の内容では非表示にならず、サイトを参考にデバック作業を勧められ試みましたが、根本的に何をすればよいのか（どこを見て何がわかるのか）わかりませんでした。

コンソール：特にエラー表示なし  
ブレークポイント：1行目と2行目にブレークポイントを設定した場合停止する。それ以外の行では停止しない。  
通信内容：ネットワーク→Fetch/XHR 何も表示されていない

```javascript
(() => {
    kv.events.record.mounted = [(state) => {
//お申込み内容が "お申込み待ち" でないとき
        if (state.record['お申込み内容'].value !== 'お申し込み待ち') { 
//ラベル1、ラベル2、添付フィールドを非表示
            kv.detail.getElementByCode('ラベル1').style.display = 'none';
            kv.detail.getElementByCode('ラベル2').style.display = 'none';
            kv.detail.getElementByCode('添付フィールド').style.display = 'none';
//フォームブリッジ編集ボタンの表記を変更

//お申込み内容が "お申込み待ち" のとき

//ラベル3を非表示

        }
        return state;
    }]
})();

```

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![jurippe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/jurippe/32/27_2.png) [@jurippe](https://community.cybozu.dev/u/jurippe)\
**Post date:** [2023 年 9 月 16 日午後 4:34 UTC](https://community.cybozu.dev/t/topic/8109/2 "2023-09-16T16:34:46Z")

</div>

> [@bpj0138](#):
>
> サイトを参考にデバック作業を勧められ試みましたが、根本的に何をすればよいのか（どこを見て何がわかるのか）わかりませんでした。

こんばんは。  
お困りのこととは思うのですが、その状態でカスタマイズするのはチョット危険かなと思いました🙏

お気を悪くされたら大変申し訳無いのですが、  
JavaScriptというか、JavaScriptに限らずプログラミングをする上では、「デバッグ」は必須のスキルなので、  
デバッグができない状態でカスタマイズをすすめるのは無謀かなぁと思います🥺

- cybozu developer network 内を「デバッグ」で検索するだけでも色々と情報が出てきますので、参考にされてみたり、

> **[サイト内検索](https://cybozu.dev/ja/search-result/?q=%E3%83%87%E3%83%90%E3%83%83%E3%82%B0&label=non_community_articles)**
>
> 「cybozu developer network」 は、kintone や Garoon などのカスタマイズ方法がわかる、学べる、質問できるサイボウズ公式サイトです。API ドキュメント、設計・開発・運用のノウハウや、イベント情報など、エンジニアに必要な技術情報を発信しています。

- Googleで検索してみたり、

[https://www.google.com/search?q=デバッグのやり方+chrome+javascript](https://www.google.com/search?q=%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%81%AE%E3%82%84%E3%82%8A%E6%96%B9+chrome+javascript)

- JavaScript入門の書籍などでも（おそらく）デバッグのやり方書いてあるものもあると思いますので本屋さんでパラパラと眺めたり

最初は読んで分からなくても、断片的な情報が繋がって分かるようになっていったりもするので、  
JavaScriptやデバッグのやり方をもう少し勉強されてみて、それから見直してみることをおすすめしたいです🙏

---

<div class="post-metadata">

**Author:** ![bpj0138](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@bpj0138](https://community.cybozu.dev/u/bpj0138)\
**Post date:** [2023 年 9 月 20 日午前 1:18 UTC](https://community.cybozu.dev/t/topic/8109/3 "2023-09-20T01:18:46Z")

</div>

jurippeさん

ご返信ありがとうございます。  
デバックしてみたのですが、以下のKintoneからのフィールドのフィールドコードが違っており、認識されていないようでした。

if (state.record[‘ **お申込み内容** ’].value !== ‘お申し込み待ち’) {  
kv.detail.getElementByCode(‘ **添付フィールド** ’).style.display = ‘none’;

kVewerで追加した項目（ラベルなどの静的フィールド）はkVewer側でフィールドコードを設定できるので、そのフィールドコードで認識されていたのですが、Kintoneの項目のフィールドコードはどのようにすれば見つけられますでしょうか。

Scopeで見たときにidがあったので入れてみましたがundefinedでした。

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![jurippe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/jurippe/32/27_2.png) [@jurippe](https://community.cybozu.dev/u/jurippe)\
**Post date:** [2023 年 9 月 20 日午前 2:20 UTC](https://community.cybozu.dev/t/topic/8109/4 "2023-09-20T02:20:43Z")

</div>

デバック ではなくて、 デバッグ です。  
Kintone ではなくて、kintone て書いたほうが良いです。

kintoneのフィールドコードは基本中の基本なので、ヘルプなどを検索してみてください😢

---

<div class="post-metadata">

**Author:** ![bpj0138](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@bpj0138](https://community.cybozu.dev/u/bpj0138)\
**Post date:** [2023 年 9 月 20 日午前 2:45 UTC](https://community.cybozu.dev/t/topic/8109/5 "2023-09-20T02:45:09Z")

</div>

上記の通り、Kintoneのフィールドコードではなく、kViewerに設定しているKintone項目のフィールドコードです。

詳しい方がいれば教えていただけないでしょうか。  
classは “kv-element drop-down” となっており、特定のフィールドを示すclassがなさそうでした。

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![jurippe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/jurippe/32/27_2.png) [@jurippe](https://community.cybozu.dev/u/jurippe)\
**Post date:** [2023 年 9 月 20 日午前 3:20 UTC](https://community.cybozu.dev/t/topic/8109/6 "2023-09-20T03:20:40Z")

</div>

[kViewerのJavaScript カスタマイズのドキュメント](https://kviewer.kintoneapp.com/help/js-customize)によると、`kv.detail.getElementByCode(code) 関数` には `code: 要素を取得したいフィールドのフィールドコード` とあったので、kintone アプリのフィールドコードのことかと思いました。

```javascript
if (state.record[‘お申込み内容’].value !== ‘お申し込み待ち’) {
kv.detail.getElementByCode(‘添付フィールド’).style.display = ‘none’;

```

それと、

`if (state.record[‘お申込み内容’].value !== ‘お申し込み待ち’) {`

とありますが、（詳しい方に見てもらったほうが良いと思いますが）先程のドキュメント読んだ感じ、state.recordではなくて、正しくはstate.recordsで、これは配列ではないでしょうか？  
配列だとstate.records[0]以下を掘らないといけない気がします。実行環境もない状態で想像で言ってますので違うかも。

参考になればと思います！

---

<div class="post-metadata">

**Author:** ![bpj0138](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@bpj0138](https://community.cybozu.dev/u/bpj0138)\
**Post date:** [2023 年 9 月 22 日午前 12:46 UTC](https://community.cybozu.dev/t/topic/8109/7 "2023-09-22T00:46:12Z")

</div>

単純にフィールドコード間違っており、以下でボタンの表記内容の変更も含め思い通りの動きとなりました。  
細かくデバッグできるように勉強します。

```javascript
(function() {
  "use strict";
    kv.events.record.mounted = [function (state) {
                                                    
//お申込内容が "お申込待ち" でないとき
      if (state.record['お申込内容'].value !== 'お申込待ち') { 
//ラベル1、ラベル2、添付フィールドを非表示
        kv.detail.getElementByCode('ラベル1').style.display = 'none';
        kv.detail.getElementByCode('ラベル2').style.display = 'none';
        kv.detail.getElementByCode('見積書').style.display = 'none';
//フォームブリッジ編集ボタンの表記を変更
        const displayFormButton = document.getElementsByClassName('ui icon button kv-fb-content _normal red large');
          if (displayFormButton.length > 0) {
            for (const button of displayFormButton) {
              button.innerText = "申請内容を確認する";
          }
        }
      }
//お申込み内容が "お申込み待ち" のとき
      else { 
//ラベル3を非表示
        kv.detail.getElementByCode('ラベル3').style.display = 'none';        
      }
    return state;  
    }]
})();

```

---

<div class="post-metadata">

**Author:** ![bpj0138](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@bpj0138](https://community.cybozu.dev/u/bpj0138)\
**Post date:** [2023 年 9 月 22 日午前 1:16 UTC](https://community.cybozu.dev/t/topic/8109/8 "2023-09-22T01:16:11Z")

</div>

ちなみに、勉強を始めたばかりの私にとっては（わからない人に説明するときも）変数の値は日本語を入れるほうがわかりやすいしメンテしやすいのですが、プログラマーの方が難しい英単語にするのは理由があるのでしょうか。（グローバルな顧客を相手にする場合を除いて）

```javascript
(function() {
  "use strict";
    kv.events.record.mounted = [function (state) {

  const 取得フィールド = kv.detail.getElementByCode
  const フォームブリッジ編集ボタン = document.getElementsByClassName('ui icon button kv-fb-content _normal red large');
                                                    
//お申込み内容が "お申込み待ち" でないとき
      if (state.record['お申込内容'].value !== 'お申込待ち') { 
//ラベル1、ラベル2、添付フィールドを非表示
        取得フィールド('ラベル1').style.display = 'none';
        取得フィールド('ラベル2').style.display = 'none';
        取得フィールド('見積書').style.display = 'none';
//フォームブリッジ編集ボタンの表記を変更
          if (フォームブリッジ編集ボタン.length > 0) {
            for (const button of フォームブリッジ編集ボタン) {
              button.innerText = "申請内容を確認する";
          }
        }
      }
//お申込み内容が "お申込み待ち" のとき
      else { 
//ラベル3を非表示
        取得フィールド('ラベル3').style.display = 'none';        
      }
    return state;
    
    }]
})();

```

---

<div class="post-metadata">

**Author:** ![jurippe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/jurippe/32/27_2.png) [@jurippe](https://community.cybozu.dev/u/jurippe)\
**Post date:** [2023 年 9 月 26 日午前 2:57 UTC](https://community.cybozu.dev/t/topic/8109/9 "2023-09-26T02:57:56Z")

</div>

うまく行ってよかったです！

変数名については、私は最近はあまり気にしなくなりました。  
自分だけしか使わないカスタマイズとかだと変数名に絵文字を使うこともあります。  
分かりやすいほうが良いですよね！！

でもきっと、多くのプログラマーは「変数名は英語で書きましょう」と教わり、それが染み付いていると思います💦

それと、チームで開発するときはチームのルールに従って変数名をつけるのが良いかな～と思います＾＾

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2023 年 10 月 30 日午前 5:50 UTC](https://community.cybozu.dev/t/topic/8109/10 "2023-10-30T05:50:25Z")

</div>

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