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

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

プロセス図を表示するIM-BloomMakerエレメントを利用してアクティビティクリック時に、そのアクティビティに関連する履歴を表示する画面のサンプルです。
IM-BPMのREST APIを利用して、プロセスインスタンスの履歴を取得します。
プロセス図を表示するIM-BloomMakerエレメントを配置し、プロセス図を表示します。
プロセス図内のアクティビティクリック時に、取得したインスタンスの履歴から関連するインスタンスの履歴をダイアログで表示します。

注意

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

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

コラム

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

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

コラム

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

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

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

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

  3. 表示されるプロセス図内のアクティビティをクリックすることで、そのアクティビティの履歴が表示されます。

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

7.2.4.3.1. コンテンツ定義

指定されたプロセスインスタンスの履歴情報を元に、アクティビティごとの履歴を表示する画面を作成します。
画面を作成する上でのポイントは以下のとおりです。
  • コンテンツ内で使用する変数の準備
  • 対象のプロセスインスタンスIDを画面のURLから判断する。
  • IM-BPMのREST APIを使用してプロセスインスタンスの履歴情報を取得する。
  • 画面描画時にプロセスインスタンスの履歴情報を取得するアクションを実行する。
  • プロセス図中のアクティビティクリック時に実行するアクションを作成する。
  • プロセス図中のアクティビティクリック時に表示するダイアログを作成する。
  • プロセスインスタンスの実行情報のプロセス図を表示する。
  1. コンテンツ内で使用する変数の準備
    コンテンツ内で使用する変数を定義します。
    一例として、サンプル資材内で定義されているJSON形式の変数を示します。
    {
      "accessGetHistoricDataUrl": "",
      "historicDataResponce": {
        "error": false,
        "data": {
          "data": {
            "activities": [
              {
                "id": "",
                "activityId": "",
                "activityName": "",
                "assignee": "",
                "activityType": "",
                "processDefinitionId": "",
                "processDefinitionName": "",
                "processInstanceId": "",
                "executionId": "",
                "startTime": "",
                "endTime": "",
                "durationInMillis": 0,
                "tenantId": "",
                "taskId": "",
                "durationNowMillis": 0,
                "parentActivityId": "",
                "parentActivityName": ""
              }
            ],
            "variables": [],
            "comments": [],
            "variableUpdates": [],
            "formProperties": [],
            "migrations": [],
            "optionTaskActivities": [],
            "tasks": [
              {
                "assignee": "",
                "assigneeName": "",
                "candidateGroups": {},
                "candidateUsers": {},
                "claimTime": "",
                "executionId": "",
                "id": "",
                "name": "",
                "overdue": false,
                "priority": 50,
                "processDefinitionId": "",
                "processDefinitionName": "",
                "processDefinitionType": "",
                "processInstanceId": "",
                "startTime": "",
                "taskDefinitionKey": "",
                "tenantId": "",
                "variables": []
              }
            ]
          },
          "total": 0,
          "start": 0,
          "size": 0
        }
      },
      "triggerEventDetail": {
        "id": "",
        "name": "",
        "elementType": "",
        "processDefinitionId": "",
        "processDefinitionKey": "",
        "processDefinitionName": "",
        "eventName": ""
      },
      "dblClickData": {
        "id": "",
        "name": "",
        "elementType": "",
        "processDefinitionId": "",
        "processDefinitionKey": "",
        "processDefinitionName": "",
        "eventName": ""
      },
      "targetData": [
        {
          "activityId": "",
          "activityName": "",
          "activityType": "",
          "assignee": "",
          "assigneeName": "",
          "durationNowMillis": 0,
          "executionId": "",
          "id": "",
          "parentActivityId": "",
          "parentActivityName": "",
          "processDefinitionId": "",
          "processDefinitionName": "",
          "processInstanceId": "",
          "startTime": "",
          "tenantId": "",
          "showTime": "",
          "endTime": ""
        }
      ],
      "targetDataLength": 0
    }
    
    各変数の説明は以下のとおりです。
    変数名 説明
    accessGetHistoricDataUrl プロセスインスタンスIDを含めたプロセスインスタンスの履歴情報を取得するREST APIのURL
    historicDataResponce プロセスインスタンスの履歴情報を取得するREST APIのレスポンス
    triggerEventDetail プロセス図中で対象のアクティビティに対しクリックなどのイベントが発行された際に、対象の情報を格納する変数
    dblClickData プロセス図中でダブルクリックされたアクティビティの情報
    targetData 対象となるアクティビティIDに関連する履歴の情報
    targetDataLength 対象となるアクティビティ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. 画面描画時にプロセスインスタンスの履歴情報を取得するアクションを実行する。
    「コンテナ」を選択した状態で、プロパティの「ページ読み込み時」の項目で履歴情報を取得するアクションを指定します。
  5. プロセス図中のアクティビティクリック時に表示するダイアログを作成する。
    プロセス図中のアクティビティクリック時に該当のアクティビティの履歴を表示するダイアログを作成します。
    「デザイナ」画面上部、コンテナヘッダの「im_bloommaker_page_add_button」アイコンをクリックし新たなページを作成します。
    「繰り返し(imui)」に分類されるエレメントの一覧から、「縦方向のテーブル(繰り返し)」を設置します。
    テーブルエレメントのプロパティ list に対象となるアクティビティIDに関連する履歴の情報の変数を指定します。
    テーブルエレメントの各列に表示させたい情報を設定します。

    コラム

    IM-BloomMakerで新たなページを作成する方法は、「IM-BloomMaker for Accel Platform チュートリアルガイド」 - 「ページを設定する」を参照してください。

    コラム

    IM-BloomMakerの繰り返しエレメントの使用方法は、「intra-mart Developer Site」 - 「IM-BloomMaker 繰り返しエレメントでの変数の使い方」を参照してください。
  6. プロセス図中のアクティビティクリック時に実行するアクションを作成する。
    プロセス図中のアクティビティクリック時に実行するアクションを作成します。
    取得してきたプロセスインスタンスの履歴情報の中から該当のアクティビティに関連する情報のみを取得します。
    アクションエディタにて、アクションアイテム カスタムスクリプトを実行する を使用して、履歴情報の中から対象のアクティビティIDに合致するもののみを取り出します。
    取得してきた履歴情報のレスポンスが格納されている変数名を、 historicDataResponce 対象のアクティビティIDを activityId とすると、以下の方法で対象のアクティビティIDに合致する情報のみを取得できます。
    const activities = $im.resolve("$variable.historicDataResponce.data.data.activities");
    const targetData = activities.filter((v) => {
        return v.activityId === activityId;
    });
    
    さらに、履歴情報の中に含まれる時刻の形式や、処理時間を見やすい文字列へ整形したい場合は、このカスタムスクリプト内で処理します。
    整形が完了したらそのデータを、対象となるアクティビティIDに関連する履歴の情報の変数に格納します。
    以上で、データを整形するカスタムスクリプトの作成は完了です。
    アクションアイテム ページ「」をダイアログで開く を使用して、作成したダイアログ用のページを表示するよう設定します。
  7. プロセスインスタンスの実行情報のプロセス図を表示する。
    • 「IM-BPM」に分類されるエレメントの一覧から、「プロセス図(プロセスインスタンスの実行情報)」を設置します。
    ../../../../_images/process_diagram_bloommaker_element-show_activity_history_0002.png
    図 : エレメントパレット - 「IM-BPM」
    • プロセス図のエレメントのプロパティにて以下の値を設定します。
    プロパティ名 説明
    processInstanceId 入力値から取得したプロセスインスタンスID
    triggerEventDetail アクティビティに対してイベントが発行された際に、そのアクティビティの情報を格納する変数
    activityDoubleClickEvent アクティビティをダブルクリックした際に実行するアクション
    ../../../../_images/process_diagram_bloommaker_element-show_activity_history_0003.png
    図 : エレメントパレット - プロパティ

    コラム

    プロセス図を表示するIM-BloomMakerエレメントの詳細は、「IM-BPM 仕様書」 - 「プロセス図を表示するIM-BloomMakerエレメント」を参照してください。

7.2.4.3.2. ルーティング定義

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

    コラム

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

    コラム

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