フィールドの表示/非表示

kintone では、画面上に表示されるフィールドを JavaScript で動的に表示・非表示に切り替えることができます。ユーザーの権限やフィールドの値に応じて不要な項目を隠すことで、入力画面をシンプルに保つことが可能です。

この記事では、kintone.app.record.setFieldShown を使ったフィールドの表示/非表示制御について、基本的な使い方から実践的なパターンまで解説します。

基本的な使い方

フィールドの表示・非表示を切り替えるには、kintone.app.record.setFieldShown メソッドを使用します。

kintone.app.record.setFieldShown('フィールドコード', true);  // 表示
kintone.app.record.setFieldShown('フィールドコード', false); // 非表示

レコード作成・編集画面での使用例

特定のフィールドを作成・編集画面で非表示にするには、以下のように記述します。

(() => {
  'use strict';

  const events = ['app.record.create.show', 'app.record.edit.show'];

  kintone.events.on(events, (event) => {
    // 「管理メモ」フィールドを非表示にする
    kintone.app.record.setFieldShown('管理メモ', false);

    return event;
  });
})();

レコード詳細画面での使用例

詳細画面でも同様に非表示にできます。

(() => {
  'use strict';

  kintone.events.on('app.record.detail.show', (event) => {
    // 「内部コード」フィールドを非表示にする
    kintone.app.record.setFieldShown('内部コード', false);

    return event;
  });
})();

複数のフィールドを一括で非表示にする

複数のフィールドをまとめて非表示にしたい場合は、配列とループを組み合わせると簡潔に記述できます。

(() => {
  'use strict';

  const events = ['app.record.create.show', 'app.record.edit.show', 'app.record.detail.show'];

  kintone.events.on(events, (event) => {
    /** 非表示にするフィールドコードの一覧 */
    const hiddenFields = ['管理メモ', '内部コード', 'システムID', '更新者情報'];

    hiddenFields.forEach((fieldCode) => {
      kintone.app.record.setFieldShown(fieldCode, false);
    });

    return event;
  });
})();

条件に応じて表示/非表示を切り替える

実務では、特定のフィールドの値に応じて他のフィールドの表示・非表示を制御したいケースが多くあります。

ドロップダウンの値に応じた制御

例えば、「問い合わせ種別」ドロップダウンの値が「その他」の場合にのみ「詳細入力」フィールドを表示する例です。

(() => {
  'use strict';

  /**
   * 問い合わせ種別の値に応じて、詳細入力フィールドの表示を切り替える
   * @param { Object } record - レコードオブジェクト
   */
  const toggleDetailField = (record) => {
    const category = record['問い合わせ種別'].value;
    kintone.app.record.setFieldShown('詳細入力', category === 'その他');
  };

  // 画面表示時に初期状態を設定
  const showEvents = ['app.record.create.show', 'app.record.edit.show'];
  kintone.events.on(showEvents, (event) => {
    toggleDetailField(event.record);
    return event;
  });

  // フィールド値の変更時にも連動して切り替える
  const changeEvents = [
    'app.record.create.change.問い合わせ種別',
    'app.record.edit.change.問い合わせ種別',
  ];
  kintone.events.on(changeEvents, (event) => {
    toggleDetailField(event.record);
    return event;
  });
})();

チェックボックスの値に応じた制御

チェックボックスの値である配列の中に特定の値が含まれているかどうかで制御するパターンです。

(() => {
  'use strict';

  const toggleFields = (record) => {
    const options = record['オプション'].value;

    // 「配送希望あり」が選択されている場合のみ、配送先関連のフィールドを表示
    const showDelivery = options.includes('配送希望あり');
    kintone.app.record.setFieldShown('配送先住所', showDelivery);
    kintone.app.record.setFieldShown('配送希望日', showDelivery);
    kintone.app.record.setFieldShown('配送時間帯', showDelivery);
  };

  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
    toggleFields(event.record);
    return event;
  });

  kintone.events.on(
    ['app.record.create.change.オプション', 'app.record.edit.change.オプション'],
    (event) => {
      toggleFields(event.record);
      return event;
    }
  );
})();

グループフィールドの表示/非表示

グループフィールド自体の表示/非表示も setFieldShown で制御できます。グループを非表示にすると、そのグループ内のフィールドもすべて非表示になります。

(() => {
  'use strict';

  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
    const role = event.record['権限区分'].value;

    // 管理者のみ「管理者用情報」グループを表示
    kintone.app.record.setFieldShown('管理者用情報', role === '管理者');

    return event;
  });
})();

注意点

一覧画面では使用できない

setFieldShown はレコード一覧画面（app.record.index.show）では使用できません。一覧画面でフィールドの表示を制御したい場合は、CSS カスタマイズや一覧の設定でフィールドを選択する方法を検討してください。

非表示にしてもデータは存在する

フィールドを非表示にしても、そのフィールドに値が設定されていればデータとして保存されます。セキュリティ上の理由でデータを見せたくない場合は、フィールドのアクセス権設定を使用してください。

モバイル版について

モバイル版でも同様の API が提供されていますが、メソッド名が異なります。

// PC版
kintone.app.record.setFieldShown('フィールドコード', false);

// モバイル版
kintone.mobile.app.record.setFieldShown('フィールドコード', false);

PC とモバイルの両方に対応する場合は、以下のようにデバイスを判定して切り替えると便利です。

(() => {
  'use strict';

  /** @returns { boolean } モバイル版の場合は true */
  const isMobile = () => kintone.app.getId() === null;

  /** PC/モバイルを自動判定して setFieldShown を実行する */
  const setFieldShown = (fieldCode, isShown) => {
    if (isMobile()) {
      kintone.mobile.app.record.setFieldShown(fieldCode, isShown);
    } else {
      kintone.app.record.setFieldShown(fieldCode, isShown);
    }
  };

  const events = [
    'app.record.create.show',
    'app.record.edit.show',
    'mobile.app.record.create.show',
    'mobile.app.record.edit.show',
  ];

  kintone.events.on(events, (event) => {
    setFieldShown('管理メモ', false);
    return event;
  });
})();

まとめ

• kintone.app.record.setFieldShown でフィールドの表示・非表示を動的に制御できる
• show イベントと change イベントを組み合わせることで、画面表示時とフィールド操作時の両方に対応できる
• 複数フィールドの一括非表示は配列とループで簡潔に記述できる
• グループフィールドの非表示により、グループ内の全フィールドをまとめて非表示にできる
• 一覧画面では使用できない点と、非表示はセキュリティ対策にならない点に注意が必要