UI デザイナーを使用して案件概況ページを作成する方法

あなたは、 Studio のデフォルトで生成された案件概況ページを変更したり、あなた独自の案件概況ページを構築する必要がある場合は、進行中の案件と完了済みの案件の両方の表示・管理する必要があります。
このチュートリアルでは、進行中の案件と完了済みの案件の両方を管理する複雑な要件をシンプルな１つのページで作成する方法について説明します。UI デザイナーで新しいページを作成することから始めましょう。

「caseId」の URL パラメータを管理する

UI デザイナーで新しいページを作成します。
このページは、特定の caseId に関連した案件詳細を表示するために使用されます。
私たちは、ページ URLを使用してこの caseId を取得します。
したがって、まず次の新しい変数を追加します。

- 名前 = caseId
- タイプ = URL parameter
- URL parameter 名前 = id

caseId が進行中の案件（オープンケース）を示しているか

この caseId が進行中の案件を示しているかどうかを知るためには、
「bpm/case」の Get API リクエストを使用してその案件を取得する必要があります。
したがって、次の新しい変数を作成します。

- 名前 = openCase
- タイプ = External API
- API URL = ../API/bpm/case/{{caseId}}?d=started_by&d=processDefinitionId

この案件が進行中の場合は、javascript の変数 openCase にはその案件の JSON オブジェクト表現が含まれています。
そうでない場合は、404 error に起因してオブジェクト openCase は undefined になります。

caseId が完了済みの案件（アーカイブ ケース）を示しているか

この caseId が完了済みの案件を示しているかどうかを知るためには、
sourceObjectId={{caseId}} でフィルターをかけた 「bpm/archivedCase」の Get API リクエストをその案件を取得する必要があります。
したがって、次の新しい変数を作成します。

- 名前 = archivedCase
- タイプ = External API
- API URL = ../API/bpm/archivedCase?c=1&d=started_by&d=processDefinitionId&f=sourceObjectId%3D{{caseId}}&p=0

案件が完了している場合は、javascript の変数 archivedCase には１つのオブジェクトの JSON リストが含まれ、完了済みの案件の JSON 表現です。
そうでない場合は、空のリストになります。

案件が存在していない可能性もある

これらの２つの変数、openCase とarchivedCase を使用することにより、案件の状態を知ることが簡単になります。
但し、 openCase と archivedCase の両方が undefined になる可能性があることに留意する必要があります。それはその案件が存在しないことを意味します。
したがって、この場合は「”案件ID: {{ caseId}} は存在しません。”」と言うメッセージを表示する必要があります。

案件の詳細を表示する

私たちは案件の状態を定義できるので、UI デザイナーを使用して案件の詳細を表示することは容易です。
進行中の案件と完了済みの案件で異なる情報を表示する必要があります。
したがって、私たちは条件付きで表示される２つの異なるコンテナを作成することができます。
進行中の案件のコンテナでは、そのコンテナの「非表示」プロパティにの条件値をバインドすることによって、 openCase 定義されてる場合は、進行中の案件の詳細が表示されますます。

!openCase

完了済みの案件のコンテナでは、そのコンテナの「非表示」プロパティに次の条件値をバインドすることによって、 archivedCase が空でない場合は、完了済みの案件の詳細が表示されます。

((!archivedCase) || (archivedCase.length==0))