【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で動作を確認しています。