カテゴリー内の他の記事

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

フォローする

Index

概要

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

前提条件と注意事項

  • このカスタマイズには、現時点では「Garoon on cybozu.com」のクラウド版と「kintone」のスタンダードコースの契約が必要です。(2017年11月時点)
  • ワークフロー JavaScriptカスタマイズは、JavaScriptを適用した後に申請されたWFが対象になります。
    それ以前に申請されたワークフローには適用されません。
  • サンプルプログラムは、その動作を保証するものではありません。
  • サンプルプログラムの技術的なサポート等は行っていません 。

できること

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

完成イメージ

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

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

garoontokintone.png

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

kintone アプリの設定手順

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

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

kintone1.PNG

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

フィールド名 フィールドコード フィールドタイプ
標題 Title 文字列(一行)
備品名1 Name1 文字列(一行)
備品名2 Name2 文字列(一行)
依頼内容 Order 文字列(複数行)
ワークフローリンク Link リンク


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

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

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

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

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

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

garoon1.PNG

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

項目名 項目タイプ 項目コード 備考
標題 文字列(1行)(標準項目) Title 必須項目に設定
備品名1 文字列(1行) Name1  
備品名2 文字列(1行) Name2  
依頼内容 文字列(複数行) Order  

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

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

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

適用ファイルの準備

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

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

  1. 「申請フォーム情報」部分の右端にある「JavaScript / CSSによるカスタマイズ」をクリックします。
    garoon2.PNG
    ※申請フォームの詳細画面に「JavaScript / CSSによるカスタマイズ」というリンクが表示されない場合
    ワークフローのカスタマイズが許可されていない場合はリンクが表示されませんので、こちらをご参照下さい。  

  2.  [カスタマイズ] 項目に「適用する」を選択し、作成した「grwf_to_kinapp.js」ファイルを追加し、「設定する」をクリックします。
    garoon3.PNG

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

おわりに

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

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

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

 

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

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。