【FormBridge】ドロップダウンの選択肢を動的に変更する #JavaScript

はじめに

FormBridgeのプルダウンの選択肢をkintoneから取得して生成する方法をご紹介します。
また、選択した値によって下の階層の選択肢の値を絞り込むという仕様も入れます。
FormBridgeでも選択した値によって絞り込むという設定は可能ですが、管理が手間となるため選択肢となるデータはkintoneで保持する方法を取り入れました。

こちらのようなイメージです

コード

'use strict';

// kViewerのURLを記載
const kvOrganizationData = 'https://~~';

// kViewerから取得したデータを入れる配列
let organizationData = [];

(function () {
  /**
  * フォーム画面遷移時
  */
  fb.events.form.mounted = [async function (state) {
    // 非同期処理にてkViewerからデータを取得する
    await getOrganizationDataData();

    initDropdown('department');

    return state;
  }]

  /**
  * 部を変更時に課プルダウンを生成
  */
  fb.events.fields['department'].changed = [function () {
    // データの整合性を取るために値を空にする
    record['section'].value = '';
    record['group'].value = '';

    initDropdown('section');
  }];

  /**
  * 課を変更時にグループプルダウンを生成
  */
  fb.events.fields['section'].changed = [function (state) {
    // データの整合性を取るために値を空にする
    record['group'].value = '';

    initDropdown('group');
  }];

  /**
  * ドロップダウンの選択肢を生成
  * 部プルダウン：全ての部の値を表示
  * 課プルダウン：部が一致する課の値を表示
  * グループプルダウン：部と課が一致するグループの値を表示
  */
  function initDropdown(fieldCode) {
    let options = fields.find(({ code }) => code === fieldCode).options;
    let optionData = [];
    const isDepartment = fieldCode === 'department';
    const isSection = fieldCode === 'section';
    const isGroup = fieldCode === 'group';

    for (let data of yearOfAffiliationData) {
      const isMatchedDepartment = data['department'].value === record['department'].value;
      const isMatchedSection = data['section'].value === record['section'].value;
      const isAvailableOption =
          isDepartment
            || (isSection && isMatchedDepartment)
            || (isGroup && isMatchedDepartment && isMatchedSection);

      if (isAvailableOption) {
        // 条件に一致するデータを追加
        optionData.push(data[fieldCode].value);
      }
    }

    // 重複しているデータを削除
    optionData = new Set(optionData);

    // 重複しないよう、ドロップダウンのデータを初期化
    options.length = 0;

    for (let option of optionData) {
      // ドロップダウンの項目を設定
      options.push(option);
    }
  }

  /**
  * 組織情報を取得
  */
  async function getOrganizationDataData() {
    const kvOrganizationUrl = generateUrl(kvOrganizationData);

    await $j.ajax({
      url: kvOrganizationUrl
    }).done((data) => {
      organizationData = data.records;
    });
  }

})();

解説

function initDropdown(fieldCode) { }部分

fields.find(({ code }) => code === fieldCode).options;

fieldCodeにFormBridgeで設定したフィールドコードを設定することで、選択肢の値を取得できます。この取得した値を書き換えることによって選択肢の値を設定していきます。
これを探しだすのに苦労しました

const isAvailableOption =
    isDepartment
        || (isSection && isMatchedDepartment)
        || (isGroup && isMatchedDepartment && isMatchedSection);

条件の設定を行います。

isDepartment
部を変更した場合
isSection && isMatchedDepartment
課を変更した場合、かつ部のデータが一致している
isGroup && isMatchedDepartment && isMatchedSection
部を変更した場合、かつ部と課のデータが一致している

// 重複しているデータを削除
optionData = new Set(optionData);

同じ名前の部署が存在する場合は、Setを使用して重複したデータの削除を行います。

// 重複しないよう、ドロップダウンのデータを初期化
options.length = 0;

FormBridgeではデータの削除はこちらの方法で行います。

async function getOrganizationDataData() {　}部分

const kvOrganizationUrl = generateUrl(kvOrganizationData);

以下URLからgenerateUrl.jsを読み込み。generateUrl()を使用できるように設定します。

フォームブリッジの申込フォームに上限人数を実装 – cybozu developer network

さいごに

実装はなかなか苦労したため、お役に立てれば幸いです