カテゴリー内の他の記事

【Garoon JavaScript API】ワークフロー承認後にスケジュールを登録する

フォローする

Index

概要

2017年11月のアップデートで追加されたワークフローの承認実行後イベントを使い、ワークフローの申請内容をスケジュールに登録します(予定を登録する部分はGaroon SOAP APIを使用しています)。

前提条件と注意事項

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

できること

有給休暇、出張など、申請が必要なイベントについてワークフローとスケジュールを連携させることができます。
ワークフローでは、スケジュールへの自動登録機能が搭載されていますが、対象項目の指定等、より柔軟な連携が可能になります。

完成イメージ 

Garoonのワークフローにて承認を行うと、申請内容がスケジュールに登録される流れになります。

  • 「承認する」ボタンをクリックすると、ワークフローの内容が申請者のスケジュールに登録されます。
  • スケジュールのメモ欄には、承認されたワークフローへのリンクが設定されます。 

___________________.png

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

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

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

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

まずは以下の項目を配置して、ワークフローの申請フォームを作成していきます。
申請フォームの作成方法についてはこちらをご参照ください。

__________.png

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

項目名 項目タイプ 項目コード 必須 備考
開始日時 日付(日付と時刻) From  
終了日時 日付(日付と時刻) To  
予定メニュー メニュー Menu  

出張/休みをメニュー項目とします。

※デフォルトの予定メニュー選択肢です。
タイトル 文字列(1行) Title  
メモ 文字列(複数行) Memo    
公開方法 ラジオボタン Scope  公開/非公開をラジオ項目とします。

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

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

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

3. 適用ファイルの準備

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

ポイント

  • request.approve.submit.successイベントに実装することにより、承認が行われた後に起動する処理を作成することができます。

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

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

    ________.png

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

    JS__.png

本カスタマイズでは、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_sch.jsより上位に登録してください。

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

おわりに

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

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

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

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

Avatar
倉さん

例えば、承認が2段階での承認の際に、2回起動して同じ内容が2件投入されてしまいます。

最終2段目の承認と1段目の承認の見分け(制御)は可能ですか?

Avatar
cybozu Development team

倉西様

cybozu developer networkをご活用いただき、ありがとうございます。cybozu developer network事務局です。

ご質問いただいている件ですが、workflow.request.approve.submit.success で、経路ごとに設定している「stepCode(経路ステップコード)」を取得することができます。

https://developer.cybozu.io/hc/ja/articles/115005298746

経路ステップの設定:https://jp.cybozu.help/ja/g/admin/application/workflow/routestep_item

 

なお記事のコメント欄では、記事に誤りがある、記事通りに動作しない、といった直接記事に関する投稿を受け付けております。

技術的なご質問がある場合は、是非コミュニティもご活用頂けますと幸いです。

今後ともどうぞよろしくお願いいたします。

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