Kintoneで親と子アプリ間でフィールドの値を引き継いでレコード作成するJavaScript

概要

kintoneにて、ある顧客に関連する詳細データを別アプリで作りたいとき、
詳細データ用アプリで親アプリでの顧客IDや電話番号手入力での手間があるので、
ボタン1発でデータを引き継いでレコード作成できるJavaScriptを作りました。

▼イメージ

導入方法

親と子、それぞれのアプリごとに下記を導入してください。

親アプリには下記JavaScriptを入れます。

parent.js

(function() {
  'use strict';

  var RELATED_APP_ID = 'your_child_app_id'; // 子アプリのIDを設定

  // レコード詳細画面が表示されたときのイベント処理
  kintone.events.on('app.record.detail.show', function(event) {
    // ボタンを検索して、既に存在する場合は何もしない
    var buttonId = 'create_related_record_button';
    if (document.getElementById(buttonId) !== null) {
      return;
    }

    // 新規関連レコード作成ボタンを作成
    var createNewRecordButton = function(text, spaceElementId, fieldCode) {
      var button = document.createElement('button');
      button.id = buttonId;
      button.innerText = text;
      button.style.marginTop = '20px';

      button.addEventListener('click', function() {
        var record = event.record;
        var fieldValue = record[fieldCode].value;
        var queryString = '?' + fieldCode + '=' + encodeURIComponent(fieldValue);
        var createRecordUrl = '/k/' + RELATED_APP_ID + '/edit' + queryString;
        window.open(createRecordUrl, '_blank');
      });

      var spaceElement = kintone.app.record.getSpaceElement(spaceElementId);
      if (spaceElement) {
        spaceElement.appendChild(button);
      }
    };

    // 新規関連レコード作成ボタン追加
    // 'your_space_element_id', 'your_field_id'は実環境にあわせて書き換えてください。
    createNewRecordButton('関連レコードの新規作成', 'your_space_element_id', 'your_field_id');
  });

})();

※以下は自身の環境に合う適切な値に置き換えてください。
your_child_app_id→子アプリのID（"30"など）
your_space_element_id→ボタンを設置する要素（スペース要素）のID（"space_element"など）
your_field_id→keyとして子アプリに連動する要素のID（'telNumber'など）

子アプリには下記JavaScriptを入れます。

child.js

(function() {
  'use strict';

  // URL クエリパラメータからパラメータの値を取得する関数
  function getQueryParameter(paramName) {
    var query = window.location.search.substring(1);
    var params = query.split('&');

    for (var i = 0; i < params.length; i++) {
      var pair = params[i].split('=');
      if (decodeURIComponent(pair[0]) === paramName) {
        return decodeURIComponent(pair[1].replace(/\+/g, ' '));
      }
    }
    return null; // パラメータが存在しない場合はnullを返す
  }

  // 子アプリの新規レコード追加画面表示時にURLのクエリパラメータからフィールド値を設定
  kintone.events.on('app.record.create.show', function(event) {
    // 取得フィールド名は設定や環境変数から取得できるようにする
    var fieldName = 'your_field_name'; // 実際に設定するフィールド名に変更
    var fieldValue = getQueryParameter(fieldName);

    if (fieldValue) {
      // 取得した値をレコードの対応するフィールドにセット
      event.record[fieldName]['value'] = fieldValue;
    }

    // 変更をkintoneに反映
    return event;
  });

})();

※以下は自身の環境に合う適切な値に置き換えてください。
your_field_name→親アプリから受け取った値を入れる要素のID（"telNumber"など）

終わりに

じっくりとPCに向き合えるならこのような機能は不要かもしれませんが、分秒を争うコールセンターではこのような仕組みがあると情報入力に集中できるので作成してみました。
デフォルト機能のルックアップでも同じように情報を取得してフィールドを埋められるかもしれませんが、そもそもルックアップするためのkeyが最初から入っていてほしい場合などに有効かと思います。

さらに堅牢性を高めるために、子アプリのレコード画面で自動入力されたフォームを利用者が編集できないようにすると、ミスがより減るかも知れません。