関連レコードの参照先アプリに簡単レコード登録

目次

はじめに

関連レコードを利用する際に、参照先のアプリに新規のレコードを追加するのはちょっと時間がかかってしまいます。
関連レコードを利用しているアプリから、参照先での新規のレコード追加画面に値を引継ぎつつ遷移できれば、新規レコード作成の手間を減らせます。
このTipsでは、関連レコードの参照先アプリへのレコード登録を簡単に実現できるカスタマイズを紹介します。

標準機能での遷移、カスタマイズを適用した後の遷移のイメージ図はこちらです。

標準機能での遷移

本Tipsのカスタマイズを適用した後の遷移

アプリアクション (External link) を利用することで、値を引継ぎつつ新規のレコード登録も可能です。
カスタマイズを使うことで、レコードの情報を参照して新規レコード作成ボタンを非表示にしたり、参照先の新規レコード作成時にルックアップを併せて使うことができます。

準備

この本Tipsのサンプルを作成するにあたって、 アプリストア (External link) から 営業支援パック (External link) を追加してください。

顧客管理アプリに、関連先のアプリに遷移するためのボタンを設置する「スペースフィールド」を関連レコードが表示される箇所の近くに設置します。

ここでスペースフィールドの要素IDは「jump_button」と設定しました。

顧客管理アプリで新規レコード追加に遷移するボタンを押下したとき、ルックアップの値が入力するように ルックアップの取得を自動で行うの処理も盛り込んだサンプルを作成しました。

このカスタマイズでは、顧客管理アプリ内の関連レコードのアプリIDを取得し、設置されたボタンを押下することで、案件管理アプリの新規レコード追加画面に遷移します。

サンプルプログラム

次のJavaScriptコードを顧客管理アプリの設定の「JavaScript / CSSでカスタマイズ」に追加してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/*
 * Relational record of sample program
 * Copyright (c) 2024 Cybozu
 *
 * Licensed under the MIT License
*/
(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    const field_check = event.record.顧客名.value;
    // 元アプリの引継ぎ対象フィールドでの入力を確認
    if (!field_check) {
      return;
    }
    const mySpaceFieldButton = kintone.app.record.getSpaceElement('jump_button');
    // ボタンを設置
    const button = document.createElement('button');
    button.textContent = '追加登録';
    button.classList.add('kintoneplugin-button-normal');
    button.addEventListener('click', () => {
      // 関連レコードのアプリIDの取得
      const related = kintone.app.getRelatedRecordsTargetAppId('案件一覧');
      // 関連レコードの新規作成画面のURLへのジャンプ
      const new_window = window.open('/k/' + related + '/edit');
      new_window.addEventListener('load', () => {
        window.postMessage(new_window.kintone !== null, location.origin);
      });
      window.addEventListener('message', (function() {
        return function field_set() {
          // 新規レコード側のフィールドを指定してsetする
          const new_app = new_window.kintone;
          const new_record = new_app.app.record.get();
          new_record.record['顧客名'].value = field_check;
          // ここから新規で開いたkintone画面でルックアップ先の更新処理を行う
          new_record.record['顧客名'].lookup = true;
          new_app.app.record.set(new_record);
          window.removeEventListener('message', field_set, false);
        };
      })(), false);
    });
    mySpaceFieldButton.appendChild(button);
  });
})();

ボタンデザインをkintoneライクにするため、 51-modern-defaultで紹介されている51-modern-default.cssも適用ください。

使用したAPI

注意事項

  • Chromeブラウザーでのみ動作を確認しています。

最後に

新規レコードに1クリックで飛べて、フィールドにも値が入ります。

このカスタマイズを適用することで、「関連アプリのレコード詳細画面参照+新規レコード登録+値をはじめから入力」という操作が不要になります。
ぜひ、お試しください!

information

このTipsは、2024年8月版kintoneで動作を確認しています。