【Garoon JavaScript API】ワークフロー承認時に kintone にレコード登録する
概要
ワークフロー申請を承認したときのイベント と kintone 連携用トークンを取得する API を使い、Garoon のワークフローのデータを kintone のアプリに登録します。
前提条件と注意事項
- このカスタマイズには、クラウド版 Garoon と kintone のスタンダードコースの契約が必要です。
- ワークフロー JavaScript カスタマイズは、JavaScript を適用してから申請されたワークフローが対象になります。
それ以前に申請されたワークフローには適用されません。 - 代理承認時にカスタマイズが動作しない不具合を確認しています。(2019/2/21 追記)
できること
Garoon のカスタマイズを使って、備品購入のワークフローの申請が承認されたときに、kintone のアプリに申請内容を登録します。
「申請業務は Garoon で行い、承認後に発生するタスク管理は kintone アプリで行いたい」といったシーンに活用できます。
完成イメージ
例)Garoon のワークフローにて最終承認すると、あらかじめ指定した kintone のアプリにデータが登録されるという流れになります。
- ワークフローが最終承認されると、ワークフロー内の赤枠のデータが kintone のアプリにコピーされます。
- kintone のアプリの「ワークフローリンク」には承認された Garoon のワークフローの URL が追加されます。
申請者や申請経路の処理者以外のユーザーがワークフローの 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 | リンク(Webサイトのアドレス) |
これで 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 ファイルとして使用するファイルおよびリンクの追加
- 「申請フォーム情報」部分の右端にある「JavaScript / CSS によるカスタマイズ」をクリックします。
詳細は、 ワークフローのカスタマイズを許可するを参照してください。
- [カスタマイズ]項目に「適用する」を選択し、作成した「grwf_to_kinapp.js」ファイルを追加し、「設定する」をクリックします。
以上ですべての設定は完了です。最初にお見せした完成イメージのとおり、動けば成功です。
おわりに
Garoon JavaScript API のカスタマイズサンプル ワークフローと kintone との連携方法を紹介しました。
2017 年 11 月のアップデートで追加された API を使用することで、ワークフローの承認実行のタイミングで
kintone のアプリにデータを登録することが簡単にできます。
今後も Garoon と kintone の連携方法を公開していきますのでお楽しみに!
この Tips は、2023 年 5 月版の Garoon と kintone で動作を確認しています。