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

Garoon 開発 Tips

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 ワークフローイメージ

設定

ユーザー情報の設定

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

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

「カスタマイズ項目の追加」画面で、次のように入力します。

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

[保存]ボタンをクリックし、カスタマイズ項目を追加します。

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

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

Garoon ワークフローの設定

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

[Garoon システム管理]から[各アプリケーションの管理]タブを選択します。
[ワークフロー]を選択し、[申請フォームの一覧]をクリックします。
申請フォームを追加するカテゴリーを選択し、[申請フォームを追加する]をクリックします。
「申請フォームの追加」画面で、次のように入力します。

項目名値

カテゴリー選択したカテゴリー名

申請フォーム名仮払申請（拠点分岐あり）

申請フォームコード temporary_payment

説明なし
[追加する]ボタンをクリックし、申請フォームを作成します。
「申請フォームの一覧」画面から、先ほど作成した[仮払申請（拠点分岐あり）]を選択します。
申請フォームの項目と経路情報を設定します。
「申請フォームの詳細」画面で「申請フォームの項目一覧」の[項目を追加する]をクリックします。

項目名	値
カテゴリー	選択したカテゴリー名
申請フォーム名	仮払申請（拠点分岐あり）
申請フォームコード	temporary_payment
説明	なし

次の項目をそれぞれ追加します。

項目名	項目タイプ	項目コード	必須	備考
従業員ID	文字列（１行）	employeeId	必須
拠点	メニュー	userPlace	必須	メニュー項目に、改行区切りで次のように入力します。国内 US
精算予定日	日付
金額	数値			「桁区切りを表示する」にチェックをいれます。「入力欄の前/後の文字」に「¥」を「前に配置する」を設定します。
仮払内容	文字列（複数行）			サイズは 40 桁 x 6 行とします。初期値に以下を設定します。【内容】【目的】【備考】

「経路情報」の[専用経路を設定する]をクリックします。「専用経路の設定」画面で、次のように入力し、[設定する]ボタンをクリックし、保存します。

項目値

経路名仮払申請経路

経路コード temporary_payment_fork

経路の説明なし
「承認経路」の[追加する]をクリックします。
「経路ステップの追加」画面で、それぞれ次のように入力し、[追加する]ボタンをクリックします。経路種別は運用に合わせて設定してください。
- 1 番目の経路（US マネージャー）
  
  項目名値
  
  経路ステップ名 USマネージャー
  
  経路種別承認（誰か１人）
- 2 番目の経路（課長）
  
  項目値
  
  経路ステップ名課長
  
  経路種別承認（誰か１人）
- 3 番目の経路（部長）
  
  項目値
  
  経路ステップ名部長
  
  経路種別承認（誰か１人）
最終的に、承認フローは下図のようになります。

項目	値
経路名	仮払申請経路
経路コード	temporary_payment_fork
経路の説明	なし

項目名	値
経路ステップ名	USマネージャー
経路種別	承認（誰か１人）

項目	値
経路ステップ名	課長
経路種別	承認（誰か１人）

項目	値
経路ステップ名	部長
経路種別	承認（誰か１人）

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

先ほどの「申請フォーム詳細」画面の「経路の分岐情報」で[設定する]をクリックします。
「経路分岐情報の設定」画面で、次のように入力し、[適用する]ボタンをクリックします。

項目名値

項目タイプメニュー

分岐項目拠点
「経路分岐条件一覧」で[追加する]をクリックします。「申請経路ステップの分岐条件の追加」画面で、それぞれ次のように入力します。
- 1 つめの条件（国内）
  
  項目名値
  
  経路分岐名国内
  
  分岐条件拠点が「次と同じ」「国内」
  
  経路経路ステップが「USマネージャー」のチェックを外します。
- 2 つめの条件（US）
  
  項目名値
  
  経路分岐名 US
  
  分岐条件拠点が「次と同じ」「US」
  
  経路経路ステップですべてチェックが付いている状態にします。
最終的に、経路分岐条件は下図のようになります。

項目名	値
項目タイプ	メニュー
分岐項目	拠点

項目名	値
経路分岐名	国内
分岐条件	拠点が「次と同じ」「国内」
経路	経路ステップが「USマネージャー」のチェックを外します。

項目名	値
経路分岐名	US
分岐条件	拠点が「次と同じ」「US」
経路	経路ステップですべてチェックが付いている状態にします。

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

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

カスタマイズの適用

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

今回のカスタマイズでは、次のカスタマイズファイルを利用します。
また、カスタマイズファイル内では、 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 のユーザー情報をエクスポートするを実行し、ユーザーの詳細情報を取得しています。
  - initWorkflowRequest では、getUserInfo で取得したユーザーの詳細情報を利用し、申請フォームに値を設定しています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62


/*
 * Garoon customize using User API
 * Copyright (c) 2019 Cybozu
 *
 * Licensed under the MIT License
 */

(function() {
  'use strict';
  const myJQuery = jQuery.noConflict(true);
  (function($) {

    const getUserInfo = function() {
      return new garoon.Promise((resolve, reject) => {
        $.ajax({
          url: '/v1/users.json?codes[0]=' + garoon.base.user.getLoginUser().code,
          method: 'GET',
          dataType: 'json'
        }).then((resp) => {
          resolve(resp);
        });
      });
    };

    const isUserPlace = function(customValue) {
      return customValue.code === 'userPlace';
    };

    const initWorkflowRequest = function() {
      return getUserInfo().then((resp) => {
        if (resp.users.length === 0) {
          return;
        }
        const user = resp.users[0];
        const request = garoon.workflow.request.get();

        // 従業員IDの設定および入力不可
        const employeeId = resp.users[0].employeeNumber;
        if (employeeId) {
          request.items.employeeId.value = employeeId;
          garoon.workflow.request.setItemEditable('employeeId', false);
        }

        // 拠点
        const customValues = user.customItemValues;
        if (customValues.length !== 0) {
        // 項目コードが「userPlace」のカスタマイズ項目を取得
          const userPlaces = customValues.filter(isUserPlace);
          if (userPlaces.length > 0) {
            request.items.userPlace.value = userPlaces[0].value;
          }
        }
        garoon.workflow.request.set(request);
      });
    };

    garoon.events.on('workflow.request.create.show', (event) => {
      initWorkflowRequest();
      return event;
    });
  })(myJQuery);
})();

カスタマイズファイルの適用

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

「JavaScript / CSS によるカスタマイズ」画面で、次のように入力し、[設定する]ボタンをクリックします。

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

手順は以上です。

おわりに

ユーザー情報と紐づくことの多い Garoon は、User API を連携させるとカスタマイズの幅が広がります。
今回の「拠点」のように、あらかじめ cybozu.com のユーザー情報をカスタマイズ項目として設定しておけば User API で取得でき、これまで利用者に入力してもらっていた項目も初期値設定できます。
ぜひ Garoon × User API カスタマイズで、さらなる業務効率化につなげていただければと思います。

この Tips は、2019 年 5 月版 Garoon で動作を確認しています。

Garoon 開発 Tips