【Garoon JavaScript API】kintoneの事前費用申請アプリから内容を引き継いでガルーンの支払申請を作成する

Garoon 開発 Tips

【Garoon JavaScript API】kintoneの事前費用申請アプリから内容を引き継いでガルーンの支払申請を作成する

概要

「【Garoon JavaScript API】出張申請から内容を引き継いで旅費申請を作成する」に続いて、Garoon のワークフローカスタマイズ第 2 弾をお届けします。
今回は Garoon と kintone を連携して、kintone の事前費用申請アプリから内容を引き継いで Garoon の支払申請を作成するサンプルの紹介です。
第 1 弾は Garoon のワークフロー同士の処理でしたが、今回は kintone と Garoon での内容引き継ぎ処理になります。

前提条件と注意事項

このカスタマイズには、クラウド版 Garoon またはパッケージ版 Garoon 4.6 以降と kintone スタンダードコースの契約が必要です。
ワークフロー JavaScript カスタマイズは、JavaScript を適用した後に申請されたワークフローが対象となります。
それ以前に申請されたワークフローには適用されません。

できること

何かしら予算を使う際、使う用途と金額などが分かった時点で事前に費用申請を提出して、実際に支払った後にまた支払申請を提出するというルールがある会社も多いと思います。
用途・金額・申請者情報など、ほとんと同じ内容を記載するのに毎回コピー&ペーストはたいへんですよね。

今回は、kintone で事前費用申請を、Garoon で支払申請を管理しているケースを想定して、以下のカスタマイズサンプルを紹介します。

kintone の事前費用申請アプリからボタンクリックで内容を引き継いで Garoon の支払申請を作成する。

ここでは kintone の「レコード詳細画面を表示した後のイベント」と Garoon の「ワークフロー申請の作成画面を表示したときのイベント」を利用します。

完成イメージ

例）kintone の「事前費用申請」アプリと Garoon の「支払申請」ワークフローがあり、その項目の一部が同じ内容の場合。

kintone の「事前費用申請」アプリにある、一部項目の内容のコピーと、申請した「事前費用申請」の該当レコードの URL を、Garoon の「支払申請」ワークフローに自動で入力するサンプルカスタマイズの完成イメージです。

kintone の「事前費用申請」アプリのレコード詳細画面に[支払申請を提出する]ボタンが表示されます。
[支払申請を提出する]ボタンをクリックすると、別タブで Garoon の「支払申請」ワークフローの作成画面が表示されます。
自動的に、標題・申請者・所属本部・事前費用申請番号・予算番号・内容・金額・「事前費用申請」の該当レコードの URL が入力されます。

今回は kintone のアプリと Garoon のワークフロー両方に JavaScript ファイルを充てカスタマイズしていきます。まずは kintone 側で必要になる準備について順を追って説明していきます。

kintone アプリの設定手順

①事前費用申請アプリを作成する

最初は kintone の事前費用申請アプリの準備から始めます。アプリストアに事前費用申請アプリがないので、今回は以下のフィールドを配置してアプリを作成します。

アプリの具体的な作成方法は、以下のヘルプを参照してください。
アプリをはじめから作成する | kintone ヘルプ

フィールドは以下のとおり設定してください。フィールドコードは、JavaScript コード内でそれぞれのフィールドを指定するための一意の文字列なので、間違えないように設定してくださいね。
必要に応じてプロセス管理も設定してください。

フィールド名	フィールドコード	フィールドタイプ	備考
所属本部	所属本部	ドロップダウン	必須項目に設定
事前費用申請番号	事前費用申請番号	文字列（一行）	必須項目に設定
予算番号	予算番号	文字列（一行）	必須項目に設定
費用標題	費用標題	文字列（一行）	必須項目に設定
費用内訳	費用内訳	文字列（一行）
申請金額（税抜き）	申請金額	数値	必須項目に設定
作成者	作成者	作成者
作成日時	作成日時	作成日時
－	send_button_space	スペース	「send_button_space」は要素IDのところに設定ボタンを設置する場所になります。

②JavaScript/CSSファイルを適用する

アプリが完成したら、そこにカスタマイズを適用します。
ここでは以下の画像のように、Garoon の支払申請ワークフローに提出するボタンを配置し、レコードのデータをセッションストレージに保存します。
Garoon に引き継ぐ一時的なデータの保存のために、第1弾と同様にセッションストレージに保存します。

事前費用申請アプリの「アプリの設定 > JavaScript/CSS でカスタマイズ」に以下のサンプルコードを設定します。
具体的なファイルの適用方法については JavaScriptやCSSでアプリをカスタマイズする | kintone ヘルプを参照してください。

PC用のJavaScriptファイル

