カテゴリー内の他の記事

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

Index

概要

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

前提条件と注意事項

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

できること

備品購入の承認を 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 で以下の項目を配置して、支払申請ワークフローの申請フォームを作成していきます。  
申請フォームの作成方法については、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 で確認したものになります。

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
KMKM

初歩的な質問になるかもしれませんが、ワークフローの承認経路に複数のステップが設定されている場合、最終承認者が承認したときのみkintoneにレコード登録されるよう設定するにはどのように実装すればよろしいのでしょうか。

現状では複数の承認者が承認するたびにレコード登録されてしまうので、レコードデータが重複してしまいます。

お手数ですが、何か方法があればお教えいただければと思います。

Avatar
cybozu Developer team

KMKM 様
お世話になっております。

いただいたご質問については以下に返答致します。

>ワークフローの承認経路に複数のステップが設定されている場合、
>最終承認者が承認したときのみkintoneにレコード登録されるよう
>設定するにはどのように実装すればよろしいのでしょうか。

ご希望に添えず恐縮ですが、現在ワークフローでは最終承認者が承認したときの
イベントを指定することはできないため、最終承認者が承認したときのみkintoneに
レコードを登録させるというのは難しいかと思います。

例えばですが、kintoneにレコードを登録する前にアプリの方に同じタイトルのレコードがある場合には、
レコードを新規追加するのではなく、既存のレコードを更新させるようにするのはいかがでしょうか。
このようなシナリオでコードを書き換えてみるのも一つの方法になるかと思います。

もしコードを修正される中でご不明な点がございましたら
cybozu developer コミュニティ」の方をご活用いただければと思います。

よろしくお願いします。

Avatar
KMKM

ありがとうございます。

Avatar
kyoden

cybozu Developer team様

KMKM様の質問に

>ご希望に添えず恐縮ですが、現在ワークフローでは最終承認者が承認したときの
>イベントを指定することはできないため、最終承認者が承認したときのみkintoneに
>レコードを登録させるというのは難しいかと思います。

 

のようにお答えになっていますが、

例えば特定の承認者が承認するを押したときに、

自動で登録するということは可能でしょうか?

 

それとも承認者を指定するというイベントがそもそもないのでしょうか?

 

ご教示いただけますと幸いです。

よろしくお願い致します。

Avatar
cybozu Development team

kyoden 様

お世話になっております。developer network事務局です。

>例えば特定の承認者が承認するを押したときに、
>自動で登録するということは可能でしょうか?

こちらもご希望に添えず恐縮ですが、
ワークフロー申請が承認されたときのイベントで現在の承認者の値を取得することが出来ないため、
特定の承認者が承認するを押したときに自動で登録するというのは難しいかと思います。

>それとも承認者を指定するというイベントがそもそもないのでしょうか?

現在用意されているイベントはこちらに一覧がございます。
Garoon JavaScript API 一覧
ワークフロー申請が承認されたときのイベントはこちらになります。

以上、よろしくお願いします。

Avatar
苅野勉三

KMKMさま

承認経路で最後の承認者が承認したタイミングのみを取りたい場合、

request.status.type が 'COMPLETE' となりますので、それをご利用されてみてはいかがでしょうか?

※いまさらで恐縮ですが・・・

Avatar
tosioman

承認者のコメントもKintoneに反映させる場合はどのようにすればよいでしょうか?

 

Avatar
cybozu Development team

tosiomanさま

ワークフローのrequestオブジェクト内に承認者のコメントである processors.comment が含まれているため

ワークフローの他の項目と同様に、function addKintoneTask() 内に追加するよう、コードを変更すれば可能だと思います。

(参考)ワークフローのrequestオブジェクト https://developer.cybozu.io/hc/ja/articles/115001457503

もしコードを変更の際不明な点がありましたら、Garoonのカスタマイズフォーラム をご活用ください。

 

Avatar
tosioman

cybozu Development team 様

早速の回答ありがとうございます。
具体的な書き方がわからなかったので、Garoonのカスタマイズフォーラムに質問を投稿しました。

Avatar
tosioman

cybozu Development team 様

