【Garoon JavaScript API】ワークフロー承認後に掲示板を投稿する – cybozu developer network

Index

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

概要

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

前提条件と注意事項

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

できること

ワークフローと掲示板を連携させることにより、投稿前に上司の確認・承認をはさむことができます。
例えば、人事や総務が全社向けに告知する人事異動情報の掲載など、各種お知らせの掲載の前の上司承認を得るようなケースが想定されます。

完成イメージ

Garoonのワークフローにて承認を行うと、申請内容が掲示板に投稿される流れになります。

「承認する」ボタンをクリックすると、ワークフローの内容が掲示板に投稿されます。

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

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

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

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

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

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

項目名	項目タイプ	項目コード	必須	備考
タイトル	文字列（1行）	Subject	〇
掲示期間を指定する	チェックボックス	SpecifyTerm
掲示期間	日付	BulletinFrom
掲示期間（To）	日付	BulletinTo
本文	文字列（複数行）	Body	〇
添付ファイル	ファイル添付	Attach		5つまで登録可能とします。
コメントの書き込みを許可する	チェックボックス	CanFollow

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

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

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

3. 適用ファイルの準備

今回はサンプルということで、投稿先のカテゴリを固定しています。まずは投稿先のカテゴリを決定します。
掲示板から、掲載したいカテゴリにアクセスします。URLに含まれるcid（カテゴリID）を確認します。後ほどプログラムの書き換えに使いますので、メモしておきましょう。
例：以下のイメージでは、掲載するカテゴリ「人事部からのお知らせ」にアクセスした際のURLがhttps://{subdomain}.cybozu.com/g/bulletin/index.csp?cid=6のため、カテゴリIDは[6]になります。

下記のサンプルコードをエディタにコピーします。
ご利用の環境に合わせて以下の項目を書き換えます。

15行目CATEGORY_IDを先ほどメモしたカテゴリIDに書き換えます。

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

ポイント

workflow.request.approve.submit.successイベントに実装することにより、承認が行われた後に起動する処理を作成することができます。
ワークフローに登録した添付ファイルを、5つまで掲示板にコピー投稿することができます。
掲示期間を指定することにより、期間を限定した投稿、予約投稿も可能です。
投稿者は申請者ではなく、承認者になります。申請者名義での投稿はできないため、タイトルに申請者名を明記しています。

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

「申請フォーム情報」部分の右端にある「JavaScript / CSSによるカスタマイズ」をクリックします。
※ 申請フォームの詳細画面に「JavaScript / CSSによるカスタマイズ」というリンクが表示されない場合、ワークフローのカスタマイズが許可されていない場合はリンクが表示されませんので、こちらをご参照下さい。
[カスタマイズ] 項目に「適用する」を選択します。wf_to_bbs.jsが使用するjQuery、Moment.jsおよび作成した「wf_to_bbs.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_bbs.jsより上位に登録してください。

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

おわりに

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

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