https://js.cybozu.com/jquery/3.1.1/jquery.min.js（jQuery ライブラリ）
sendDataToPayment.js（詳細後述）

PC用のCSSファイル

51-modern-default.css
kintone 標準パーツに似せたボタン作成のための CSS です。
GitHub で公開しているコードをコピー＆ペーストして左記の名前で保存してアップロードください。

設定画面は以下のようになっていると思います。

サンプルプログラム（sendDataToPayment.js）

kintone の「レコード詳細画面を表示した後のイベント」を利用して記述しています。

次のサンプルコードをエディタにコピーして、ファイル名を「sendDataToPayment.js」、文字コードを「UTF-8」で保存します。
ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
適用する際は、26 行目の「cid=XXX&fid=XXX」の XXX 部分は各フォーム ID に書き換えてください。
フォーム ID は、Garoon のワークフローの申請の作成画面の URL にて確認してください。
例）https://sample.cybozu.com/g/send_form.csp?cid=12&fid=345 ←この 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
42
43
44
45
46
47
48
49
50
51
52
53
54


/**
 * kintone JavaScript APIを使ったサンプルプログラム
 * Copyright (c) 2017 Cybozu
 *
 * Licensed under the MIT License
 */
(function() {
  'use strict';

  // 申請ボタンを押したときの挙動
  function onclickSendButton(event) {
    const record = event.record;
    const appId = kintone.app.getId();
    const recordId = kintone.app.record.getId();

    // セッションストレージにデータを保存
    sessionStorage.setItem('pre_cost_title', record.費用標題.value);
    sessionStorage.setItem('pre_cost_department', record.所属本部.value);
    sessionStorage.setItem('pre_cost_number', record.事前費用申請番号.value);
    sessionStorage.setItem('pre_cost_budget_number', record.予算番号.value);
    sessionStorage.setItem('pre_cost_amount', record.申請金額.value);
    sessionStorage.setItem('pre_cost_app_id', appId); // アプリIDを保存
    sessionStorage.setItem('pre_cost_record_id', recordId); // レコード番号を保存

    // 支払申請を開く
    window.open('/g/workflow/send_form.csp?cid=×××&fid=×××'); // 「cid=XXX&fid=XXX」のXXX部分は書き換えてください

  }

  // 値を送信するボタンを追加する
  function addSendButton(event) {
    const space = kintone.app.record.getSpaceElement('send_button_space');
    const button = document.createElement('input');
    button.setAttribute('type', 'button');
    button.setAttribute('id', 'send_data_button');
    button.setAttribute('value', '支払申請を提出する');
    button.setAttribute('class', 'kintoneplugin-button-normal');
    button.setAttribute('class', 'kintoneplugin-button-normal');
    button.setAttribute('style', 'background-color: #FFCC00');
    space.appendChild(button);
    const sendButton = document.getElementById('send_data_button');

    sendButton.onclick = function() {
      onclickSendButton(event);
    };

  }

  // レコード詳細画面表示時のイベント
  kintone.events.on('app.record.detail.show', (event) => {
    addSendButton(event);
    return event;
  });
})();

これで kintone アプリの設定は完了です！ボタンクリックで別タブが開きましたでしょうか？ここからは Garoon の設定に移っていきます。準備項目が多めですが、もう一息頑張っていきましょう。

Garoon ワークフローの設定手順

ワークフローの項目の内容は、会社さんによって異なります。
ここでは、完成イメージの支払申請の申請フォームに JavaScript カスタマイズを適用する方法を説明します。

①Garoon ワークフローの申請フォームを作成する

まずは kintone でアプリを準備したのと同じく、Garoon で以下の項目を配置して、支払申請ワークフローの申請フォームを作成していきます。
申請フォームの作成方法については、Garoon ヘルプ - 申請フォームの作成の流れクラウド版・パッケージ版を参照してください。
フォーム作成は少し手間がかかるので、今回はそのまま読み込んで使えるサンプルフォームもご用意しています。（後述）

それぞれの項目は以下のとおり設定してください。
ここでも項目コードは、JavaScript コード内でそれぞれの項目を指定するための一意の文字列なので、間違えないように設定してくださいね。

項目名	項目タイプ	項目コード	備考
標題	文字列（１行）（標準項目）	title	必須項目に設定
所属本部	メニュー	department	必須項目に設定
事前費用申請番号	文字列（1行）	number	必須項目に設定
事前費用申請URL	文字列（複数行）	pre_cost_url	必須項目に設定
（空白行）	（空白行）	－	「空白行を追加する」で設定
予算番号	文字列（1行）	budget_number	必須項目に設定
内容	文字列（複数行）	item	必須項目に設定
金額	数値	amount	必須項目に設定
消費税	数値	tax
合計金額	自動計算	total	計算内容欄は以下を設定合計（選択項目の値の総和を計算します）金額消費税

