フォームブリッジでイベントごとに異なる選択肢をドロップダウンに反映させたい

kintone 開発相談
1

フォームブリッジを使って、外部向けの申込フォームを構築しています。 このフォームでは、回答者がkViewerルックアップを使って「イベントコード（コードNo）」を選択し、 そのコードに紐づくイベント情報をイベント管理アプリから取得しています。

■ 実現したいこと

  • イベント管理アプリでは、各イベント（レコード）に対して、20の項目から複数をチェックボックスで選択しています

  • この「選択された項目」だけを使って、フォームブリッジ上で 第一希望〜第三希望のドロップダウンの選択肢として表示したいと考えています

  • イベントによって選ばれている項目が異なるため、選択肢はイベントごとに動的に変わる必要があります

■ 技術的背景

  • イベント管理アプリには、レコードを一意に識別する「コードNo」があり、 フォームブリッジでは、kViewerルックアップでこのコードを取得しています

  • JavaScriptで、取得したコードNoをもとにkintone REST APIなどで該当レコードを取得し、 チェックボックスで選ばれている項目のみを抽出して、ドロップダウンに反映させる処理を検討中です

■ 質問したいこと

  1. このように、イベントごとに異なる選択肢をフォームブリッジのドロップダウンに反映させる実装は可能でしょうか？

  2. kViewerルックアップで取得した値をもとに、フォームブリッジ内で他のフィールドの選択肢を制御する事例があれば教えていただきたいです

  3. 実装時の注意点や、より適切な方法があればご教示(async () => {
    // ルックアップで取得されたコードNoを取得
    const codeNo = document.querySelector(‘#コードNoフィールドのID’).value;
    if (!codeNo) return;

    // 該当レコードを取得
    const resp = await fetch(‘https://example.cybozu.com/k/v1/records.json’, {
    method: ‘POST’,
    headers: {
    ‘X-Cybozu-API-Token’: ‘********’,
    ‘Content-Type’: ‘application/json’
    },
    body: JSON.stringify({
    app: ‘123’, // イベント管理アプリのID
    query: コードNo = "${codeNo}",
    fields: [‘項目チェックボックスフィールド’]
    })
    });

    const data = await resp.json();
    const record = data.records[0];
    if (!record) return;

    // 選択された項目を取得
    const selectedItems = record[‘項目チェックボックスフィールド’].value;

    // 希望項目（第一〜第三希望）のセレクトボックスに選択肢を追加
    [‘#第一希望’, ‘#第二希望’, ‘#第三希望’].forEach(selector => {
    const select = document.querySelector(selector);
    if (!select) return;

    select.innerHTML = ''; // 一度選択肢をクリア

selectedItems.forEach(item => {
  const option = document.createElement('option');
  option.value = item;
  option.textContent = item;
  select.appendChild(option);
});

    });
    })();