BPM7 チュートリアル(7.2.3まで)

はじめに

このチュートリアルでは、プロセスを内包するアプリケーションの作成方法を説明します。このアプリケーションは Bonita BPM コミュニティ エディションを使用して作成しますが、使用する機能はすべてのエディションで利用可能です。アプリケーションの例は、出張ツールです。Bonita BPM の以前のバージョンで使用していた入門チュートリアルと同じものです。

社員は、自分の未承認および承認済み出張申請を参照するために出張ツールアプリケーションを開きます。社員が新しい出張申請を作成するとその申請はその社員の上司に送られます。上司はその申請をレビューして承認または却下を裁決します。実際の出張申請管理では承認後に、旅費の見積、第２レベルの承認可否判定などいくつかのプロセス ステップが続くでしょう。経費がある基準値をパスした場合、出張後の旅費精算申請送付、旅費精算申請レビュー、社内規定外の例外対応、支払いの承認などが後に続くはずです。しかし、このチュートリアルでは、出張申請が送付されレビューされるプロセスの最初の部分だけを考えます。

このチュートリアルは、あなたが Bonita BPM を初めて使用する開発者であることを前提に、Bonita BPM Studio の使用に必要な UI デザイナーと Bonita BPM ポータルの使い方を説明します。なお、説明は、あなたが JavaScript、JSON および REST API に精通していることを前提に進めます。

プロセスを定義するためには、Bonita BPM Studio を使用します。Studio にはページやフォームを作成しために使用する UI デザイナーが含まれています。なお、アプリケーションをビルドするためには、Bonita BPM ポータルを使用します。

 

このチュートリアルは、プロセスを包括的に管理するアプリケーションを作成すること最終ゴールとし、次のステップで進めます。

アプリケーションページを設計する

アプリケーションを作成する最初のステップは、ユーザーインターフェイスとなるアプリケーションページを設計することです。設計者は、ダミーのサンプルデータを使用して業務担当者が理解しやすいプロトタイプ アプリケーションを作成します。このアプローチは、あなたが業務関係者と一緒にアプリケーションをレビューすることを容易にし、より複雑な開発作業に進む前にアプリケーションの業務要求を具体的に検証できます。

Bonita BPM Studio の UI デザイナーは、アプリケーションのページとフォームを作成する環境です。UI デザイナーを開始するには、Bonita BPM Studio の画面最上位にあるクールバー内の UI デザイナー アイコンをクリックすると、UI デザイナーがブラウザを開きます。

出張ツールは、未承認および承認済みの出張申請のリストを現在の利用者に表示するホームページを持ち、そのホームページには新しい出張申請を開始するボタンがあります。

旅費管理プロセスに関連するフォームであるページは、次のような作業場面にいくつか存在します。

  • 出張申請を作成する
  • 出張申請をレビューし、それを承認または却下する

これらのフォームを作成する簡単な方法はプロセス定義を基に作成することですが、このチュートリアルではその方法の説明を対象外にしています。

このセクションでは、アプリケーションページを作成し、フォーム内の項目にダミーのデータを埋める方法から説明します。各段階では [プレビュー] をクリックし、利用者にどのように見えるか、ページの概観を確認することができます。なお、あなたのページ作成の作業結果を失わないように変更の都度、[保存] をクリックすることを心がけてください。

出張ツールのホームページを作成する

Bonita BPM Studio ではクールバー内のアイコンをクリックすることによって、UI デザイナーを開始します。UI デザイナーがあなたのブラウザ内にホームページとして開きます。

[新規ページ] フィールドで ページ名に「TravelToolPrototype」を入力します。この名前はスペースや特殊文字を含めてはいけません。この名前はページを識別するために Bonita BPM 内で使用されますが、アプリケーションの利用者には表示されません。そして、+ のアイコンをクリックするか、またはリターンキーを押します。これで、PAGE EDITOR 内に新しいページが開きます。

左のパレットからウィジェットをドラックし、中央パネルのホワイトボードにそれをドロップすることによって、ページに構造を作成します。右のパネル内のプロパティを選択、変更することによってウィジェットの特性を設定します。

  • TEXT ウィジェットをドラック＆ドロップし、その [Text] プロパティに「ユーザー名」を入力します。
  • TITLE ウィジェットをドラック＆ドロップし、その [Text] プロパティに「出張ツール」を入力します。
  • TEXT ウィジェットをドラック＆ドロップし、その [Text] プロパティにアプリケーションの案内文として「このページはあなたの未承認および承認済みの出張申請をリストします。」を入力します。
  • ユーザーの未承認の出張申請を表示するために、次のウィジェットを内包する CONTAINER ウィジェットをドラック＆ドロップします。そしてその CONTAINER ウィジェット内に次のウィジェットをドラック＆ドロップします。
    • TITLE ウィジェット： [タイトル レベル] プロパティにページレベルのタイトルより小さめのレベルを設定し、その [Text] プロパティに「未承認の出張申請」を入力します。
    • TABLE ウィジェット： 未承認の出張申請をリストするために、次のプロパティを設定します。
      • [ヘッダー] プロパティに「出発日, 宿泊日数, ホテルの手配必要, 出張先, 出張目的」を入力します。
      • [列を示すキー] プロパティに「departureDate, numberOfNights, hotelNeeded, destination, reason」を入力します。
    • LINK ウィジェット： [Text] プロパティに「新しい出張申請を作成」を設定し、[スタイル] プロパティで「primary」を選択します。
  • ユーザーの承認済み出張申請を表示するために、次のウィジェットを内包する CONTAINER ウィジェットをドラック＆ドロップします。そしてその CONTAINER ウィジェット内に次のウィジェットをドラック＆ドロップします。
    • TITLE ウィジェット： [タイトル レベル] プロパティにページレベルのタイトルより小さめのレベルを設定し、その [Text] プロパティに「承認済み出張申請」を入力します。
    • TABLE ウィジェット： 承認済み出張申請をリストするために、次のプロパティを設定します。
      • [ヘッダー] プロパティに「出発日, 宿泊日数, ホテルの手配必要, 出張先, 出張目的」を入力します。
      • [列を示すキー] プロパティに「departureDate, numberOfNights, hotelNeeded, destination, reason」を入力します。

