前回の記事「 Garoon APIとUser APIで取得できるユーザー情報・組織情報の違いと注意点」にて、Garoonカスタマイズで詳しいユーザー情報を使いたい場合はUser APIを利用することをお伝えしました。
今回の記事では、User APIを利用したGaroonワークフローのカスタマイズサンプルを紹介します。
cybozu developer networkにおけるGaroon × User API連携の初紹介記事です！

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

「従業員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. [保存]ボタンをクリックし、ユーザー情報を保存します。

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

1. [Garoonシステム管理]から[各アプリケーションの管理]タブを選択します。

2. [ワークフロー]を選択し、[申請フォームの一覧]をクリックします。

3. 申請フォームを追加するカテゴリーを選択し、[申請フォームを追加する]をクリックします。

4. 「申請フォームの追加」画面で、次のように入力します。

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

5. [追加する]ボタンをクリックし、申請フォームを作成します。

6. 「申請フォームの一覧」画面から、先ほど作成した[仮払申請（拠点分岐あり）]を選択します。

7. 申請フォームの項目と経路情報を設定します。
   「申請フォームの詳細」画面で「申請フォームの項目一覧」の[項目を追加する]をクリックします。

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

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

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

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

10. 「承認経路」の[追加する]をクリックします。
    「経路ステップの追加」画面で、それぞれ次のように入力し、[追加する]ボタンをクリックします。経路種別は運用に合わせて設定してください。

    • 1番目の経路（USマネージャー）

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

    • 2番目の経路（課長）

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

    • 3番目の経路（部長）

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

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

    

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

1. 先ほどの「申請フォーム詳細」画面の「経路の分岐情報」で[設定する]をクリックします。

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

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

3. 「経路分岐条件一覧」で[追加する]をクリックします。「申請経路ステップの分岐条件の追加」画面で、それぞれ次のように入力します。

   • 1つめの条件（国内）

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

   • 2つめの条件（US）

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

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

   

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

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の ユーザー情報をエクスポートするを実行し、ユーザーの詳細情報を取得しています。
    • 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);
})();

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