IM-BPM for Accel Platform IM-BPM チュートリアルガイド 第18版 2021-04-01

7.2.5. プロセス図を表示するIM-BloomMakerエレメントを利用したアドオン画面の作成(2)

プロセスインスタンスの実行中のタスクの担当者を一覧表示し、ボタンクリックでその担当者が担当するタスクをプロセス図上でハイライトする画面のサンプルです。
本サンプルの要旨
  • IM-BPMのREST APIを利用して取得されるプロセスインスタンスの履歴から、現在実行中となっているタスクの担当者の一覧を取得し一覧で表示します。

  • プロセス図を表示するIM-BloomMakerエレメントを配置し、プロセス図を表示します。

  • 担当者一覧の表中のボタンをクリックすることで、そのユーザが担当しているタスクをプロセス図上でハイライト表示します。

    注意

    本サンプルは2020 Winter(Azalea)以降の環境でのみ動作します。
    ../../../../_images/process_diagram_bloommaker_element-show_task_assignee_0001.png
    図 : 「完成イメージ」

7.2.5.1. 本サンプルの構成資材

コラム

IM-BloomMaker定義情報のインポートについて

インポート手順は「IM-BloomMaker for Accel Platform ユーザ操作ガイド」-「定義ファイルをインポートする」を参照してください。

コラム

IM-Authz(認可) ポリシー - XML形式定義情報のインポートについて

パブリックストレージへのファイルの配置は「システム管理者操作ガイド」-「ファイル操作」を参照してください。
また、ジョブネット「認可(ポリシー)インポート」の実行時に実行パラメータfile を追加し、値に上記の認可ファイルのパブリックストレージ上のパスを指定してください。
または、パブリックストレージへの配置の際にファイル名をauthz-policy.xmlへリネームしてパブリックストレージのルート直下に配置し、ジョブを実行してください。

7.2.5.2. 本サンプルの使用方法

  1. サンプル資材をインポートします。
    IM-Authz(認可) ポリシー - XML形式定義情報をインポートする前にIM-BloomMaker定義情報をインポートしてください。
  2. IM-BPMプロセス参照ユーザで {ベースURL}/bpm/tutorial/process-diagram/show-task-assignee/{プロセスインスタンスID} へアクセスし、サンプル画面を表示します。

  3. 表示される「タスク担当者一覧」内の「担当タスクをハイライト」をクリックすることで、そのユーザが担当しているタスクがプロセス図上でハイライト表示されます。

7.2.5.3. IM-BloomMaker定義情報(im_bloommaker-data-process_diagram_bloommaker_element-show_task_assignee.zip)の詳細

7.2.5.3.1. コンテンツ定義