ウィジェットを追加したとき、ページの表示を確認するためには、[プレビュー] をクリックします。ドラック＆ドロップや [幅] プロパティを使用してホワイトボード内のウィジェットの配置をあなたの納得が行くまで変更します。

サンプルデータを追加する

いくつかのサンプルデータを使用してテープルがどのように見えるか表現します。まず最初にデータを含む変数を作成し、ウィジェットにその変数の [値] プロパティにバインドします。アプリケーションでは実際のデータは REST API のコールによって取得されたビジネス データになります。設計時は、ビジネス要求の確認のためアプリケーションの具体的なイメージ作りが必要ですから、この出張申請のサンプルデータはコーディングを必要としない JSON で記述します。これには、myPendingRequests_dummy（未承認の出張申請）と myApprovedRequests_dummy（承認済みの出張申請）の２つの JSON 変数が必要になります。

myPendingRequests_dummy を作成するには、

  1. ページの最下にある[変数] タブ内の[新規変数を作成] をクリックします。
  2. 名前に「myPendingRequests_dummy」を入力します。
  3. タイプに「JSON」を選択します。
  4. 値に次の文字列を入力します。 
    [
{ "userId": "3", "destination":"大阪", "departureDate": "18/6/2015", "numberOfNights":"1", "hotelNeeded":"true", "reason":"客先との打ち合わせ", "status":"未定", "refusalReason":"" },
{ "userId": "3", "destination":"パリ", "departureDate": "10/09/2015", "numberOfNights":"3", "hotelNeeded":"false", "reason":"オープンソース・コンファレンス参加", "status":"未定", "refusalReason":"" },
{ "userId": "3", "destination":"サンフランシスコ", "departureDate": "07/07/2015", "numberOfNights":"4", "hotelNeeded":"false", "reason":"BPAD トレーニング", "status":"未定", "refusalReason":"" }
]

    [保存] をクリックします。

  5. 未承認の出張申請を表示するために、TABLE ウィジェットを選択します。
  6. その[コンテンツ] プロパティ内の右にあるバインド・アイコン(“fx”)をクリックし、そのボックス内で「m」（先に設定した変数の先頭文字）を入力するとオートコンプリートが開きます。その表示された変数リストから「myPendingRequests_dummy」を選択します。
  7. このページに設定した未承認の出張申請のサンプルデータが表示されるか確認するために[プレビュー] をクリックします。

同様にmyApprovedRequests_dummy を作成し、次の内容を設定します。

[
{ "userId": "3", "destination":"福岡", "departureDate": "10/10/2015", "numberOfNights":"5", "hotelNeeded":"true", "reason":"人事システム打ち合わせ", "status":"承認", "refusalReason":"" },
{ "userId": "3", "departureDate": "12/11/2015", "numberOfNights":"3", "hotelNeeded":"false", "destination":"大阪", "reason":"開発チーム打ち合わせ", "status":"承認", "refusalReason":"" }
]

この変数を定義したら、未承認の出張申請の TABLE ウィジェットを選択して、その[コンテンツ] プロパティの値に「myApprovedRequests_dummy」に設定します（右にあるバインド・アイコン(“fx”)をクリックすることをお忘れなく）。

ページの概観を検討・改良する

さて、サンプルデータを使用して TravelTool ページのプロトタイプができました。プロトタイプをレビューし、あなたが満足するページ外観になるまでウィジェットの表示位置を調整します。ウィジェットの表示順番の並び替えは、ドラッグ＆ドロップで行えます。さらに、[幅] と [配置] などのプロパティで表示幅や文字の配置（右、左、中央）を変更できます。たとえば、このページを改良するには、次の変更ができます。

  • ユーザー名のウィジェットを選択し、その[配置] プロパティを「右」に変更します。
  • 出張ツールのウィジェットを選択し、それをユーザー名のウィジェットの横にドラッグするとそのユーザー名のウィジェットのサイズが自動的に調整され、両方のウィジェットが同じ行になります。
  • 新しい出張申請を作成のウィジェットを選択し、その [配置] プロパティを「中央」に変更します。

以上の手順で作成したアプリケーションベージ プロトタイプのプレビュー結果は、次のようなイメージになります。

prototype_application_page_preview

データモデルを定義する

ビジネス データは、コミュニティ エディション 7.0 の新機能です。

変数の定義は2段階あります。最初にビジネス データモデルを定義し、モデルのオブジェクトをプロセスが操作する方法を指定します。このモデルは一連の Java オブジェクトとして定義され、プロセスはそれらのオブジェクトのインスタンスを使用します。あなたがこの用語に不慣れな場合、このモデルは「構造化された変数の集まりを持つ（プロセスを超えた）グローバルな定義である」とだけ覚えておいてください。あなたのプロセスには、この集まりの中から関連する部分を選択します。

