【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 です。
|
|
これで kintone アプリの設定は完了です!ボタンクリックで別タブが開きましたでしょうか?ここからは Garoon の設定に移っていきます。準備項目が多めですが、もう一息頑張っていきましょう。
Garoon ワークフローの設定手順
ワークフローの項目の内容は、会社さんによって異なります。
ここでは、完成イメージの支払申請の申請フォームに JavaScript カスタマイズを適用する方法を説明します。
①Garoon ワークフローの申請フォームを作成する
まずは kintone でアプリを準備したのと同じく、Garoon で以下の項目を配置して、支払申請ワークフローの申請フォームを作成していきます。
申請フォームの作成方法については、Garoon ヘルプ - 申請フォームの作成の流れ
クラウド版
・
パッケージ版
を参照してください。
フォーム作成は少し手間がかかるので、今回はそのまま読み込んで使えるサンプルフォームもご用意しています。(後述)
それぞれの項目は以下のとおり設定してください。
ここでも項目コードは、JavaScript コード内でそれぞれの項目を指定するための一意の文字列なので、間違えないように設定してくださいね。
項目名 | 項目タイプ | 項目コード | 備考 |
---|---|---|---|
標題 | 文字列(1行)(標準項目) | 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 のワークフロー連携の方法をお届けしました。面倒なコピー&ペースト作業もなくなりましたね。
運用に合わせて、コピーする項目を設定していただくことで、皆さんの環境でもお使いいただけると思います。
ぜひいろいろと作り変えてみてください。