複数選択（チェックボックス）の値によってフィールドの表示非表示を切り替えるサンプルをご紹介！

kintoneは顧客管理や社内申請など様々な用途で利用することができる便利なツールです。
そして、ITにそこまで詳しくなくても使えるノーコードツールである点も非常に魅力的です。

しかしながら、業務改善に向けてkintoneをしっかりと活用している方ほど、
「こんなことができたらもっといいのに…」と感じる場面も多いはず…！

そんな方に向けて、このブログではJavaScriptカスタマイズのサンプルを公開しています！

今回はある条件を満たすとき・満たさないときにフィールドの表示非表示を切り替える処理をご紹介します。

アンケートを管理するアプリを作成した。
複数選択で「回答する設問」を取得して、選択された設問のみを表示したい。

こんな処理を実装したいと思ったことはありませんか？

今回の記事はそんな悩みの解決の手立てになれば幸いです。

使用するAPIについて

今回、メインで使用するAPIはこちらです。

フィールドの表示／非表示を切り替える

フィールドの表示、または非表示を切り替えます。

cybozu.dev

JavaScriptカスタマイズのサンプルコード

複数選択（チェックボックス）の選択肢によって表示非表示を切り替える

フィールドの前提条件は以下の通りです。

サンプルコードは次の通りです。

(function() {
  "use strict";
  // カスタマイズが動作するイベントを定義
  const targetQuestionChangeEvents = [
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.create.change.question',
    'app.record.edit.change.question'
  ];
  
  kintone.events.on(targetQuestionChangeEvents, function(event) {
    const record = event.record;
    // アンケートの値を取得する
    const question = record.targetQuestion.value; //この時複数選択（チェックボックス）は配列で取得される
    // アンケートの3つの選択肢（「設問1-1」「設問1-2」「設問1-3」）のうちチェックを付けた設問を表示、それ以外は非表示にする
    const questions = ['q1-1', 'q1-2', 'q1-3']; // 表示する設問のフィールドコードを配列で定義
    questions.forEach(function(q) {
      // 各設問のフィールドを取得
      const field = record[q];
      // 設問が選択されているかどうかをチェック
      if (question.includes(field.value)) {
        kintone.app.record.setFieldShown(q, true); // 設問フィールドを表示
      } else {
        kintone.app.record.setFieldShown(q, false); // 設問フィールドを非表示
      }
    });
    return event;
  });
})();

実際のアプリのフィールドコードや選択肢名称に合わせて上記コードを修正してお使いください。

既にプラグインやJavaScriptカスタマイズを実装している場合は正しく動作しない可能性がございますので、追加する際は注意してください。