まず最初に、ビジネス データモデルを作成します。これはあらゆるプロセスで利用可能です。１つのオブジェクトで１つのモデルを作成します。

  • TravelRequestT1 は、申請された出張の明細とその承認状況のデータを含みます。

ビジネス データモデルを定義するためには、

  1. [開発] メニューに進んで、[ビジネス データモデル] を選択し、[管理…] を選択します。これで、ビジネス データモデルを管理するためのダイアログが開きます。
  2. ビジネス オブジェクトのリストのそばにある[追加] をクリックすると、そのリストに「BusinessObject1」のような仮の名前が追加されます。
  3. その仮の名前をクリックして「TravelRequestT1」に変更します。
  4. 「TravelRequestT1」のビジネスオブジェクト型を選択し、その属性を追加します。この表には属性とそのデータ型が表示されます。
    属性名 データ型 必須
    userId LONG yes
    departureDate DATE yes
    numberOfNights INTEGER yes
    hotelNeeded BOOLEAN yes
    destination STRING yes
    reason STRING yes
    status STRING yes
    refusalReason STRING no

    各属性は次のように追加します。

    1. [属性] タブで [追加] をクリックすると、仮の属性名が名前の列に追加されます。
    2. 仮の名前を上表の属性名に変更します。
    3. ドロップダウンリストからデータ型を選択します。リストを表示するには、データ型の列の右端をクリックします。
    4. このオブジェクトには配列の属性がないので、[複数（配列）] の列は無視できます。
    5. [必須] の列では、必須である属性に対してそのボックスをチェックします。最終結果は、次のようになります。BDM
  5. 次の操作で userId と status の両方でデータを検索するカスタムのクエリを追加します。
    1. [クエリ] タブの[カスタム] をチェックします。
    2. [追加] をクリックすると名前の列に仮のクエリ名が追加されます。
    3. 仮の名前を「findByUserIdAndStatus」に変更します。
    4. [クエリ] の列をクリックし、右端に表示される編集アイコン […] をクリックします。ここで、すべての属性を使用した提案カスタム クエリがポップアップします。
    5. [JPQL クエリ] のフィールドの中の次の行を削除します。 
      AND t.departureDate = :departureDate
AND t.numberOfNights = :numberOfNights
AND t.hotelNeeded = :hotelNeeded
AND t.destination = :destination
AND t.reason = :reason
AND t.refusalReason = :refusalReason
    6. パラメータのリストの中の userId と status を除くすべての属性を削除します。e と f の削除の結果は、次のようになります。customQuery
    7. このクエリを保存するために[OK] をクリックします。
  6. このビジネス データモデルを保存するために[終了]をクリックします。

プロセス定義を作成する

プロセス図を作成する

最初の段階は Bonita BPM Studio を使用して新しいプロセス図を作成することです。プロセス図を作成中、その都度、画面の最上位にあるクールバー内の [保存] をクリックするか、または Ctrl-S を押して作業中の結果を保存できます。プロセス図の作成手順は次のとおりです。

  1. [Bonita BPM スタジオへようこそ] のページにある [新規ダイアグラム] をクリックします。すると、ほとんどが空白のダイアグラムが作成されます。これをもとに変更を始めます：
    • 左に名前を持つ大きな長方形は、プールです。
    • そのプールの内側には、レーンがあります。これもまた長方形です。プール名横のレーン左側に境界線が見えます。その他の境界線は、プールの境界線と重なっているため見えません。
    • レーン内の◯は、開始イベントです。
    • レーン内の人型アイコンがあるボックスは、ヒューマンタスクです。
  2. 最初に行うことは、そのダイアグラムに分かりやすい名前を付けることです。プールの外側のダイアグラム（空白域）をクリックして詳細パネルに進みます。このパネルは画面の右下のエリアです。
  3. [全般] タブの [ダイアグラム] ペインで名前の次にある [編集…] をクリックします。
  4. ポップアップされたダイアログ内の名前に新しい名前として「出張申請」を入力し [OK]をクリックします。ホワイトボードの最上位にあるダブに変更されたダイアグラム名が表示されます。
  5. 次に、プールに分かりやすい名前を付けます。[プール] をクリックしてプールを選択し、詳細パネルに進んで、名前の次にある [編集…] をクリックします。ポップアップされたダイアログ内の名前に新しい名前として「出張申請」を入力します。ダイアグラムとプールの名前を変更した場合、そのダイアグラムは次のようになります。diagram1
  6. 次に、タスクをダイアグラムに追加します。このプロセスは社員が出張申請フォームに記入が終了したとき開始します。出張申請フォームを記入するタスクを作成する必要はありません。なぜなら、このアクションはプロセスの開始トリガーになるからです。BPMN 2.x ではプロセスの開始アクションをプロセスのインスタンス化 (instantiation) と言います。このプロセス起案ためのフォームはプールレベルで定義します。
  7. 次に、ユーザーがフォームの申請を送付した後に起こることを定義します。つまり、上司がその出張申請をレビューし、承認あるいは却下の裁定をすることです。ダイアグラムに自動で追加されている仮のタスク（タスク１）を使用することができます。タスク名をクリックして「上司のレビュー」に変更します。
  8. このプロセスの将来展開では、次のタスクは出張申請の詳細をアドミニストレータ チームに送ってホテルの予約手配をするはずです。しかしこのチュートリアルでは、プロセス作業の最初の部分に焦点を当てるため、このレビュータスクの後に終了を追加しプロセスを終わらせます。パレットから [終了イベント] のアイコンをホワイトボードにドラッグして「上司のレビュー」のタスクとフロー要素で接続します。

