【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のワークフロー連携の方法をお届けしました。面倒なコピー&ペースト作業もなくなりましたね。
運用に合わせて、コピーする項目を設定していただくことで、皆さんの環境でもお使いいただけると思います。
ぜひいろいろと作り変えてみてください。