【kintone】ルックアップとkintone UI Component v1 のドロップダウンを連携させる

今回はルックアップとkintone UI Component v1 のドロップダウンを連携させるサンプルです。
ルックアップしてきた値によって、kintone UI Component v1 のドロップダウンの選択肢を変更します。

🍄完成系のアプリ

マスタ用のアプリと、実際にドロップダウンを設置するアプリの2種類作ります。

🌼マスタアプリ

ドロップダウンのもとになるマスタ

レコード詳細はこんな感じ

🌼ドロップダウンを設置するアプリ

ルックアップで選択した武器に関連する技がドロップダウンの選択肢になります。

🍄アプリの準備

🌼選択肢マスタアプリの準備

武器を選んだら技が選択できるようにしたいと思います。
アプリの名前は「武器と技」としておきます。

フィールド種類	フィールド名	フィールドコード	備考
文字列(1行)	武器	武器	重複を禁止
テーブル	テーブル	テーブル
テーブル内　文字列(1行)	技	技

🌼ドロップダウンを設置するアプリの準備

ドロップダウンを設置するアプリはこんな感じ。

フィールド種類	フィールド名	フィールドコード	備考
ルックアップ	武器選択	武器選択	ルックアップの設定は画像参照
文字列(1行)	武器	武器
スペース	--	spWaza	ドロップダウンを設置するスペース
文字列(1行)	セリフ	セリフ

アプリのフォーム

ルックアップの設定

🍄kintone UI Component v1 の準備

ドロップダウンを設置するアプリのJavaScript / CSSでカスタマイズ に
kintone UI Component v1 のCDNを追加しておきます。

CDN : https://unpkg.com/kintone-ui-component/umd/kuc.min.js

🍄JavaScript

カスタマイズしていきましょう。
前回までの記事も参考にしていただいて、kintone UI Component v1 を

追加・編集画面表示でドロップダウンを設置します。

イベントの前に、ドロップダウンの選択肢になるリストを宣言しておきます。
kintone REST API で技を呼び出す（非同期処理）ので、async を付けておきます。

// 技のリスト
const listDropdown = [];

// 追加・編集画面表示イベント
kintone.events.on(
  ["app.record.create.show", "app.record.edit.show"],
  async (event) => {// 非同期処理するのでasyncをつけておく
  // ココにコード書く
  }
);

🌼ドロップダウンの選択肢となる、技のリストを取得しておく

// 技のリストを取得する
const rWaza = await kintone.api(
  kintone.api.url("/k/v1/records", true),
  "GET",
  { app: 319 }
);

// 武器ごとに技のリストを作っておく（ココちょっと難しいかも）
rWaza.records.forEach((r) => {
  listDropdown[r.武器.value] = [];
  r.テーブル.value.forEach((row) => {
    listDropdown[r.武器.value].push({ value: row.value.技.value });
  });
});

🌼スペースフィールドにドロップダウンを設置

kintone UI Component v1 でドロップダウンを設置します。
itemsを空っぽにしておくことと、idを設定しておくのがポイントです。
また、ドロップダウン変更イベントで文字列(1行)フィールドに選択した値を表示するようにしておきます。
（addEventListenerで書けます～）

// ドロップダウンを置くスペースの要素を取得
const spWaza = kintone.app.record.getSpaceElement("spWaza");

// ドロップダウンをつくる
const drWaza = new Kuc.Dropdown({
  label: "技選択",
  // ルックアップ時にドロップダウン要素を取得しやすいようにid設定しておく
  id: "drWaza",
  // items はからっぽにしておく
  items: [],
  visible: true,
  disabled: false,
});

// スペースフィールドにドロップダウンを置く
spWaza.appendChild(drWaza);

// ドロップダウンを選択したときのイベント
drWaza.addEventListener("change", () => {
  const r = kintone.app.record.get();
  // ドロップダウンで選択した値を文字列(1行)フィールド（フィールドコード：セリフ）にコピー
  r.record.セリフ.value = drWaza.value + " が完全に入ったのに・・・。";
  kintone.app.record.set(r);
});

🌼ルックアップ取得時の変更イベント

ルックアップフィールドの変更は取ってこれないので、代わりに、ルックアップでセットされる「文字列(1行)」の武器フィールドの変更を検知するようにします。

// ルックアップ取得で文字列(1行)の武器が変更したときのイベント
kintone.events.on(
  ["app.record.create.change.武器", "app.record.edit.change.武器"],
  (event) => {
    //ココにコード書く
  }
);

ルックアップ取得時には保存しておいた選択肢リストをドロップダウンの選択肢（drWaza.items）にセットします。ルックアップクリア時はドロップダウンの選択肢やセリフをクリアします。

// 技ドロップダウンの要素取得
const drWaza = document.getElementById("drWaza");

// ルックアップクリアの時は技リストとセリフをクリアする。
if (!event.changes.field.value) {
  drWaza.items = [];
  event.record.セリフ.value = "";
} else {
  // ルックアップ取得したらに武器ごとに保存しておいたリストを選択肢にセットする
  drWaza.items = listDropdown[event.changes.field.value];
}
return event;

全体的なコードはこちら

🍄まとめ

kintone UI Component v1 を使って、マスタアプリからルックアップでドロップダウンの中身を取得して表示することができました。ドロップダウン連携ができるとアプリの幅が拡がりそうです。

※作ったあとで気づいたのですが、ルックアップとドロップダウンではなく、ドロップダウンを2つ作って、連携させたほうが早いですね💦チャレンジしてみてください😋