作業が完了すると、ダイアグラムは次のようになります。

diagram2

変数を定義する

既にデータモデルを定義していますが、このプロセスにどのデータモデルを適用するか指定する必要があるので、TravelRequestT1 のオブジェクト タイプのインスタンスとしてtravelRequest を定義します。定義は、つぎの手順に従ってください。

  1. プールを選択する。
  2. 詳細パネルの「データ」タブに進んで、[ビジネス変数] のボックスのそばにある [追加] をクリックします。
  3. 名前のフィールドに「travelRequest」を入力します。
  4. 必要に応じて説明を追加します。
  5. ビジネス オブジェクトのリストから「TravelRequestT1」を選択します。
  6. [デフォルト値] はまだ設定しないでください。この デフォルト値はコントラクト中にある情報を使用するので、あとで定義します。
  7. この定義を保存するために[OK] をクリックします。

TravelRequestT1 の属性はこのプロセス内で使用する情報になります。他の変数を定義する必要はありません。

コントラクトを作成する

コントラクトとは、フォームがプロセスインスタンスに返す必要がある情報の仕様です。プロセス インスタンス化および各ヒューマンタスクに対してコントラクトを定義します。

コントラクトは、プロセス インスタンスからフォームに送られる情報（つまり出力データ）を含む必要はありません。これら情報はコンテキスト(context)内に含まれており、コンテキストはフォームに渡される一連の情報のことです。あなたは、このコンテキストを設定することはできません。

コントラクトであなたが指定した情報は、このプロセス内に使用される情報の一部です。プロセス インスタンス化のコントラクトを指定するためには、プールを選択して、次のステップに従います。

  1. 詳細パネル、 [実行] タブ、[コントラクト] ペインに進みます。
  2. [入力] タブ内の [データから追加…] をクリックすると、このプロセスに定義したビジネス データ変数に基づいてコントラクトを生成するポップアップが開きます。selectBusinessVariable
  3. 「travelRequest」を選択して [次へ] をクリックします。
  4. ここでコントラクトに含める属性を指定します。デフォルトでは、すべての属性がチェックされていますから、入力項目に関係しないuserId, status および refusalReason のチェックをオフにします。selectContract
  5. [プレビュー] ボタンをクリックすると指定したコントラクトを基に自動生成される初期化スクリプトを確認することができます。
    previewInitializationScript
  6. [終了] をクリックします。コントラクトの生成に関係する警告が表示されますが、無視して構いません。

詳細パネルの travelRequestInput をクリックすると、ビジネス データモデルで定義した属性リストが展開されます。各属性に対して[説明] を指定します。この説明はフォームの各フィールドに対する入力ヘルプに使用されます。次のように指定します。

属性 説明
departureDate 出張の開始日を選択します
numberOfNights 宿泊日数を入力します
hotelNeeded ホテルの手配が必要な場合、チェックします
destination 出張先の都市を入力します
reason 承認可否判定に必要な出張目的を入力します

指定した結果は次のようになります。

instatiationFormContract

これでプロセス インスタンス化のコントラクトが完成しました。

「上司のレビュー」タスクのコントラクトは status と refusalReason の２つのコントラクトだけですから、[データから追加…] を使用せずに[追加] をクリックすることで、データモデルに依存せずに直接作成できます。これもまたコントラクトです。refusalReason は、上司が申請を却下する場合に指定する必要があります。このコントラクトを追加するには、

  1. 「上司のレビュー」タスクを選択します。
  2. 詳細パネル、 [実行] タブ、[コントラクト] ペインに進みます。
  3. [入力] タブで[追加] をクリックしながら、各入力項目について次の[名前]、[タイプ] および[説明] を指定します。
    名前 タイプ 複数 説明
    status Text No あなたがこの出張申請を承認、却下のどちらにしたかを示します
    refusalReason Text No 出張申請を却下した場合は、その理由を入力する必要があります

    指定結果：
    ManagerReviewContract

  4. [制約] タブに進んで [追加] をクリックし、プレースホルダに制約式を追加します。
  5. [名前] のセルをクリックして、それを「却下のときはその理由が必要」に変更します。
  6. [式] のセルをクリックして、そのフィールドの右に現れる […] アイコンをクリックします。すると制約式を入力できるポップアップが開きます。
  7. このスクリプトで approval と refusalReason の制約式を定義します。 
    status=="承認" || (status=="却下" && refusalReason != null && !refusalReason.isEmpty())
  8. [エラーメッセージ]列にテキスト：「あなたが出張申請を却下した場合は、その理由を入力する必要があります。」を追加します。

指定した結果は次のようになります。
contractConstraint

ビジネス オブジェクトの初期値を定義する

さて、コントラクトが定義されました。travelRequest の初期値は次の操作で設定できます。

  1. プールを選択して 詳細パネルの [データ] タブ、[プール変数]ペインに進みます。
  2. travelRequest をダブルクリックし、編集します。
  3. デフォルト値は、[デフォルト値] のそばにある鉛筆アイコンをクリックすると式エディタが開きます。
  4. コントラクトを使用してデータを初期化する initTravelRequest() というスクリプトが自動的に生成されています。 このスクリプトに次の userId と status 設定を追加し、このスクリプトを完成させます。
    最初の行の後に次のコードを挿入します：

    travelRequestT1Var.userId = BonitaUsers.getProcessInstanceInitiator(apiAccessor, processInstanceId).id
    travelRequestT1Var.status = "未定"

    コード挿入後の結果は次のようになります。
    initiationBusinessData

  5. [OK] をクリックしてその式を保存します。
  6. もう一度、[OK] をクリックして、変更したオブジェクト定義を保存します。

