【Kintone JavaScript / CSSカスタマイズ】kintoneのアプリのテーブルをルックアップ

便利なkintoneのルックアップですが、テーブルはルックアップで他のアプリから持ってこれないのは残念なところです。
今回は解決策としてJavaScriptでルックアップ実行時にテーブルも取得するように実装してみます。

Kintoneとは？

Kintoneとは、Cybozuが提供する業務アプリケーションを作成・運用できるクラウドサービスです。Kintoneを使うことで、コードをほとんど書かずに様々な業務アプリケーションを構築し、業務プロセスを効率化することができます。
また、JavaScriptを使ってカスタマイズすることで、より高度な機能を実装することも可能です。

KintoneのJavaScript開発

KintoneのJavaScript開発では、Kintoneのカスタマイズ機能を利用して、フォームやレコードの表示・動作を制御したり、外部のシステムと連携させたりすることができます。
アプリの設定画面からJavaScriptファイルをアップロードすることでアプリ上で利用可能になります。

Kintoneのルックアップアプリを作成

最初に今回使うルックアップされるアプリとするアプリを次のように作りました。

ルックアップ先アプリ:テーブルを取得する方のアプリ

ルックアップ元アプリ:テーブルを参照する方のアプリ

ルックアップの設定の次のようになります。

ルックアップする先はレコード番号になります。

コード

// レコード作成画面と編集画面で、'title'フィールドが変更されたときにトリガーされる
kintone.events.on(
    [
      "app.record.create.change.title",
      "app.record.edit.change.title",
    ],
    (event) => {
      // レコードからルックアップフィールドの値を取得
      const rId = event.record.titlelookup.value;
      
      if (!rId) { // ルックアップフィールドが空（クリアされた時）の処理
        event.record.lookuptable.value = [];
      } else { // ルックアップフィールドに値がある時の処理
        // 関連するテーブルデータを取得する関数を呼び出す
        getTable(kintone.app.getLookupTargetAppId("titlelookup"), rId);
      }
      // イベントオブジェクトを返す
      return event;
    }
);

// テーブルデータを取得する非同期関数
const getTable = async (appId, rId) => {
    // Kintone REST APIクライアントをインスタンス化
    const client = new KintoneRestAPIClient();
    // 非同期でレコードデータを取得
    const res = await client.record.getRecord({
      app: appId,
      id: rId,
    });
    // 取得したレコードデータのテーブルフィールドを、現在のレコードのテーブルフィールドにセット
    const obj = kintone.app.record.get();
    obj.record.lookuptable.value = res.record.lookuptable.value;
    kintone.app.record.set(obj);
};

今回はkintone REST APIを利用しているので、次のJavaScriptファイルを指定しています。
https://unpkg.com/@kintone/rest-api-client@latest/umd/KintoneRestAPIClient.min.js

以下のような動作をします。

ルックアップ元アプリにテーブルとして次のような内容を登録しました。

ルックアップ元アプリで対象のレコードを選択

ルックアップ先アプリでテーブルがコピーされました。