【Garoon JavaScript API】ワークフローの印影カスタマイズ

Index

• はじめに
• 注意事項
• 完成イメージ
• 印影データの準備
• JavaScript カスタマイズ設定方法
• プログラムの解説
• おわりに

はじめに

クラウド版Garoon、パッケージ版Garoon(4.6.0以上) にはワークフロー画面にイベントが用意されています。
今回はこのイベントを使って「ワークフローの承認欄に印影」を表示するカスタマイズを行います。

注意事項

• サンプルでは一部の機能でGaroonがサポートしないDOM操作を行っています。Garoonのアップデートにより、機能が利用できなくなる可能性があります。
• サンプルプログラムは、その動作を保証するものではありません。
• サンプルプログラムの技術的なサポート等は行っていません。

完成イメージ

ワークフローの詳細画面と承認後画面にて、印影が表示されます。

印影データの準備

ワークフローに表示させる印影データ(画像ファイル)をGaroonのファイル管理にアップロードしてください。

そして、印影データを保存したフォルダのID (URL部分の hid部分) をメモしておいてください。

例： https://(サブドメイン)cybozu.com/g/cabinet/index.csp?hid=3
→ この場合 フォルダのIDは「3」となります。

※ 印影のファイル名は対応するユーザーの「ログイン名」と合わせてください。

JavaScript カスタマイズ設定方法

印影を表示させたいワークフローに以下のJavaScriptファイルを適用させます。

手順

1. 下記のサンプルコードを任意のファイル名で保存します。拡張子は「.js」にしてください。
    ※ 13行目のhidをご自身のフォルダIDに変更してください。

2. [Garoonシステム管理 > 各アプリケーションの管理 > ワークフロー > 申請フォームの一覧 > カスタマイズを適用したい申請フォーム]の画面を表示し、「JavaScript / CSSによるカスタマイズ」をクリックします。

3. 必要なライブラリ（jQuery）と保存したJavaScriptファイルを適用します。
※ 必ず「カスタマイズ」を「適用する」に変更してください

• jQuery
  https://js.cybozu.com/jquery/3.4.1/jquery.min.js

プログラムの解説

イベント

JavaScripitが動くイベントは、ワークフローの「詳細画面を表示した時」と「承認後画面を表示した時」となります。

印影データの取得

ファイル管理に保存している印影データを取得するために、Garoon SOAP API を利用しています。

取得した画像データからファイル名部分(=ログイン名)を取得します。

「結果」部分の取得

進行状況の「結果」部分を取得します。 ※ こちらはDOM操作となります。

印影データの表示

承認者のログイン名とファイル名を比較して、同じものがあればその印影データを「結果」部分に表示させます。※ こちらはDOM操作となります。

画像に角度をつける機能

14行目の数値を変更することで、角度を指定して画像を回転させることができます。

数値を「10」(プラス10)にすることで少し右向きに、

数値を「-20」(マイナス20)にすることで左向きに角度をつけることも可能です。

おわりに

ワークフローに「印影」をつけたいという声はかなりあると思います。

Garoonでもカスタマイズをすることで対応が可能なので、ぜひ提案の1つに入れてみてください。

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