承認データでビジネス オブジェクトを更新する

あなたは、「上司のレビュー」フォーム内の status と refusalReason に入力された値でビジネス オブジェクトを更新するデータ操作を定義する必要があります。

  1. 「上司のレビュー」タスクを選択し詳細パネル, [実行] タブ、[データ操作] ペインに進みます。最初に status のデータ操作を次のように定義します。
  2. [追加] をクリックして新しいデータ操作を作成します。
  3. 最初のフィールドでデータ操作の対象として変数リストを表示するために下矢印をクリックし、travelRequest をダブルクリックします。
  4. [値を取得する式：] をクリックしてデータ操作可能なリストするポップアップを開きます。ポップアップは [Javaメソッドを使用] を選択し利用可能なメソッドのリストを表示します。setStatus(String) をクリックし [OK] をクリックします。

最後のフィールドで変数リストを表示するために下矢印をクリックし、status をダブルクリックします。

refusalReason のデータ操作を定義するために、このステップを繰り返します。

両方のデータ操作が定義されたとき、詳細パネルは次のように見えるはずです。

ManagerReviewOperation

アクターを指定する

次の段階は、このプロセスを遂行する人を定義することです。これはアクターをアサインすることによって行います。アクターはタスクを行う人のプレースホルダです。プロセスを構成すると、プロセス内に定義したアクターとヒューマンタスクを遂行する実際の人間が結びつけられます。Bonita BPM Studio はテスト用に使用できる ACME と呼ぶテスト組織を搭載しています。この例では、プロセスを起動する社員とその社員の上司の二人の人間がいます。この上司もまた社員ですからプロセス インスタンス化とレビュータスクには同じアクターを使用します。しかし、承認タスクを行う人を指定するにはアクターフィルタを使用します。これは次のような方法で定義します。

  1. ダイアグラム内のプールを選択します。これはこのプロセスのすべてのアクターを定義する場所です。デフォルトでは、ACME組織内にテスト用に「Employee actor」が既に定義されています。この組織とアクターはあとで変更できますが、初期のテストではこれで十分です。デフォルトの設定は出張申請プロセスの案件を開始できる組織内の全社員を意味しますので、何も変更する必要はありません。
  2. 次にレビュータスクを選択しこのタスクを遂行できる人を定義します。このタスクは、申請を起案した人の上司によって遂行されます。すべての上司もまた社員です。Employee actor がこのレーンに定義されているので、このレーンに定義されているアクターを使用します。
  3. レビュータスクを正しい上司に送付されることを確実にするために、アクターフィルタを使用します。
    1. アクターフィルタの [設定] ボタンををクリックします。
    2. プロセスのアクターフィルタのリストが開かれます。
    3. [起案者のマネージャ] を選択します。これはプロセスを始動した申請送付者の上司によってこのレビュータスクが遂行されることを意味します。
    4. [次へ] のボタンをクリックしてアクターフィルタの名前に「申請者の上司」を指定し [終了] をクリックします。

アクターフィルタの設定結果は、次のようになります。

actorFilter

これで、プロセスの定義は終わりました。次のセクションは、フォームを定義しアプリケーションを作成する前に、プロセスを構成して実行し、プロセス定義が正しいか検証する方法を説明します。

仮のフォームを使ってプロセスを検証する

フォームを作成する前に自動的に生成された仮のフォームを使って、開発中のプロセスを実行することができます。このセクションではBonita BPM Studio でこのプロセスを構成設定し、実行する方法を説明します。

プロセスを実行する前にそれを設定する必要があります。最初テストに向けて標準的なデフォルト設定を使用します。このサンプルプロセスで構成することは２つだけあります。アクターマッピングとテストユーザー名前の設定です。

  1. クールバー内の [構成設定] をクリックして構成ダイアログを開きます。
  2. ポップアップの左のメニュー内にある [アクターマッピング] をクリックします。このアクターマッピングのボックスは、アクターをリストしてデフォルトのマッピングを表示します。Employee actor は acme と呼ぶグループにマップされています。このACMEと呼ぶサンプル組織は、全社員を含んでいますから、これを変更する必要はありません。actorMapping
  3. 次に、テストユーザーの名前を指定します。このサンプルでは、ユーザーにACMEテスト組織内にある「Helen Kelly」を指定することができます。彼女の上司は「William Jobs」です。左のメニューにある [認証] をクリックして [認証されたユーザー] に Helen のユーザー名である「helen.kelly」とパスワード「bpm」を指定します。verification
  4. 構成が完了したので[終了]をクリックします。

これで、あなたはプロセスを実行し仮のフォームを見てプロセス定義が正しいかチェックすることができます。

  1. クールバー内の [実行] をクリックすると、ブラウザが開き、Helen としてBonita BPM ポータルにログインし、出張申請フォームを表示します。
  2. フォームを記入します。仮のフォームの各フィールドごとに適切なフォーマットを使用するようにします。フォーム内の日付はyyyy-mm-ddで指定する必要があります。フォームを記入したら [開始] をクリックします。これでフォームは送信されプロセス・インスタンスが開始します。
  3. ポータルウィンドウの右上の Helen Kelly の名前のそばにある下矢印をクリックし、[ログアウト] を選択します。
  4. Helen の上司である William Jobs としてログインします。ユーザー名は「william.jobs」、パスワードは「bpm」です。「上司のレビュー」と呼ぶタスクが存在するタスクリストが表示されます。
  5. 「上司のレビュー」のタスクを選択して [実行する] をクリックします。上司のレビュー用の仮のフォームを使ってプロセスを検証するのフォームが表示されます。このフォームはこのタスクのコントラクトで定義された入力項目のフィールドを持っていますが、Helen が前のタスクで入力した出張申請情報を含んでいません。この先、あなた自身でフォームを作成するときに、この情報を追加ます。そのフォームで上司は申請を承認または却下の裁定に必要な申請詳細を見ることができます。さて、あなたはフォームを見ることができたので、このプロセス定義が正しいことを検証できたことになります。

