cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

User API のユーザー情報を使って Garoon ワークフローをカスタマイズする

作成日
更新日

はじめに

前回の記事「Garoon API と User API で取得できるユーザー情報・組織情報の違いと注意点」で、Garoon カスタマイズで詳しいユーザー情報を使いたい場合は、User API を利用することをお伝えしました。

今回の記事では、User API を利用した Garoon ワークフローのカスタマイズサンプルを紹介します。
cybozu developer network における Garoon × User API 連携の初紹介記事です！

完成イメージ

今回、Garoon ワークフローのサンプルフォームにある「仮払申請」ワークフローをベースに、次のカスタマイズをします。

申請フォームに、申請者の「従業員 ID」を表示し、入力不可にする

「従業員ID」に、User API で取得したログインユーザーの従業員 ID を設定します。

申請者の「拠点」（ユーザー情報のカスタマイズ項目）に応じて、ワークフローの申請経路を分岐させる

Garoon の経路分岐を利用します。分岐条件に使う「拠点」の初期値に User API で取得したユーザー情報をセットします。
※「拠点」は項目タイプが「メニュー」のため、編集不可には設定できません（参考：申請フォーム項目の編集可／不可）

  • 承認フロー
  • Garoon ワークフローイメージ

設定

ユーザー情報の設定

カスタマイズ項目「拠点」の追加（参考：ユーザー情報の項目を追加する）

  1. [cybozu.com共通管理] から「ユーザー管理」の[組織/ユーザー]を選択します。
  2. 「ユーザー」欄の[プロフィール項目の設定]ボタンをクリックし、「カスタマイズ項目の設定」の[追加]ボタンをクリックします。
  3. 「カスタマイズ項目の追加」画面で、次のように入力します。


    項目名 値
    項目名 拠点
    項目コード userPlace
    タイプ 文字列（1行）
    公開/非公開 すべてのユーザーにカスタマイズ項目の値を公開する場合は、チェックを入れてください。
    ユーザーによる変更 ユーザー本人に項目の値の変更を許可する場合は、チェックを入れてください。
  4. [保存]ボタンをクリックし、カスタマイズ項目を追加します。

ユーザー情報の編集（参考：ユーザー情報を編集する）

  1. 「cybozu.com共通管理」画面を開き、「ユーザー管理」から[組織/ユーザー]を選択します。
  2. 「組織」欄でユーザーが所属する組織を選択し、編集したいユーザーの編集アイコンをクリックします。
  3. ユーザー情報を編集します。
    従業員IDが入力されていない場合は、従業員IDを入力します。
    また、さきほど追加した項目「拠点」に、そのユーザーの拠点（今回の例では「国内」または「US」）を入力します。
  4. [保存]ボタンをクリックし、ユーザー情報を保存します。

Garoon ワークフローの設定

申請フォーム作成（参考：申請フォームの追加）

  1. [Garoon システム管理] から[各アプリケーションの管理]タブを選択します。
  2. [ワークフロー]を選択し、[申請フォームの一覧]をクリックします。
  3. 申請フォームを追加するカテゴリーを選択し、[申請フォームを追加する]をクリックします。
  4. 「申請フォームの追加」画面で、次のように入力します。
    項目名 値
    カテゴリー 選択したカテゴリー名
    申請フォーム名 仮払申請（拠点分岐あり）
    申請フォームコード temporary_payment
    説明 なし
  5. [追加する]ボタンをクリックし、申請フォームを作成します。
  6. 「申請フォームの一覧」画面から、さきほど作成した[仮払申請（拠点分岐あり）]を選択します。
  7. 申請フォームの項目と経路情報を設定します。
    「申請フォームの詳細」画面で、「申請フォームの項目一覧」の[項目を追加する]をクリックします。
  8. 次の項目をそれぞれ追加します。
    項目名 項目タイプ 項目コード 必須 備考
    従業員ID 文字列（１行） employeeId ○  
    拠点 メニュー userPlace ○ メニュー項目に、改行区切りで次のように入力します。 
    国内
    US
    精算予定日 日付      
    金額 数値     「桁区切りを表示する」にチェックをいれます。
    「入力欄の前/後の文字」に「¥」を「前に配置する」を設定します。
    仮払内容 文字列（複数行）     サイズは、「40桁x6行」とします。
    初期値に以下を設定します。 
    【内容】

    【目的】

    【備考】
  9. 「経路情報」の[専用経路を設定する]をクリックします。「専用経路の設定」画面で、次のように入力し、[設定する]ボタンをクリックし、保存します。
    項目 値
    経路名 仮払申請経路
    経路コード temporary_payment_fork
    経路の説明 なし
  10. 「承認経路」の[追加する]をクリックします。「経路ステップの追加」画面で、それぞれ次のように入力し、[追加する]ボタンをクリックします。
    ※ 経路種別は運用に合わせて設定してください。
    • 1番目の経路（USマネージャー）
      項目名 値
      経路ステップ名 USマネージャー
      経路種別 承認（誰か１人）
    • 2番目の経路（課長）
      項目 値
      経路ステップ名 課長
      経路種別 承認（誰か１人）
    • 3番目の経路（部長）
      項目 値
      経路ステップ名 部長
      経路種別 承認（誰か１人）

    最終的に、承認フローは下図のようになります。
    20190520_132833.png