指定されたプロセスインスタンスの履歴情報を元に、プロセス図と現在実行中のタスクの担当者一覧を表示する画面を作成します。
画面を作成する上でのポイントは以下のとおりです。
  • コンテンツ内で使用する変数の準備をする。
  • 対象のプロセスインスタンスIDを画面のURLから判断する。
  • IM-BPMのREST APIを使用してプロセスインスタンスの履歴情報を取得する。
  • 取得した履歴情報の中から、現在実行中のタスクの担当者とその担当者が持つアクティビティIDの一覧を整理する。
  • 画面描画時にプロセスインスタンスの履歴情報を取得するアクションを実行する。
  • プロセスインスタンスの実行情報のプロセス図を表示する。
  • プロセス図中のアクティビティをハイライトさせるアクションを作成する。
  • 現在実行中のタスクの担当者とハイライトボタンの一覧を表で表示する。
  • ハイライトを解除するボタンを設置する。
  1. コンテンツ内で使用する変数の準備をする。
    コンテンツ内で使用する変数を定義します。
    一例として、サンプル資材内で定義されているJSON形式の変数を示します。
    {
      "accessGetHistoricDataUrl": "",
      "historicDataResponce": {
        "error": false,
        "data": {
          "data": {
            "activities": [],
            "variables": [],
            "comments": [],
            "variableUpdates": [],
            "formProperties": [],
            "migrations": [],
            "optionTaskActivities": [],
            "tasks": [
              {
                "assignee": "",
                "assigneeName": "",
                "claimTime": "",
                "deleteReason": "",
                "durationInMillis": 0,
                "endTime": "",
                "executionId": "",
                "id": "",
                "name": "",
                "overdue": false,
                "priority": 0,
                "processDefinitionId": "",
                "processDefinitionName": "",
                "processDefinitionType": "",
                "processInstanceId": "",
                "startTime": "",
                "taskDefinitionKey": "",
                "tenantId": "",
                "variables": [],
                "workTimeInMillis": 0
              }
            ]
          },
          "total": 0,
          "start": 0,
          "size": 0
        }
      },
      "assigneeDict": [
        {
          "assignee": "",
          "assigneeName": "",
          "activityId": [
            ""
          ]
        }
      ],
      "highlightActivityIds": []
    }
    
    各変数の説明は以下のとおりです。
    変数名 説明
    accessGetHistoricDataUrl プロセスインスタンスIDを含めたプロセスインスタンスの履歴情報を取得するREST APIのURL
    historicDataResponce プロセスインスタンスの履歴情報を取得するREST APIのレスポンス
    assigneeDict 現在実行中のアクティビティIDとアクティビティ名を担当者ごとに整理したデータ
    highlightActivityIds ハイライトさせたいアクティビティIDのリスト
  2. 対象のプロセスインスタンスIDを画面のURLから判断する。
    画面のURLに入力されている値をIM-BloomMakerのコンテンツ定義で使用する場合はルーティング定義のURLの設定と入力値の設定が必要です。
    このプロセスインスタンスIDは後述の、プロセスインスタンスの履歴情報を取得するREST APIのURLや、プロセス図を表示するエレメントで使用します。

    コラム

    入力値の設定に関する詳細は「IM-BloomMaker for Accel Platform ユーザ操作ガイド」 - 「入力の設定方法」を参照してください。
  3. IM-BPMのREST APIを使用してプロセスインスタンスの履歴情報を取得する。
    IM-BPMのプロセスインスタンス履歴の履歴情報をプロセスインスタンスIDより取得するREST APIを利用し、履歴情報を取得します。
    アクションエディタにて、アクションアイテム カスタムスクリプトを実行する を使用して、リクエストを送信するURLを組み立てます。
    URL「」にリクエストを送信する を使用して、組み立てたURLへリクエストを送信し、データを取得します。

    コラム

    IM-BPMのプロセスインスタンスの履歴情報を取得するREST APIの詳細については、「APIドキュメント」 - 「プロセスインスタンス履歴の履歴データ取得」を参照してください。

    コラム

    アクションの設定に関する詳細は「IM-BloomMaker for Accel Platform ユーザ操作ガイド」 - 「アクションを設定する」を参照してください。
  4. 取得した履歴情報の中から、現在実行中のタスクの担当者とその担当者が持つアクティビティIDの一覧を整理する。
    履歴情報を取得するアクションの中で URL「」にリクエストを送信する の後に、 カスタムスクリプトを実行する を設置して取得してきた情報を整理するカスタムスクリプトを実行します。
    最終的に以下の形式となるように整形します。
    [
      {
        "assignee": "%担当者のユーザコード%",
        "assigneeName": "%担当者名%",
        "activityId": [
          "%アクティビティID%"
        ]
      }
    ]
    
    REST APIから取得してきた履歴情報は $variable.historicDataResponce に格納されているとすると、今回取得したいタスクの情報は以下のように格納されています。
    情報 格納されている変数
    アクティビティID historicDataResponce.data.data.tasks.taskDefinitionKey
    担当者のユーザコード historicDataResponce.data.data.tasks.assignee
    担当者名 historicDataResponce.data.data.tasks.assigneeName
    一例として、サンプル資材内で定義されているカスタムスクリプトを示します。
    const tasks = $im.resolve("$variable.historicDataResponce.data.data.tasks")
    
    const assigneeDict = []
    
    tasks.forEach((value) => {
      // 担当者なしや完了しているタスクは対象外とする。
      if (typeof value.assignee === 'undefined' || typeof value.endTime !== 'undefined') {
        return;
      }
    
      const assigneeList = assigneeDict.map(v => v.assignee)
      const i = assigneeList.indexOf(value.assignee);
      if (i >= 0) {
        assigneeDict[i].activityId.push(value.taskDefinitionKey);
      } else {
        const newRecord = {
          assignee: value.assignee,
          assigneeName: value.assigneeName,
          activityId: [value.taskDefinitionKey]
        }
        assigneeDict.push(newRecord);
      }
    })
    
    $variable.assigneeDict = assigneeDict;
    
  5. 画面描画時にプロセスインスタンスの履歴情報を取得するアクションを実行する。
    「コンテナ」を選択した状態で、プロパティの「ページ読み込み時」の項目で履歴情報を取得するアクションを指定します。
  6. プロセスインスタンスの実行情報のプロセス図を表示する。
    • 「IM-BPM」に分類されるエレメントの一覧から、「プロセス図(プロセスインスタンスの実行情報)」を設置します。
    ../../../../_images/process_diagram_bloommaker_element-show_task_assignee_0002.png
    図 : エレメントパレット - 「IM-BPM」
    • プロセス図のエレメントのプロパティにて以下の値を設定します。
    プロパティ名 説明
    processInstanceId 入力値から取得したプロセスインスタンスID
    selectingActivityIdList ハイライトさせたいアクティビティIDのリストを格納する変数
    ../../../../_images/process_diagram_bloommaker_element-show_task_assignee_0003.png
    図 : エレメントパレット - プロパティ

    コラム

    プロセス図を表示するIM-BloomMakerエレメントの詳細は、「IM-BPM 仕様書」 - 「プロセス図を表示するIM-BloomMakerエレメント」を参照してください。
  7. プロセス図中のアクティビティをハイライト・アンハイライトさせるアクションを作成する。
    後述の手順で、表示タスク担当者の一覧を「横方向のテーブル(繰り返し)」を使用して作成します。
    一覧中にあるボタンがクリックされた際に実行する、アクティビティをハイライトさせるアクションを実装します。
    具体的には、ハイライトさせたいアクティビティIDのリスト格納する変数に対象のアクティビティIDを設定します。
    アクションエディタにて、アクションアイテム 変数「」に「」を代入する を使用して、目的のIDの配列を代入します。
    繰り返しエレメントを使用しているため、対象の要素へは $index を指定することでアクセスできます。

    コラム

    IM-BloomMakerの繰り返しエレメントの使用方法は、「intra-mart Developer Site」 - 「IM-BloomMaker 繰り返しエレメントでの変数の使い方」を参照してください。
    アンハイライトさせるアクションについても、同様にアクションアイテム 変数「」に「」を代入する を使用して、空の配列を代入することで実現可能です。
  8. 現在実行中のタスクの担当者とハイライトボタンの一覧を表で表示する。
    表示タスク担当者の一覧を 横方向のテーブル(繰り返し) を使用して作成します。
    「繰り返し(imui)」に分類されるエレメントの一覧から、「横方向のテーブル(繰り返し)」を設置します。
    「横方向のテーブル(繰り返し)」エレメントのプロパティで以下を設定します。
    プロパティ名 説明
    list 現在実行中のアクティビティIDとアクティビティ名を担当者ごとに整理したデータ
    「横方向のテーブル(繰り返し)」内の「テーブルヘッダ」エレメントのプロパティで以下を設定します。
    なお、要素にアクセスする際は $index を使用します。
    プロパティ名 説明
    textContent 担当者名
    「横方向のテーブル(繰り返し)」内の「テーブルデータ」エレメント配下に、「フォーム部品(imui)」に分類されるエレメントの一覧から、「ボタン」を設置します。
    設置した「ボタン」エレメントのプロパティ項目「イベント」で以下を設定します。
    プロパティ名 説明
    クリック時 プロセス図中のアクティビティをハイライトさせるアクション
  9. ハイライトを解除するボタンを設置する。
    「フォーム部品(imui)」に分類されるエレメントの一覧から、「ボタン」を設置します。
    設置した「ボタン」エレメントのプロパティ項目「イベント」で以下を設定します。
    プロパティ名 説明
    クリック時 プロセス図中のアクティビティをアンハイライトさせるアクション

7.2.5.3.2. ルーティング定義

  1. コンテンツ定義で作成した画面にアクセスをするために、ルーティング定義を作成します。
    ルーティング定義を作成する際のURLは、コンテンツ定義の入力値に渡すプロセス定義を含めた動的URLとする必要があります。

    コラム

    ルーティングの登録に関する詳細は「IM-BloomMaker for Accel Platform ユーザ操作ガイド」 - 「ルーティングを新規登録する」を参照してください。
  2. ルーティング定義に認可を設定する。
    作成したルーティングにアクセスするためには、適切な認可の設定が必要です。
    本サンプルでは、「IM-BPMプロセス参照ユーザ」に対して「参照」権限を付与しています。

    コラム

    ルーティングの認可設定の詳細は「IM-BloomMaker for Accel Platform チュートリアルガイド」-「ルーティングの認可を設定する」を参照してください。