【Garoon JavaScript API】ワークフロー承認時にkintoneにレコード登録する

Index

• 概要
• 前提条件と注意事項
• できること
• 完成イメージ
• kintone アプリの設定手順
• Garoon ワークフローの設定手順
• おわりに

概要

ワークフローの承認実行後イベントと kintone 連携用トークンを取得する JavaScript API を使い、Garoon のワークフローのデータを kintone のアプリに登録します。

前提条件と注意事項

• このカスタマイズには、クラウド版 Garoon と kintone のスタンダードコースの契約が必要です。
• ワークフロー JavaScript カスタマイズは、JavaScript を適用した後に申請されたワークフローが対象になります。
  それ以前に申請されたワークフローには適用されません。
• サンプルプログラムは、その動作を保証するものではありません。
• サンプルプログラムの技術的なサポート等は行っていません。
• 代理承認時にカスタマイズが動作しない不具合があることを確認しております。（2019/2/21追記）

できること

備品購入の承認を Garoon のワークフローにて行い、承認後に発生するタスク管理を kintone のアプリで行う場合、今までワークフローのデータを kintone のアプリに直接引き継ぐことができませんでした。
2017 年 11 月に追加された API を使うことで、ワークフローの承認が実行されたタイミングで kintone のアプリにタスクとしてレコード登録することができます。

完成イメージ

例）Garoon のワークフローにて最終承認を行うと、あらかじめ指定した kintone のアプリにデータが登録されるという流れになります。

• ワークフローが最終承認されると、ワークフロー内の赤枠のデータが kintone のアプリにコピーされます。
• kintone のアプリの「ワークフローリンク」には承認された Garoon のワークフローの URL が追加されます。

今回は kintone のアプリには JavaScript / CSS ファイルの設定は不要です。
Garoon のワークフローの設定にのみ、JavaScript / CSS ファイルを設定しカスタマイズしていきます。
kintone アプリのフィールドコードは利用するため、まずは kintone アプリの設定からはじめます。

kintone アプリの設定手順

備品タスクアプリを作成する

最初は kintone の備品タスクアプリを作成します。
完成すると、作成画面は下記のようになります。
※アプリの具体的な作成方法は、kintone ヘルプ「アプリをはじめから作成する」をご参照ください。

フィールドは以下の通り設定してください。  
フィールドコードは、Garoon 側に設定する JavaScript コード内でそれぞれのフィールドを指定するための一意の文字列となります。
間違えないように設定してください。

フィールド名	フィールドコード	フィールドタイプ	備考
標題	Title	文字列（一行）
備品名1	Name1	文字列（一行）
備品価格1	Price1	数値	「桁区切りを表示する」にチェック
備品名2	Name2	文字列（一行）
備品価格2	Price2	数値	「桁区切りを表示する」にチェック
合計価格	Total	数値	「桁区切りを表示する」にチェック
依頼内容	Order	文字列（複数行）
ワークフローリンク	Link	リンク

これで kintone アプリの設定は完了です！
Garoon 側に設定する JavaScript ファイルの中に kintone のアプリ ID を入力しますので、アプリ ID は覚えておいて下さい。

例）https://xxxxx.cybozu.com/k/xxx/ ←アプリ ID はこの赤文字の部分に書いてある数字です。

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

ワークフローの項目の内容は、会社によって異なります。  
ここでは、サンプルということで完成イメージで利用した支払申請の申請フォームに JavaScript / CSS カスタマイズを設定する流れをご説明します。

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

まずは kintone でアプリを準備したものと同じく、Garoon で以下の項目を配置して、支払申請ワークフローの申請フォームを作成していきます。  
申請フォームの作成方法については、Garoon ヘルプ - 申請フォームの作成の流れをご参照ください。

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

項目名	項目タイプ	項目コード	備考
標題	文字列（1行）（標準項目）	Title	必須項目に設定
備品名1	文字列（1行）	Name1
備品価格1	数値	Price1	「桁区切りを表示する」にチェック
備品名2	文字列（1行）	Name2
備品価格2	数値	Price2	「桁区切りを表示する」にチェック
合計価格	自動計算	Total	計算内容の「合計」にチェックを入れ、「備品価格1」と「備品価格2」を追加 「桁区切りを表示する」にチェック
依頼内容	文字列（複数行）	Order

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

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

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

適用ファイルの準備

下記のサンプルコードをエディタにコピーして、ファイル名を「grwf_to_kinapp.js」、文字コードを「UTF-8」で保存します。
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
※こちらの JavaScript ファイルには、kintone アプリの ID を設定したり、テーブル数の設定などお客様の環境に合わせて修正していただく箇所がございます。

JavaScript / CSS ファイルとして使用するファイルおよびリンクの追加

1. 「申請フォーム情報」部分の右端にある「JavaScript / CSSによるカスタマイズ」をクリックします。
   
   ※申請フォームの詳細画面に「JavaScript / CSSによるカスタマイズ」というリンクが表示されない場合
   ワークフローのカスタマイズが許可されていない場合はリンクが表示されませんので、こちらをご参照下さい。  
2.  [カスタマイズ] 項目に「適用する」を選択し、作成した「grwf_to_kinapp.js」ファイルを追加し、「設定する」をクリックします。
   

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

おわりに

Garoon JavaScript API のカスタマイズサンプル ワークフローと kintone との連携方法をご紹介しました。

2017 年 11 月のアップデートで追加された API を使用することで、ワークフローの承認実行のタイミングで
kintone のアプリにデータを登録することが簡単にできます。

今後も Garoon と kintone の連携方法を公開していきますのでお楽しみに！

この Tips は、2021 年 9月版 Garoon / kintone で確認したものになります。