kintone フィールドを非表示にする方法 Javascript

kintoneでフィールドを非表示にするJavascriptです。

kintoneでフィールドの表示／非表示を切り替えるには「kintone.app.record.setFieldShown()」というAPIを使います。

今回は、画面を開いたときにフィールドを非表示にする方法と、ラジオボタンの選択値によってフィールドの表示／非表示を切り替える方法の２つを紹介します。

画面を開いたときにフィールドを非表示にする

画面を開いたときにフィールドを非表示にする方法を説明します。

サンプルとなる画面

フィールドは下記の３つを用意しました。

• レコード番号
• ログインID
• 名前

フィールド名とフィールドコードは一緒です。

この中の「レコード番号」を画面を開いたときに非表示にします。

指定するイベント

画面を開いたときとは、新規・編集・詳細表示の３つの操作を指します。

• レコード追加画面を表示したとき
• レコード編集画面を表示したとき
• レコード詳細画面を表示したとき

この場合「kintone.events.on()」の第1引数に配列でイベントタイプを指定します。

サンプルコード

画面を開いたときにフィールドを非表示にするコードです。

(() => {
  'use strict';

  // 新規・編集・詳細表示時にレコードID非表示
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.detail.show',
  ], (event) => {
    kintone.app.record.setFieldShown("レコード番号", false);
    return event;
  });
})()

「kintone.app.record.setFieldShown()」の第1引数に非表示にしたいフィールド名、第2引数に非表示のfalse(表示する場合はtrue)を設定します。

アプリの設定がら「JavaScript / CSSでカスタマイズ」で作ったjsファイルをアップしましょう。

実行結果

レコード番号を非表示にした実行結果です。

新規の場合

新規画面を開いたときの様子です。

編集の場合

編集画面を開いたときの様子です。

詳細の場合

詳細画面を開いたときの様子です。

ふむふむ、いい感じですな。

ラジオボタンの選択値によってフィールドの表示／非表示を切り替える

ラジオボタンの選択値によってフィールドの表示／非表示を切り替える方法を説明します。

サンプルとなる画面

フィールドは下記の項目を用意しました。

• 支払方法
• 銀行名
• 支店名
• 種目
• 口座名義人
• 口座番号

フィールド名とフィールドコードは一緒です。

支払方法が「現金」の場合は銀行名以降を「非表示」にします。支払方法が「振込」の場合は銀行名以降を「表示」します。

サンプルコード

ラジオボタンの選択値によってフィールドの表示／非表示を切り替えるコードです。

(() => {
  'use strict';

  const fieldCodes = ['銀行名', '支店名', '種目', '口座名義人', '口座番号']; // 表示非表示を切り替えるフィールドコード

  // 新規・編集・詳細表示時にレコードID非表示
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.detail.show',
    'app.record.create.change.支払方法',
    'app.record.edit.change.支払方法'
  ], (event) => {
    const record = event.record;
    fieldCodes.forEach((fieldCode) => {
      if ( record.支払方法.value === '振込' ) {
        kintone.app.record.setFieldShown(fieldCode, true);
      } else {
        kintone.app.record.setFieldShown(fieldCode, false);
      }
    });
    return event;
  });
})()

アプリの設定がら「JavaScript / CSSでカスタマイズ」で作ったjsファイルをアップしましょう。

実行結果

支払方法が「現金」の場合は銀行名以降が「非表示」になっています。

支払方法を「振込」を選択すると銀行名以降が「表示」されるようになりました。

参考サイト

とてもわかりやすくまとめられています。

フィールドの表示／非表示を切り替えてみよう - cybozu developer network

まとめ

画面を開いたときにフィールドを非表示にする方法と、ラジオボタンの選択値によってフィールドの表示／非表示を切り替える方法の２つを紹介しました。

複雑な画面になってくると、どうしても非表示にしておきたい項目って出てきますよね。そんな時に「kintone.app.record.setFieldShown()」で非表示にすれば、アプリの利用者がストレスなく使うことができるんじゃないかと思います。

おつかれさまでした。

この記事がお役に立ちましたら シェア をお願いいたします。