cybozu developer network

カテゴリー内の他の記事

【Garoon JavaScript API】ワークフロー承認後にファイル管理にファイルを登録する

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

Index

概要

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

前提条件と注意事項

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

できること

社内規程のような公文書など、登録する際に承認が必要となるファイルの登録を、承認ワークフローと連携させることができます。
申請時にファイルを複数登録することで、最大5つまで同時に承認を申請することができます。

完成イメージ 

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

  • 「承認する」ボタンをクリックすると、ワークフローの内容がファイル管理の特定のフォルダに登録されます。

_________________.png
ファイルの登録にはワークフロー側にJavaScriptファイルを設定しカスタマイズを行います。
また、ファイル管理の登録先フォルダには承認者による書込み権限が必要となります。

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

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

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

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

__________.png

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

項目名 項目タイプ 項目コード 必須 備考
ファイル1 ファイル添付 Attach1   最大ファイル数を1に設定します。
タイトル1 文字列(1行) Title1    
説明1 文字列(1行) Description1    
ファイル2 ファイル添付 Attach2   最大ファイル数を1に設定します。
タイトル2 文字列(1行) Title2    
説明2 文字列(1行) Description2    
ファイル3 ファイル添付 Attach3   最大ファイル数を1に設定します。
タイトル3 文字列(1行) Title3    
説明3 文字列(1行) Description3    
ファイル4 ファイル添付 Attach4   最大ファイル数を1に設定します。
タイトル4 文字列(1行) Title4    
説明4 文字列(1行) Description4    
ファイル5 ファイル添付 Attach5   最大ファイル数を1に設定します。
タイトル5 文字列(1行) Title5    
説明5 文字列(1行) Description5    

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

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

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

3. 適用ファイルの準備

今回はサンプルということで、登録先のフォルダを固定しています。まずは登録先のフォルダを決定します。
ファイル管理から、登録したいフォルダにアクセスします。URLに含まれるhid(フォルダID)を確認します。後ほどプログラムの書き換えに使いますので、メモしておきましょう。
例:以下のイメージでは、登録するフォルダ「改定資料」にアクセスした際のURLがhttps://{subdomain}.cybozu.com/g/cabinet/index.csp?hid=20のため、フォルダIDは[20]になります。

______.png

下記のサンプルコードをエディタにコピーします。
ご利用の環境に合わせて以下の項目を書き換えます。
※ 16行目のHIDを先ほどメモしたフォルダIDに書き換えます。

ファイル名を「wf_to_doc.js」、文字コードを「UTF-8」で保存します。
※ ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。

ポイント

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

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

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

    ________.png


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

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

おわりに

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

更新履歴

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

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

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

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

Avatar
K.Saeki

承認者が複数人いた場合、その都度ファイル管理に追加されるため

最終承認者が承認後のタイミングでファイル管理に登録したく

承認するボタンをクリックした際に、request.status.type が 'COMPLETED'という判別条件を追加しました。

最終承認者で完了するフローの場合は、'COMPLETED'となりうまくいくのですが、

その後に回覧者がいるフロー場合は、’APPROVED’となりうまくいきません。

どのようにすれば、最終承認者のみで実行することが可能でしょうか?

Avatar
cybozu Development team

K.Saeki 様

承認者が複数人設定され、その後に回覧者がいるフローの場合、最終承認者(最後の人)が承認したときのステータスは  'APPROVED' です。
まだ承認者が残っている場合は、ステータスは'IN_PROGRESS' のままです。

そのため、request.status.type === 'APPROVED' という判別条件で最終承認者かの区別ができるかと思います。

こちらは記事に対するフィードバックのコメント欄となっております。
もしコードを変更の際不明な点がありましたら、Garoon カスタマイズ フォーラム をご活用ください。
フォーラムのほうが多くの方が目にするため、アドバイスも得られやすいかとも思います。

Avatar
K.Saeki

cybozu Development team 様

ご回答ありがとうございます。
その後に回覧者がいる場合やまだ承認者が残っている場合はrequest.status.type === 'APPROVED'で判別可能ですが
その承認者のみで完了する場合は、'COMPLETED'となりませんか?
その場合、ORでifをtrueとすればいいということでしょうか?
汎用的に使いたいので、このような質問をしております。
ご了承ください。

Avatar
cybozu Development team

K.Saeki 様

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

> その承認者のみで完了する場合は、'COMPLETED'となりませんか?

これは、
・承認後に回覧フローがある
・最後の承認経路(経路種別が「承認(全員)」)で設定されているのが一人だけ
のイメージであっていますでしょうか?
その場合でも、最後の証人経路で承認者が承認したとき、workflow.request.approve.submit.success イベントにおける status.type は APPROVED になるかと思います。
(検証したところ、そういった動きになっておりました )

そのため、
if((request.status.type === 'COMPLETED') || (request.status.type === 'APPROVED' )) で最後の承認を取得できると思っています。

Avatar
Nobuhisa Onozaki

添付ファイルについて教えてください。

<申請フォーム>
申請フォームにおいて、「添付ファイル」のアクセス権を最終承認のタイミングで
のみ有効にしています。項目コードは設定しています。

<やりたいこと>
最終承認が行われた時に、この添付ファイルをファイル管理に登録したい。

<躓いていること>
承認時のイベント(workflow.request.approve.submit.success)において、
項目データから項目コードを指定してファイル情報が取得できません。
具体的には、
 garoon.workflow.request.get().items['Attach'].value.length
が 0 になります。

承認時に入力する添付ファイルは取得できない仕様なのでしょうか?
何か方法があればご教示ください。

Avatar
cybozu Development team

Nobuhisa Onozaki 様

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

承認時に添付されたファイルを workflow.request.approve.submit.success イベントで取得できない現象が、こちらの環境でも再現されました。
仕様について確認し、改めてこちらの投稿でご連絡いたします。

ご確認よろしくお願いいたします。

Avatar
cybozu Development team

Nobuhisa Onozaki 様

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

添付ファイルを取得できない件について開発に確認したところ、不具合との回答が得られました。
改修予定がございますので、大変恐縮ですがアップデートをお待ちいただければと思います。

今後とも「cybozu developer network」をよろしくお願い申し上げます。

Avatar
Nobuhisa Onozaki

ご確認ありがとうございました。承知しました。
 なお、当方で使用してるのは、パッケージ版のCybozu Garoon Version 5.0.2です。アップデートお待ちしております。

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