プロセス フォームを作成しオペレーション可能にする

フォームを作成する

プロセスのフォームを最短で作成する方法は、コントラクトを基にフォームを自動生成することです。この生成機能はプロセスとフォームおよびフォームデータ定義の間のマッピングを自動で作成します。フィールドを追加・削除したり、レイアウト変更するためには、マニュアルでこのフォームを変更できます。

UI デザイナーを使用している間は、変更作業結果を失わないようその都度保存するようにしてください。

プロセスの起案フォームを作成するためには、

  1. Bonita BPM Studioでプールを選択し、詳細パネル、[実行] タブ、[コントラクト] ペインに移動します。
  2. 詳細パネルの右上のUI デザイナーをクリックすると、ブラウザ ウィンドウ内にUI デザイナーが開き、自動生成されたフォームが表示されます。
  3. フォーム名を変更します。自動生成されたすべてのフォームは「newForm」と命名されますから、混乱を避けるため、改名する必要があります。改名するために、トップバーの名前をダブルクリックし、新しいフォーム名として「submitTravelRequest」を指定します。
  4. 各項目のラベルは、コントラクト名から自動編集されます。コントラクト名はアルファベットを使用していますから、利用者に分かりやすい日本語に変換する必要があります。各ウィジェットの[ラベル] プロパティを選択して下表の日本語項目名に変更します。
英語項目名 日本語項目名
Departure Date 出発日
Number Of Nights 宿泊日数
Hotel Needed ホテルの手配必要
Destination 出張先
Reason 出張目的

さて、フォームが作成されました。フォームは、プロセスとマップされたUI デザイナーのページです。ページは、ウィジェットの集まりで、各フィールドはウィジェットによって定義されます。ウィジェットは複数の行内に配置されます。各ウィジェットはウィンドウの右側に表示される一連のプロパティを持ちます。外観やページの動きを変更する場合は、ウィジェットを変更します。[プレビュー] をクリックして、いつでもページが利用者にどのように見えるか確認することができます。ページを変更するためにより広い空間にしたい場合は、 [変数]  および [アセット] タブの右にある下矢印をクリックして、それらを非表示することができます。

ここで、インスタンス化フォームのレイアウトを改良する方法について、いくつかのアドバイスします。

  1. FORM CONTAINER ウィジェットをフォームのトップの新しい行にドラッグします。注意： 新しいウィジェットをホールドしてフォームのトップにホバーリングしているときは、新しい行を表すグレーのエリアが表示されます。
  2. “Submit” ボタンを含むすべてのウィジェット（CONTAINER ウィジェットは除く）をFORM CONTAINER 内部にドラッグします。注意： CONTAINER ウィジェットとは、ウィジェットをグループ化するために使用されるウィジェットのことです。グレーの枠線で示され、ラベルは持っていません。
  3. 最下の空のCONTAINER ウィジェットを選択し削除します。
  4. 出張先のウィジェットを選択し、[必須] プロパティを[はい] にセットします。 出発日、宿泊日数および 出張目的のウィジェットにも同様の操作を繰り返します。
  5. 宿泊日数のウィジェットを選択し、その最小値プロパティを0 にセットします。
  6. 出発日のウィジェットを選択し、[日付フォーマット] プロパティの値をデフォルトの”MM/dd/yyyy”から”yyyy/MM/dd”に書き換えます。
  7. Submit ウィジェットを選択し、非表示プロパティの右端のバインドアイコン (“fx”) をクリックします。
    出現したテキストフィールドに次のスクリプトを入力します：
    $form.$invalid
    これにより、フォームのコンテンツが正しい場合にのみ、”Submit” ボタンが有効になります。

ページエディタでフォームは、次のようになります：
newRequestForm1

さて、このフォームの基本要件は実装できましたが、さらにこのフォームをユーザーフレンドリーな外観に改良しましょう：

  1. トップのTITLE ウィジェットの「Travel Request Input」を選択して、その [Text] プロパティを「新しい出張申請を送付」に変更します。
  2. 出発日のウィジェットの幅を狭くします。これを行うには、そのウィジェットを選択して、[幅] プロパティの値を4カラムに変更します。
  3. 出張先のウィジェットをフォームのトップ（TITLE ウィジェットの直下）に移動します。
  4. 宿泊日数とホテルの手配必要のウィジェットを出発日のウィジェットと同じ行に移動し幅を小さくします。（注意: 行にウィジェットを追加するとき、残りの全カラム幅が自動的に採用されるので、ウィジェットを移動後は、その幅が設定されます）
  5. 実行時にプレースホルダを表示させるため、出発日と宿泊日数の初期値をクリアします：
    1.  [変数]パネル（ページの最下）の formInput 変数の行に移動します。
    2. この行の右端にある鉛筆のアイコンをクリックします。
    3. departureDate と numberOfNights 属性の値を 0 から null に変更します。
    4. [保存] をクリックします。
      editFromInput

作業が完了すると、フォームのプレビューは次のようになります：

newTravelRequestForm