下記のアドバイスですが、具体的にはどのように記載するのでしょうか?
「Garoonのカスタマイズフォーラム をご活用ください」とのアドバイスでしたが、何も返信がないため再質問いたしました。

よろしくお願いします。

 

ワークフローのrequestオブジェクト内に承認者のコメントである processors.comment が含まれているため

ワークフローの他の項目と同様に、function addKintoneTask() 内に追加するよう、コードを変更すれば可能だと思います。

(参考)ワークフローのrequestオブジェクト https://developer.cybozu.io/hc/ja/articles/115001457503

 

Avatar
cybozu Development team

tosioman 様

こちらのコメント欄では、記事へのフィードバックをお願いしており、
記事記載のコードに変更を加える内容の場合は、コミュニティへの投稿をご案内しております。

また、コミュニティは有志による回答となります。
恐れ入りますが、コミュニティでの回答をお待ちいただけますでしょうか。
ご期待に添えず、申し訳ございません。

Avatar
伊藤 和真

なるほど。Garoonで申請するフォーマットが結構違うですが、時間とかそういうのはどうすれば?

 

添付ファイルとかは?

Avatar
cybozu Development team

伊藤 和真 様

こちらの投稿欄は、記事の手順に沿って行ったが実現できなかった場合のみのフィードバック欄ですので、ご了承ください。

記事に手順に沿って行っていただいた上で、ご自分の環境に適用するためのおおよその手順についてご案内します。

  1. Garoonの申請フォーム内の項目を追加/削除するなどして、変更する。
    JavaScriptで識別するための「項目コード」が必要です。
    日付項目の場合はこちらを参照ください。https://jp.cybozu.help/g/ja/admin/application/workflow/item/type#admin_application_workflow_item_type_08 (Garoon クラウド版ヘルプ)
  2. kintoneのフィールドを用意し、フィールドコードに、Garoonの項目コードと同じ名前を設定する。
    フィールドコードとはこちらを参照ください。 https://jp.cybozu.help/k/ja/user/app_settings/form/autocalc/fieldcode.html (kintone ヘルプ)
  3. Garoonに適用するJavaScriptプログラムの function addKintoneTask(token, request) の引数requestで送る部分(24行〜33行目) を変更する。
    ワークフローのオブジェクトを取得しています。下記のドキュメントのとおり、日付や日時についても取得可能です。
    ワークフローオブジェクト https://developer.cybozu.io/hc/ja/articles/115001457503 

    参考)body.record['<フィールドコード>'].value = request['items']['<項目コード>']['value'];

  ※または日時のみに限っていえば、kintone側に「作成日時」フィールドを追加すればJavaScriptの変更は不要かと思われます

ただし添付ファイルに関してはワークフローオブジェクトの内容からわかるように、ファイル名やサイズは取得できるものの、添付ファイルそのものまで取得できません。
添付ファイルそのものを扱うにはREST API または SOAP API を利用する必要があります。

REST APIを利用して添付ファイルそのものもkintoneに連携した例については下記にご紹介しております。

Garoon ワークフロー REST API を使って承認済みワークフローを kintone に登録しよう https://developer.cybozu.io/hc/ja/articles/360030308912

こちらは当記事より手順が複雑になっておりますが、
こちらも項目コードやフィールドコードを変更した上で、記事内の「サンプルコードの解説」の内容がご理解いただければご自身でJavaScriptを変更してご自身の環境に適用が可能です。

JavaScriptでエラーが出て想定どおり動作しない場合は、もともとkintone向けの内容になりますが以下の記事が参考になります。

動かない?そんな時はデバッグをしてみよう!入門編 https://developer.cybozu.io/hc/ja/articles/207613916
kintoneカスタマイズの基本的なデバッグの流れを身につけよう https://developer.cybozu.io/hc/ja/articles/360038920252

なおこちらの欄では、プログラム作成時の技術的なご質問に答えることができません。
JavaScriptの修正時につまずいた場合、プログラム内容やエラー内容をコミュニティで投稿すると、有志の方の回答がつきやすいのでご利用ください。

よろしくお願いいたします。

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