カテゴリー内の他の記事

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

フォローする

Index

はじめに

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

注意事項

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

完成イメージ

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

__________2018-12-12_18.41.51.png

印影データの準備

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

__________2018-12-12_18.48.42.png

そして、印影データを保存したフォルダの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によるカスタマイズ」をクリックします。

image1.png

3. 保存したJavaScriptファイルを適用します。
※ 必ず「カスタマイズ」を「適用する」に変更してください
image2.png

プログラムの解説

イベント

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

印影データの取得

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

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

「結果」部分の取得

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

印影データの表示

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

画像に角度をつける機能

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

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

__________2018-12-12_19.51.16.png

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

__________2018-12-12_19.53.41.png

おわりに

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

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

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

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

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

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