上記のとおり設定が完了したら、土台となる申請フォームの作成は完了です。

サンプルフォームのダウンロードについて

まずは動きを見てみたいという方向けに、そのまま読み込んで使っていただけるサンプルの申請フォームを XML 形式でご用意しました。
完成イメージにある支払申請の申請フォームです。

以下のリンクを右クリックして、ファイルを保存してください。
sample_form.xml

この XML ファイルを、「申請フォーム一覧」から読み込んでいただくと、「【サンプル】支払申請」という申請フォームが追加されます。項目コードも設定済みの状態です。
サンプルフォームを追加する方法については、次のページを参照してください。
ワークフローのサンプルフォームを利用するにはどうしたらよいですか？

経路情報は各環境で異なり、存在しない経路を読み込むことはできないので、上記の XML では経路情報を省いています。
申請フォームを有効化するには、経路情報の設定が必要になりますので、そちらも忘れず設定してください。

②JavaScriptファイルを適用する

申請フォームの作成が完了したので、あと一歩です。ここから作成した申請フォームに JavaScript ファイルを適用していきます。

ワークフローの JavaScript / CSS によるカスタマイズは初期値では「許可しない」設定になっています。
そのため、まずはその設定を「許可する」に変更します。

[システム管理（各アプリケーション）> ワークフロー > 一般設定]の画面を表示します。
[一般設定]の「JavaScript / CSS によるカスタマイズの許可」項目を「許可する」を選択します。
設定変更後、「適用する」をクリックします。

許可設定が完了したらいよいよ JavaScript ファイルを申請フォームに適用していきます。
以下の画像のように、セッションストレージに保存されている kintone の事前費用申請アプリのデータを取得して、ワークフローの作成画面に値をセットするというカスタマイズになります。

サンプルプログラム（receiveDataFromPreCost.js）と適用方法

Garoon の「ワークフロー申請の作成画面を表示したときのイベント」を利用しています。

次のサンプルコードをエディタにコピーして、ファイル名を「receiveDataFromPreCost.js」、文字コードを「UTF-8」で保存します。
ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
適用する際は、25 行目の「https://sample.cybozu.com/k/」の sample の部分はご自身の kintone 環境のドメイン名に書き換えてください。

 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


/**
 * Garoon JavaScript APIを使ったサンプルプログラム
* Copyright (c) 2017 Cybozu
*
* Licensed under the MIT License
*/
(function() {
  'use strict';

  garoon.events.on('workflow.request.create.show', (event) => {
    // セッションストレージに値がない場合は抜ける
    if (!sessionStorage.getItem('pre_cost_title')) {
      return event;
    }

    const request = event.request;

    // セッションストレージからデータを取得
    request.items.title.value = sessionStorage.getItem('pre_cost_title');
    request.items.department.value = sessionStorage.getItem('pre_cost_department');
    request.items.number.value = sessionStorage.getItem('pre_cost_number');
    request.items.budget_number.value = sessionStorage.getItem('pre_cost_budget_number');
    request.items.item.value = sessionStorage.getItem('pre_cost_title');
    request.items.amount.value = sessionStorage.getItem('pre_cost_amount');
    request.items.pre_cost_url.value = 'https://sample.cybozu.com/k/' // 「sample.cybozu.com」のsampleの部分は書き換えてください。
            + encodeURIComponent(sessionStorage.getItem('pre_cost_app_id')) + '/show#record='
            + encodeURIComponent(sessionStorage.getItem('pre_cost_record_id'));

    // セッションストレージからデータを削除
    sessionStorage.removeItem('pre_cost_title');
    sessionStorage.removeItem('pre_cost_budget_number');
    sessionStorage.removeItem('pre_cost_department');
    sessionStorage.removeItem('pre_cost_amount');
    sessionStorage.removeItem('pre_cost_app_id');
    sessionStorage.removeItem('pre_cost_record_id');

    return event;
  });
})();

「申請フォーム情報」部分の右端にある「JavaScript / CSS によるカスタマイズ」をクリックします。
「カスタマイズ」項目を「適用する」を選択し、1. で保存した「receiveDataFromPreCost.js」ファイルを追加し、「設定する」をクリックします。

以上ですべての設定は完了です！お疲れさまでした！最初にお見せした完成イメージのとおり、動けば成功です。

おわりに

Garoon JavaScript API のカスタマイズサンプル第二弾、kintone と Garoon のワークフロー連携の方法をお届けしました。面倒なコピー&ペースト作業もなくなりましたね。
運用に合わせて、コピーする項目を設定していただくことで、皆さんの環境でもお使いいただけると思います。
ぜひいろいろと作り変えてみてください。

Garoon 開発 Tips