経路の分岐情報（参考：経路分岐の設定）

  1. さきほどの「申請フォーム詳細」画面の「経路の分岐情報」で[設定する]をクリックします。
  2. 「経路分岐情報の設定」画面で、次のように入力し、[適用する]ボタンをクリックします。
    項目名 値
    項目タイプ メニュー
    分岐項目 拠点
  3. 「経路分岐条件一覧」で[追加する]をクリックします。「申請経路ステップの分岐条件の追加」画面で、それぞれ次のように入力します。
    • 1つめの条件（国内）
      項目名 値
      経路分岐名 国内
      分岐条件 拠点が「次と同じ」「国内」
      経路 経路ステップが「USマネージャー」のチェックを外します。
    • 2つめの条件（US）
      項目名 値
      経路分岐名 US
      分岐条件 拠点が「次と同じ」「US」
      経路 経路ステップですべてチェックが付いている状態にします。

    最終的に、経路分岐条件は下図のようになります。
    20190520_133234.png

申請フォームの有効化（参考：申請フォームの有効化）

  1. 「申請フォーム情報」の[有効にする]をクリックします。
  2. 「申請フォームの有効化」画面の[はい]ボタンをクリックし、申請フォームを有効にします。

カスタマイズの適用

カスタマイズファイルの準備

今回のカスタマイズでは、次のカスタマイズファイルを利用します。
また、カスタマイズファイル内では、Cybozu CDN に公開されている jQuery を利用しています。

  • カスタマイズファイル
    • 申請フォームをカスタマイズするファイル（customize.js）
  • 外部ライブラリ
    • jQuery 3.3.1
      https://js.cybozu.com/jquery/3.3.1/jquery.min.js

カスタマイズファイル

  • 申請フォームをカスタマイズするファイル（customize.js）
    • 次のカスタマイズを行います。
      • 申請フォームに、申請者の「従業員 ID」を表示し、入力不可にする
      • 申請者の「拠点」（ユーザー情報のカスタマイズ項目）に応じて、ワークフローの申請経路を分岐させる
    • ポイントは、13〜23行目の getUserInfo と 29〜55行目の initWorkflowRequest です。
      • getUserInfo では、jQuery の Ajax を利用して User API のユーザーエクスポート APIを実行し、ユーザーの詳細情報を取得しています。
      • initWorkflowRequest では、getUserInfo で取得したユーザーの詳細情報を利用し、申請フォームに値を設定しています。

カスタマイズの適用

  1. [Garoon システム管理] から、[各アプリケーションの管理]タブを選択します。
  2. [ワークフロー]を選択し、[申請フォームの一覧]をクリックします。
  3. 「申請フォームの一覧」画面から、Garoon ワークフローの設定で追加した「仮払申請（拠点分岐あり） 」を選択します。
  4. 「申請フォーム情報」の[JavaScript /CSSによるカスタマイズ]をクリックします。
  5. 「JavaScript / CSSによるカスタマイズ」画面で、次のように入力し、[設定する]ボタンをクリックします。


    項目名 値
    カスタマイズ 適用する
    JavaScript カスタマイズ 次の順でリンクおよびファイルを追加します。
    • https://js.cybozu.com/jquery/3.3.1/jquery.min.js
    • ワークフローをカスタマイズする JavaScript ファイル（customize.js）
    CSSカスタマイズ なし 

手順は以上です。

おわりに

ユーザー情報と紐づくことの多い Garoon は、User API を連携させるとカスタマイズの幅が広がります。

今回の「拠点」のように、あらかじめ.com のユーザー情報のカスタマイズ項目として設定しておけば、User API で取得でき、これまで利用者に入力してもらっていた項目も初期値設定できるようになります。

ぜひ、Garoon × User API カスタマイズで、さらなる業務効率化につなげていただければと思います。

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

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

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

Avatar
中村

こちらのソースを変更して

申請者の「役職」に応じて、ワークフローの申請経路を分岐させたいのですが

上手く動作しません。

アドバイスを頂く事は可能でしょうか。

Avatar
cybozu Development team

中村真規 様

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

本記事のコメント欄は記事に対するフィードバックをする場となっております。
記事の内容の発展や、直接的に関連がない「記事を参考にした技術的な質問」は、
お手数ですが cybozu developer コミュニティ のご利用をお願いします。

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

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