次に、「上司のレビュー」タスクのフォームを定義します。上司がレビューする申請明細を表示するために、予め生成されている context（プロセスが保持している一連の情報） からフォームを自動的に生成することから始め、上司のレビューをリクエスト詳細に次の手順でウィジェットを追加します。

      1. Bonita BPM Studioで「上司のレビュー」タスクを選択し、詳細パネル、[実行] タブ、 [コントラクト] ペインに移動します。
      2. 詳細パネルの右上のUI デザイナーアイコンをクリックします。フォームが生成され、UI デザイナー の中にそれが表示されます。
      3. フォーム名を「reviewTravelRequest 」に変更します。
      4. 出張申請フォームに利用者が入力した前タスクの情報を取得するための変数を追加します。これは次のように行います。
        1. [変数] タブの [新規変数を作成] をクリックします。
        2. 名前に「request」を指定します。
        3. [タイプ] を「External API」にセットします。
        4. [値] に「../{{context.travelRequest_ref.link}}」をセットします。
        5. [保存] をクリックします。
      5. 申請の判定結果を保持するために、次の変数を追加します:
        名前 タイプ 値
        statusValues JSON [
        {“label”: “申請を承認”, “value”: “承認”},
        {“label”: “申請を却下”, “value”: “却下”}
        ]
      6. formInput 変数を編集し、 status 属性の値を「承認」にセットします。
      7. FORM CONTAINER ウィジェットを追加し、CONTAINER ウィジェット内にあるすべてのウィジェットを移動します。以後追加する他のウィジェットもすべて、このFORM CONTAINER ウィジェットに置きます。
      8. ウィジェットを追加します. このを行うためには 左のパレットからTITLE ウィジェットをドラッグし、フォームのトップにドロップします。[Text] プロパティでページタイトルを「出張申請のレビュー」に変更します。その [レベル] プロパティを「レベル 4」にセットし、出張申請作成用のフォームと同じサイズにします。
      9. 出張申請の明細を表示するために、次の表に従ってウィジェットを追加しプロパティをセットします。
        ラベル ウィジェットのタイプ バインドする値
        出張先 Input request.destination
        出発日 Input request.departureDate | date: ‘yyyy/MM/dd’
        宿泊日数 Input request.numberOfNights
        ホテルの手配必要 CheckBox request.hotelNeeded
        出張目的 Text area request.reason

        これらのウィジェットの[読み込み専用]プロパティはすべて「いいえ」にします。

      10. 自動的に追加されていた Refusal reason のウィジェットを削除し、次のステップでよりユーザーフレンドリーなものに置きまえます。
      11. 次のプロパティを持つTEXT AREA ウィジェットを追加します:
        プロパティ 値
        非表示 formInput.status == ‘承認’ （”バインド” アイコンをクリック）
        ラベル 却下の理由
        値 formInput.refusalReason

        ダイナミックな [非表示] プロパティは、status が「承認」にセットされている場合は、そのウィジェットを非表示にします。そうでない場合は、フィールドは必須と認識され、フォーム・バリデーションは「却下の理由」記載がない却下を阻止します。

      12. 自動的に追加されていた Status のウィジェットを削除します。
      13. 次のプロパティを持つRADIO BUTTONS ウィジェットを追加します:
        プロパティ 値
        ラベル 判定結果
        使用可能な値
        （この値の次の”バインド” アイコンをクリックすること）        		 statusValues
        表示するキー label
        返されるキー value
        選択した値 formInput.status
      14. Submit のウィジェットを選択し、[非表示] プロパティに$form.$invalid をバインドします。
      15. フォームをプレビューし、次のようになるまでフォーム内の配置を調整します：

プロセスを実行する

これで、あなたが作成したフォームを使用してプロセスを実行できます。UI デザイナー にすべてのものを保存しているか確認してください。そして、Studio のルークバーの [実行] をクリックします。

申請フォームを見ると、日付を指定するための Datepicker （カレンダー）があります。Helen としてこの申請フォームを記入、その後 Wiiliam でログインし、レビュータスクを実行します。レビュータスクが表示されると、そこには申請フォームに Helen が入力した情報が含まれていますから、この申請を承認または却下の判断できます。

これで、あなたは完成ですから、アプリケーションの中に含めることができます。

アプリケーションをビルドする

このセクションでは、あなたが既に作成したページとプロセスから業務アプリケーションをビルドする方法を説明します。次の手順に従ってください。

        1. このチュートリアルで最初に作成したアプリケーションページ「TravelToolPrototype」をUI デザイナーで開きます。
        2. 新しいページ「TravelTool」にその複製を作成します。複製の作成は次の操作で行います。
          1. UI デザイナーのPAGE エディタのトップに表示されているページ名横の [保存] ボタンの右にある下向き矢印をクリックし、[別名で保存…] をクリックします。
          2. 別名で保存のダイアログが開きますから、「TravelToolPrototype」を「TravelTool」に変更して [保存] をクリックします。
        3. 「TravelTool」ページ内のサンプルデータの表示用に設定しいた JSON のデータをプロセス内で収集されたビジネスデータに置き換え、ページとプロセスの接続を指定します。

アプリケーション ページを変更する

ページを変更するためには２段階あります。まず最初に、いくつかの変数を作成し、ウィジェット のデータマッピングを変更します。

次の変数を作成します。

