kintoneでテーブルをルックアップする


今回は、ルックアップでテーブルを持ってくるというカスタマイズをしてみましょう。

アプリの準備

まずはルックアップされる側のアプリを作り、
それを再利用してルックアップする側のアプリを作ります。

ルックアップされる側

フィールド種類 フィールドコード 備考
文字列(1行) テンプレート名 重複禁止
文字列(1行) 品名 テーブル内フィールド
数値 個数 テーブル内フィールド
数値 単価 テーブル内フィールド
計算 金額 個数*単価(テーブル内フィールド)

ルックアップされるデータの準備

以下の2件レコードを登録しておきます。

ルックアップする側

フィールド種類 フィールドコード 備考
ルックアップ ルックアップ ルックアップ設定は後述
文字列(1行) テンプレート名 ルックアップでコピーする
文字列(1行) 品名 テーブル内フィールド
数値 個数 テーブル内フィールド
数値 単価 テーブル内フィールド
計算 金額 個数*単価(テーブル内フィールド)
計算 合計 SUM(金額)

JavaScript

kintone REST API Client を入れておきます。
https://unpkg.com/@kintone/rest-api-client@latest/umd/KintoneRestAPIClient.min.js

フィールド値変更時イベントではルックアップフィールドの変更を検知することができないので、
ルックアップで文字列(1行)(テンプレート名)を取得してきたのをトリガーにします。

kintone.events.on(
    [
      "app.record.create.change.テンプレート名",
      "app.record.edit.change.テンプレート名",
    ],
    (event) => {
      // レコード番号
      const rId = event.record.ルックアップ.value;
      if (!rId) { // クリアのとき消す用
        event.record.テーブル.value = [];
      } else { // ルックアップしてきた時用
        getTable(kintone.app.getLookupTargetAppId("ルックアップ"), rId);
      }
      return event;
    }
  );

  // async await は changeイベントでは使えないので外に出す。
  const getTable = async (appId, rId) => {
    const client = new KintoneRestAPIClient();
    const res = await client.record.getRecord({
      app: appId,
      id: rId,
    });
    // とってきた値をテーブルにセット
    const obj = kintone.app.record.get();
    obj.record.テーブル.value = res.record.テーブル.value;
    kintone.app.record.set(obj);
  };

こんな動きをします

あたかもテーブルがルックアップされているかのような動き!