概要
「【Garoon JavaScript API】出張申請から内容を引き継いで旅費申請を作成する」に続いて、ガルーンのワークフローカスタマイズ第2弾をお届けします。
今回はガルーンとkintoneを連携して、kintoneの事前費用申請アプリから内容を引き継いでガルーンの支払申請を作成するサンプルのご紹介です。
第1弾はガルーンのワークフロー同士の処理でしたが、今回はkintoneとガルーンでの内容引き継ぎ処理になります。
前提条件と注意事項
- このカスタマイズには、クラウド版 Garoon または パッケージ版 Garoon 4.6以降 とkintone スタンダードコースの契約が必要です。
- ワークフロー JavaScriptカスタマイズは、JavaScriptを適用した後に申請されたWFが対象になります。
それ以前に申請されたワークフローには適用されません。 - サンプルプログラムは、その動作を保証するものではありません。
- サンプルプログラムの技術的なサポート等は行っていません 。
できること
何かしら予算を使う際、使う用途と金額などが分かった時点で事前に費用申請を提出して、実際に支払った後にまた支払申請を提出するというルールがある会社も多いと思います。
用途・金額・申請者情報など、ほとんと同じ内容を記載するのに毎回コピー&ペイストは大変ですよね。
今回は、kintoneで事前費用申請を、ガルーンで支払申請を管理しているケースを想定して、以下のカスタマイズサンプルをご紹介します。
- kintoneの事前費用申請アプリからボタンクリックで内容を引き継いでガルーンの支払申請を作成する
ここではkintoneの「レコード詳細画面が表示された時のイベント」とガルーンの「ワークフロー申請の作成画面が表示されたときのイベント」を利用します！
完成イメージ
例）kintoneの「事前費用申請」アプリとガルーンの「支払申請」ワークフローがあり、その項目の一部が同じ内容の場合
kintoneの「事前費用申請」アプリにある、一部項目の内容のコピーと、申請した「事前費用申請」の該当レコードのURLを、ガルーンの「支払申請」ワークフローに自動で入力するサンプルカスタマイズの完成イメージです。
- kintoneの「事前費用申請」アプリのレコード詳細画面に [支払申請を提出する] ボタンが表示されます。
- [支払申請を提出する] ボタンをクリックすると、別タブでガルーンの「支払申請」ワークフローの作成画面が表示され、自動で標題・申請者・所属本部・事前費用申請番号・予算番号・内容・金額・「事前費用申請」の該当レコードのURLが入力されます。
今回はkintoneのアプリとガルーンのワークフロー両方にJavaScriptファイルを充ててカスタマイズしていきます。まずはkintone側で必要になる準備について順を追って説明していきます。
kintone アプリの設定手順
①事前費用申請アプリを作成する
最初はkintoneの事前費用申請アプリの準備から始めます。アプリストアに事前費用申請アプリがないので、今回は以下のフィールドを配置してアプリを作成します。
※アプリの具体的な作成方法は、以下のヘルプをご参照ください。
アプリをはじめから作成する ～FAQアプリを作ってみよう～
フィールドは以下の通り設定してください。フィールドコードは、JavaScriptコード内でそれぞれのフィールドを指定するための一意の文字列なので、間違えないように設定してくださいね。
必要に応じてプロセス管理も設定してください。
| フィールド名 | フィールドコード | フィールドタイプ | 備考 |
|---|---|---|---|
| 所属本部 | 所属本部 | ドロップダウン | 必須項目に設定 |
| 事前費用申請番号 | 事前費用申請番号 | 文字列（一行） | 必須項目に設定 |
| 予算番号 | 予算番号 | 文字列（一行） | 必須項目に設定 |
| 費用標題 | 費用標題 | 文字列（一行） | 必須項目に設定 |
| 費用内訳 | 費用内訳 | 文字列（一行） | |
| 申請金額（税抜き） | 申請金額 | 数値 | 必須項目に設定 |
| 作成者 | 作成者 | 作成者 | |
| 作成日時 | 作成日時 | 作成日時 | |
| － | send_button_space | スペース | 「send_button_space」は要素IDのところに設定 ※ボタンを設置する場所になります。 |
②JavaScript/CSSファイルを適用する
アプリが完成したら、そこにカスタマイズを充てていきます。ここでは以下の画像のように、ガルーンの支払申請ワークフローに飛ばすボタンの配置と、レコード内データの保存を行います。
ガルーンに引き継ぐ一時的なデータの保存のために、第1弾と同様にセッションストレージに保存します。
事前費用申請アプリの「アプリの設定 > JavaScript/CSSでカスタマイズ」に以下のサンプルコードを設定します。
具体的なファイルの適用方法についてはこちらをご参照ください。
PC用のJavaScriptファイル
PC用のCSSファイル
- 51-modern-default.css
※kintone標準パーツに似せたボタン作成のためのCSSです。
こちらのリンク先のコードをコピペして左記の名前で保存してアップロードください。
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
※適用する際は、26行目の「cid=XXX&fid=XXX」のXXX部分は各フォームIDに書き換えてください。
フォームIDは、ガルーンのワークフローの申請の作成画面のURLにてご確認ください。
例）https://{subdomain}.cybozu.com/g/send_form.csp?cid=12&fid=345 ←このIDです。
これでkintoneアプリの設定は完了です！ボタンクリックで別タブが開きましたでしょうか？ここからはガルーンの設定に移っていきます。準備項目が多めですが、もう一息頑張っていきましょう。
ガルーン ワークフローの設定手順
ワークフローの項目の内容は、会社さんによって異なります。
ここでは、サンプルということで完成イメージで利用した支払申請の申請フォームにJavaScriptカスタマイズを充てていく流れをご説明します。
①ガルーン ワークフローの申請フォームを作成する
まずはkintoneでアプリを準備したのと同じく、ガルーンで以下の項目を配置して、支払申請ワークフローの申請フォームを作成していきます。
申請フォームの作成方法については、Garoon ヘルプ - 申請フォームの作成の流れ クラウド版・パッケージ版をご参照ください。
フォーム作成は少し手間がかかるので、今回はそのまま読み込んで使えるサンプルフォームもご用意しています。（後述）
それぞれの項目は以下の通り設定してください。
ここでも項目コードは、JavaScriptコード内でそれぞれの項目を指定するための一意の文字列なので、間違えないように設定してくださいね。
| 項目名 | 項目タイプ | 項目コード | 備考 |
| 標題 | 文字列（１行）(標準項目) | title | 必須項目に設定 |
| 所属本部 | メニュー | department | 必須項目に設定 |
| 事前費用申請番号 | 文字列（1行） | number | 必須項目に設定 |
| 事前費用申請URL | 文字列（複数行） | pre_cost_url | 必須項目に設定 |
| （空白行） | （空白行） | － | 「空白行を追加する」で設定 |
| 予算番号 | 文字列（1行） | budget_number | 必須項目に設定 |
| 内容 | 文字列（複数行） | item | 必須項目に設定 |
| 金額 | 数値 | amount | 必須項目に設定 |
| 消費税 | 数値 | tax | |
| 合計金額 | 自動計算 | total | 計算内容欄は以下を設定 合計（選択項目の値の総和を計算します） 金額 消費税 |
上記の通り設定が完了したら、土台となる申請フォームの作成は完了です。
サンプルフォームのダウンロードについて
申請フォームを作成するのに少し時間がかかるので、まずは動きを見てみたいという方向けに、そのまま環境に読み込んで使っていただけるサンプルの申請フォームをXML形式でご用意しました。
完成イメージにある支払申請の申請フォームになります。
以下からサンプルフォームをダウンロードして下さい。
このXMLファイルを、「申請フォーム一覧」から読み込んでいただくと、「【サンプル】支払申請」という申請フォームが追加されます。項目コードも設定済みの状態です。
サンプルフォームを追加する方法については、こちらをご参照ください。
※経路情報は各環境で異なり、存在しない経路を読み込むことはできないので、上記のXMLでは経路情報を省いています。
申請フォームを有効化するには、経路情報の設定が必要になりますので、そちらも忘れず設定してください。
②JavaScriptファイルを適用する
申請フォームの作成が完了したので、あと一歩です。ここから作成した申請フォームにJavaScriptファイルを適用していきます。
ワークフローのJavaScript / CSSによるカスタマイズは初期値では「許可しない」設定になっています。
そのため、まずはその設定を「許可する」に変更します。
- [システム管理（各アプリケーション） > ワークフロー > 一般設定]の画面を表示します。
- [一般設定]の「JavaScript / CSSによるカスタマイズの許可」項目を「許可する」を選択します。
- 設定変更後、「適用する」をクリックします。
許可設定が完了したらいよいよJavaScriptファイルを申請フォームに適用していきます。
以下の画像のように、セッションストレージに保存されているkintoneの事前費用申請アプリのデータを取得して、ワークフローの作成画面に値をセットするというカスタマイズになります。
サンプルプログラム（receiveDataFromPreCost.js）と適用方法
ガルーンの「ワークフロー申請の作成画面が表示されたときのイベント」を利用しています。
- 下記のサンプルコードをエディタにコピーして、ファイル名を「receiveDataFromPreCost.js」、文字コードを「UTF-8」で保存します。
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
※適用する際は、25行目の「https://×××.cybozu.com/k/」の×××の部分はご自身のkintone環境のドメイン名に書き換えてください。 - 「申請フォーム情報」部分の右端にある「JavaScript / CSSによるカスタマイズ」をクリックします。
- 「カスタマイズ」項目を「適用する」を選択し、1. で保存した「receiveDataFromPreCost.js」ファイルを追加し、「設定する」をクリックします。
以上ですべての設定は完了です！お疲れ様でした！最初にお見せした完成イメージの通り、動けば成功です。
おわりに
Garoon JavaScript APIのカスタマイズサンプル 第二弾、kintoneとガルーンのワークフロー連携の方法をお届けしました。面倒なコピー&ペイスト作業もなくなりましたね。
運用に合わせて、コピーする項目を設定していただくことで、皆さんの環境でもお使えいただけると思います。
ぜひ色々と作り変えてみてください。
他にも便利な使い方がありますので、その紹介はまた次の機会に。
今後もサンプルをご紹介させていただきますので、また見に来てください！
Kintoneデータを引き継いで、Garoonのワークフロー申請を行いたいと考えています。
参考になる記事があったので、こちらを試そうと思うのですが添付ファイルを渡す方法はないのでしょうか？
ご存じの方がいましたらご教示お願い致します。
https://developer.cybozu.io/hc/ja/articles/115001441043--Garoon-JavaScript-API-kintone%E3%81%AE%E4%BA%8B%E5%89%8D%E8%B2%BB%E7%94%A8%E7%94%B3%E8%AB%8B%E3%82%A2%E3%83%97%E3%83%AA%E3%81%8B%E3%82%89%E5%86%85%E5%AE%B9%E3%82%92%E5%BC%95%E3%81%8D%E7%B6%99%E3%81%84%E3%81%A7%E3%82%AC%E3%83%AB%E3%83%BC%E3%83%B3%E3%81%AE%E6%94%AF%E6%89%95%E7%94%B3%E8%AB%8B%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B
羽鳥 様
お世話になっております。cybozu developer network 運営でございます。
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問は、cybozu developer コミュニティをご活用ください。
その際、コードも公開するなどより詳細に情報を示すと回答が集まりやすいかと思われます。
今後ともcybozu developer networkよろしくお願いします。
失礼いたしました。
コミュニティに書いたつもりが、さまよっているうちにコチラへ書いてしまったようです。