Tips

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

目次

はじめに

固定リンクがコピーされました

関連レコードを利用する際に、参照先のアプリに新規のレコードを追加するのはちょっと時間がかかってしまいます。
関連レコードを利用しているアプリから、参照先での新規のレコード追加画面に値を引継ぎつつ遷移できれば、新規レコード作成の手間を減らせます。
この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で動作を確認しています。