kintone 別アプリのテーブルをコピーする Javascript

2025.02.14 2025.02.15

kintoneで別アプリのテーブルをコピーするJavascriptです。

kintone 別アプリのテーブルをコピーする Javascript

ルックアップで別アプリのテーブル情報を持ってくるというカスタマイズになります。例えば、単価マスタアプリに設定したテーブル情報を、見積アプリに設定したテーブルへマルっとコピーしたいって場合に使える方法です。

プラグインなしで対応できるので、ぜひ業務の効率化に役立ててください。

ここでは kintoneで別アプリのテーブルをコピーする方法 を紹介します。

ルックアップで別アプリのテーブルをコピーする

ルックアップで別アプリのテーブルをコピーする方法について説明します。

完成形の確認

まずは完成形の確認です。

ルックアップで別アプリのテーブルがコピーされている様子です。

ルックアップをで別アプリのテーブルがコピーされている様子

コピー元となるサンプル画面

コピー元となる画面です。仮で「単価マスタ」とします。

コピー元となるサンプル画面

フィールド名とフィールドコードは一緒です。

仮のデータも用意します。種別コードのルックアップで単価マスタの単価テーブルを取得する仕様となります。

コピー元となるサンプル画面のデータ１

コピー元となるサンプル画面のデータ２

コピー先となるサンプル画面

コピー先となる画面です。

コピー先となるサンプル画面

フィールド名とフィールドコードは一緒です。

ルックアップで作成した「種別コード」フィールドをもとに、「種別」フィールドと「種別のレコード番号」フィールドを設定をします。

コピー先となるサンプル画面のルックアップ設定の様子

テーブル内の品目、単価、単位をコピーしてきます。テーブルのフィールド名は、コピー元と合わせておくと、コーディングが楽ですよ。

テーブル内の品目、単価、単位がコピーされるフィールド

サンプルコード

ルックアップで別アプリのテーブルをコピーするコードです。

「kintone REST API Client」が必要となるので、コードアップロード時に一緒にURL指定をしましょう。

https://js.cybozu.com/kintone-rest-api-client/5.0.5/KintoneRestAPIClient.min.js


(() => {
  'use strict';

  // 種別コードルックアップ時、単価マスタの単価テーブル取得
  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イベントでは使えないので外に出す。
  // https://js.cybozu.com/kintone-rest-api-client/5.0.5/KintoneRestAPIClient.min.js
  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();
    if ( res.record.単価テーブル.value != undefined ) {
      const count = res.record.単価テーブル.value.length;
      // テーブル初期化
      obj.record.単価テーブル.value = [];
      for (let i = 0; i < count; i++) {
        // レコード追加
        obj.record.単価テーブル.value.push({
          value: {
            品目: {type: res.record.単価テーブル.value[i].value.品目.type, value: res.record.単価テーブル.value[i].value.品目.value},
            単価: {type: res.record.単価テーブル.value[i].value.単価.type, value: res.record.単価テーブル.value[i].value.単価.value},
            単位: {type: res.record.単価テーブル.value[i].value.単位.type, value: res.record.単価テーブル.value[i].value.単位.value},
            数量: {type: 'NUMBER', value: ''},
            金額: {type: 'CALC', value: '0'},
          }
        });
      }
    }
    kintone.app.record.set(obj);
  };
})()

フィールド値変更時イベントでは、ルックアップフィールドの変更を検知することができないので、ルックアップで「種別のレコード番号」を取得してきたイベントをトリガーにしています。

アプリの設定がら「JavaScript / CSSでカスタマイズ」で作ったjsファイルをアップしましょう。

実行結果

それでは、実行結果を確認していきましょう。

初期表示の画面です。

初期表示の画面

種別コードを入力してルックアップした様子です。単価テーブルが更新されました。

種別コードを入力してルックアップした様子

続いて種別コードを変更してルックアップした様子です。単価テーブルが上書きされました。

種別コードを入力してルックアップしてテーブルが上書きされた様子

ルックアップをクリアすれば、初期表示に戻りました。

ルックアップをクリアした様子

ふむふむ、いい感じですな。

不要フィールドを非表示にする

このままでも使えるんだけど「種別のレコード番号」フィールドが見えているとカッコ悪いので、非表示にしましょう。

こちらのコードを貼り付ければOKです。


  // 新規・編集・詳細表示時にレコードID非表示
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.detail.show',
  ], (event) => {
    kintone.app.record.setFieldShown("種別のレコード番号", false);
    return event;
  });

余計なフィールドが消えて、スマートになりましたね。

不要フィールドを非表示にした様子