[FormBridge] 动态更改下拉选项

介绍

我们将向您展示如何从 kintone 检索和生成 FormBridge 下拉选项。
此外，包括一个规范，根据所选值缩小较低层次结构中选项的值。
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;
    });
  }

})();

评论

函数 initDropdown(fieldCode) { } 部分

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

通过将FormBridge中设置的域代码设置为fieldCode，就可以得到选项的值。我们将通过重写这个获取的值来设置选项的值。
很难找到这个

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

设置条件。

isDepartment
更换零件时
isSection && isMatchedDepartment
如果部门变更，部门数据相同
isGroup && isMatchedDepartment && isMatchedSection
如果部门发生变化，且部门和科室数据一致

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

如果存在同名部门，使用设置消除重复数据。

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

FormBridge 使用此方法删除数据。

异步函数 getOrganizationDataData() { } 部分

const kvOrganizationUrl = generateUrl(kvOrganizationData);

从下面的 URL 加载 generateUrl.js。设置为使用generateUrl()。

表格桥申请表实现人数上限 – cybozu 开发者网

最后

我很难实现它，所以我希望你能帮助

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308623515.html