【Garoon JavaScript API】ワークフロー承認後にメッセージを送信する

Moment.js はメンテナンスモードになり、日付処理できる代替ライブラリへの移行が推奨されています。
代替ライブラリのひとつ Luxon については、kintone カスタマイズでの導入方法の紹介記事があります。

Index

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

概要

2017年11月のアップデートで追加されたワークフローの承認実行後イベントを使い、ワークフローの申請内容をメッセージ送信します（メッセージを送信する部分はGaroon SOAP APIを使用しています）。

前提条件と注意事項

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

できること

ワークフローとメッセージを連携させることにより、送信前に上司の確認・承認をはさむことができます。
以前にご紹介した掲示板連携と異なり、送信時に宛先を指定することができるため、範囲を限定したお知らせや情報発信をすることができます。

完成イメージ 

Garoonのワークフローにて承認を行うと、申請内容がメッセージ送信される流れになります。

• 「承認する」ボタンをクリックすると、指定した宛先に対してメッセージが送信されます。

※ 宛先機能について

• メッセージの宛先を設定するために、JavaScriptカスタマイズ項目 でカスタマイズしています。
• すべての組織をフラットにプルダウン表示し、組織をクリックすると、その下に組織の所属ユーザを一覧表示します。
• ユーザの一覧から、宛先として含めるユーザを「追加」ボタンで選択できます。
  ※複数選択可、別組織を選択してのユーザ追加可
• 「削除」ボタンはありません。既に追加した宛先を削除するためには、画面上宛先を直接編集可能ですが、サンプルプログラムでは、編集されたことによる値が不正な状態となった場合の考慮はしません。

メッセージ側には特別な設定は不要です。
ワークフローの設定にのみ、JavaScriptファイルを設定しカスタマイズしていきます。

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

ワークフローの項目の内容は、会社によって異なります。 
ここでは、サンプルということで、メッセージのSOAP APIで設定可能な項目を概ね網羅した申請フォームにJavaScript/CSSカスタマイズを設定する流れをご説明します。

1. ワークフローの申請フォームを作成する 

まずは以下の項目を配置して、ワークフローの申請フォームを作成していきます。
申請フォームの作成方法については、Garoon ヘルプ - 申請フォームの作成の流れ　クラウド版・パッケージ版をご参照ください。

申請フォームは、掲示板の項目と対応付けます。それぞれの項目は以下の通り設定してください。
項目コードは、JavaScriptコード内でそれぞれの項目を指定するための一意の文字列になります。

項目名	項目タイプ	項目コード	必須	備考
タイトル	文字列（1行）	Title	〇
本文	文字列（複数行）	Body	〇
添付ファイル	ファイル添付	Attach		5つまで登録可能とします。
宛先	文字列（複数行）	SendTo	〇
-	JavaScriptカスタマイズ項目	select_to		「直前の項目につづけて、右隣に配置する」を選択します。 宛先を設定するためのカスタマイズ部品を配置します。
閲覧状況を確認する	チェックボックス	Confirm

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

2. Javascript/CSSファイルを適用する

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

3. 適用ファイルの準備

下記のサンプルコードをエディタにコピーして、ファイル名を「wf_to_msg.js」、文字コードを「UTF-8」で保存します。
※ ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。

ポイント

• ワークフロー申請フォームでは、ユーザを選択する項目タイプがありません。
  そのため、今回のサンプルでは、文字列（複数行）項目に対して選択ユーザを追加するカスタマイズを行います。該当箇所を抜粋します。

①組織エクスポートAPIを使用して検索し、以下のように組織一覧を元にドロップダウンフィールドを作成しています。
②ドロップダウンで選択した組織に所属するユーザを、組織の所属ユーザエクスポートAPIを使用して検索し、以下のようにユーザ一覧を元に複数選択フィールドを作成しています。
③ ユーザ一覧で選択したユーザを、宛先フィールドに反映します。

• request.approve.submit.successイベントに実装することにより、承認が行われた後に起動する処理を作成します。
• 宛先に指定したユーザのログイン名から、ログイン名からユーザIDを取得するAPIでGaroonのユーザIDに変換し、SOAPリクエストパラメータに設定しています。
  
• 送信者は申請者ではなく、承認者になります。申請者名義での送信はできないため、タイトルに申請者名を明記しています。
  

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

1. 「申請フォーム情報」部分の右端にある「JavaScript / CSSによるカスタマイズ」をクリックします。

   

   ※ 申請フォームの詳細画面に「JavaScript / CSSによるカスタマイズ」というリンクが表示されない場合、
   ワークフローのカスタマイズが許可されていない場合はリンクが表示されませんので、Garoon ヘルプ - ワークフローのカスタマイズを許可する　クラウド版・パッケージ版をご参照ください。
2.  [カスタマイズ] 項目に「適用する」を選択します。wf_to_msg.jsが使用するjQuery、Moment.jsおよび作成した「wf_to_msg.js」ファイルを追加し、「設定する」をクリックします。

   

本カスタマイズでは、Cybozu CDNの以下のライブラリーを使用します。

• jQuery
  https://js.cybozu.com/jquery/3.3.1/jquery.min.js
• Moment.js
  https://js.cybozu.com/momentjs/2.20.1/moment.min.js

※ jQuery、Moment.jsはwf_to_msg.jsより上位に登録してください。

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

おわりに

Garoon APIのカスタマイズサンプル ワークフローとメッセージとの連携方法をご紹介しました。
ワークフローの承認実行のタイミングでGaroon内の別アプリにデータを登録することが簡単にできます。

更新履歴

• 2022年2月1日
  添付ファイルの ID を取得する処理を、workflow.request.approve.submit.success イベントのワークフローオブジェクトを使う方法から、SOAP API（受信した申請を取得する） を使う方法に変更

このTipsは、2022年1月版 Garoonで確認したものになります。