カテゴリー内の他の記事

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

フォローする

Index

概要

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

前提条件と注意事項

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

できること

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

完成イメージ 

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

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

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

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

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

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

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

__________.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

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

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

ポイント

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

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

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

    ________.png


    ※ 申請フォームの詳細画面に「JavaScript / CSSによるカスタマイズ」というリンクが表示されない場合、ワークフローのカスタマイズが許可されていない場合はリンクが表示されませんので、こちらをご参照下さい。
  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内の別アプリにデータを登録することが簡単にできます。

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

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

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

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