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

目次

はじめに

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

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

  • 標準機能での遷移

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

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

準備

この本 Tips のサンプルを作成するにあたって、 アプリストア (External link) から 営業支援(SFA)パック (External link) を追加してください。
顧客情報アプリの会社名のフィールドコードと案件情報の顧客名のフィールドコードを「company」に変更し、関連レコードのフィールドコードは「relation」にしてください。

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

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

営業支援(SFA)パック (External link) で追加される案件情報のアプリでは、すでに顧客情報アプリの「company」のフィールドを参照するルックアップフィールドが設定されており、部署名とご担当者名が引き継がれる形になっています。

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

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

サンプルプログラム

 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
/*
 * Relational record of sample program
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
*/
(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    const field_check = event.record.company.value;
    // 元アプリの引継ぎ対象フィールドでの入力を確認
    if (!field_check) {
      return;
    }
    const mySpaceFieldButton = kintone.app.record.getSpaceElement('jump_button');
    // ボタンを設置
    const $button = $('<button title="案件情報アプリに追加する" class="kintoneplugin-button-normal">追加登録</button>');
    $button.click(() => {
      // 関連レコードのアプリIDの取得
      const related = kintone.app.getRelatedRecordsTargetAppId('relation');
      // 関連レコードの新規作成画面の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.company.value = field_check;
          // ここから新規で開いたkintone画面でルックアップ先の更新処理を行う
          new_record.record.company.lookup = true;
          new_app.app.record.set(new_record);
          window.removeEventListener('message', field_set, false);
        };
      })(), false);
    });
    $(mySpaceFieldButton).append($button);
  });
})();

上記のサンプルコード内でのボタン表示は Cybozu CDN から jQuery https://js.cybozu.com/jquery/2.2.4/jquery.min.js を利用しています。
また新デザインへ対応するために、 51-modern-default で紹介されている 51-modern-default.css も適用ください。

使用した API

注意事項

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

最後に

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

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