名前 タイプ 値
session External API ../API/system/session/unusedid
processDef External API ../API/bpm/process?p=0&c=1&f=name=出張申請
myPendingRequests External API ../API/bdm/businessData/com.company.model.TravelRequestT1?q=findByUserIdAndStatus&p=0&c=10&f=userId={{session.user_id}}&f=status=未定
myApprovedRequests External API ../API/bdm/businessData/com.company.model.TravelRequestT1?q=findByUserIdAndStatus&p=0&c=10&f=userId={{session.user_id}}&f=status=承認

次に新しい変数を使用するためにウィジェットを変更します。

        1. ページのトップにあるユーザー名のウィジェットを選択し、[Text] プロパティの値 を {{session.user_name}} に変更します。
        2. 未承認の出張申請のTABLE ウィジェットを選択し、[コンテンツ] プロパティを「myPendingRequests」 の変数名に変更します。
        3. 承認済みの出張申請のTABLE ウィジェットを選択し、[コンテンツ] プロパティを「myApprovedRequests」 の変数名に変更します。
        4. 未承認および承認済みの申請の両TABLE ウィジェットの [列を示すキー] プロパティを「departureDate | date: ‘yyyy/MM/dd’, numberOfNights, hotelNeeded, destination, reason」に変更します。

プロセスへのリンクボタンを設定する

利用者が出張申請を作成するために、「TravelTool」ページ上の「新しい出張申請を作成」のボタンをクリックしたとき、申請を作成するためのフォームを表示するようにします。これは出張申請プロセスのインスタンス化フォームです。これを構成するには、「新しい出張申請を作成」のBUTTON ウィジェットを選択し、[ターゲットURL] プロパティに

「http://localhost:8080/bonita/portal/resource/process/出張申請/1.0/content/?id={{processDef[0].id}}」をセットします。

利用者がこのフォームを送信したあと、Bonita BPM ポータルのタスクビューが表示されます。

アプリケーションをビルドする

警告：Bonita BPM Studio で起動しているポータルを使用している場合、デフォルトでは、Studio を閉じる際にプロセス、ページおよびアプリケーションはポータル上に保存されません。アプリケーションの定義を保存したい場合は、Studio の [環境設定] を編集して[データベース] のすべてのオプションをアンチェックしてください。

出張ツールの業務アプリケーションをビルドするには、UI デザイナーのページをエクスポートし、プロセスをデプロイして Bonita BPM Portal の中でそのアプリケーションを作成する必要があります。

ページをエクスポートするには、ホームページ上のPAGE エディタ内の [エクスポート] アイコンをクリックします。そのページは、あなたのブラウザのデフォルトのダウンロード場所に zip ファイル形式でエクスポートされます。

プロセスをデプロイするには、Studio からそのプロセスを単に実行するだけでできます。なお、あなたが最後に実行してからそのプロセスに何も変更を加えていない場合は、そのプロセスはデプロイ済みですからプロセスを実行する必要はありません。

Bonita BPM ポータル内でアプリケーションを作成するには、

        1. 管理者プロファイルで Bonita BPM ポータルにログインします。
        2. メニューバーから [リソース] を選択し [追加] をクリックしてUI デザイナーからエクスポートした「TravelTool」ページをインポートします。
        3. [アプリケーション] に移動して[新規]をクリックします。
        4. アプリケーションの表示名に「出張ツール」、URL に「travel」と入力して [新規作成] をクリックすると、アプリケーションのリストに追加されます。createApplication
        5. アプリケーションのリストで […] アイコンをクリックし、新しいアプリケーションを構成します。
          applicationList
        6. [ページ] セクションで [追加] をクリックします。
        7. インポートしたページを追加し、URL に「requests」と入力し、[追加] をクリックします。
          addPgae
        8. ホバーリングしているときに現れるホームアイコンをクリックして、このページをアプリケーションホームページにします。
          setHomePage
        9. デフォルトのホームページを削除します。
        10. 「出張ツール」の詳細設定にあるURL（../apps/travel）をクリックすることで、このアプリケーションが正しく定義されたかチェックします。新規申請を作成するためのフォームへのリンクを使用して出張申請サマリーページが表示されます。リンクをクリックすると新しい出張申請を送信するためのフォームが表示されます。
          operationPage

これでアプリケーションのURLをBonita BPM 利用者と共有してアプリケーションにアクセスが可能になりました。
このURL（例えば、http://<bonitaサーバーアドレス>/bonita/apps/travel/requests/）を業務アプリケーションのWebページにリンクすれば、Bonita ポータルを介さずに業務の進行状況を見ながら直接プロセスの起動できます。

本チュートリアルのまとめ

あなたは、下図の考え方に沿ってアプリケーション・ページとプロセス・フォームを開発したことになります。Bonita BPM7の特徴の１つは、プロセスの自動化のみならず、そのプロセス進行過程で収集した業務データをプロセスを横断して、モニタリングする上層のWebアプリケーションも開発できる点です。この開発・運用環境をBonitasoft では、「プロセスベース・アプリケーション・プラットフォーム（Process based Application Platform）」と称しています。

本チュートリアルは、出張申請を例にしましたが、同様のプロセスベース・アプリケーション事例として、次のサンプル・プロセスのソースが Bonita コミュニティのプロジェクト で公開されています。

  • 経費報告アプリケーション
  • 調達アプリケーション
  • 休暇管理アプリケーション

applicationAndProcess

本チュートリアルで開発したアプリケーション・ページは最も簡単な例です。実際の業務では、下図のようにグラフを表示したり、過去の業務データを参照したりするかも知れません。体験して頂いたように、Bonita UI デザーナーはこのようなWebアプリケーション開発機能も提供しています（但し、テンプレートのレイアウト変更やグラフ編集はサブスクリプション版でのみサポート）。

applicationCustomPageExample