UI デザイナーの概要

UI デザイナーは、Bonita BPM アプリケーションのページやフォームを作成するためのグラフィカルな開発環境です。Bonita BPM Studio から起動するweb ベースのツールです。 ページは、AngularJS の JavaScript フレームワークで拡張されたHTMLで定義されます。  ビジネス アプリケーションのページ、プロセス インスタンスの開始、あるいはヒューマンタスクの実行のためのフォーム、およびアプリケーションのすべてのページに適用するアプリケーション レイアウトを作成/更新するために、UI デザイナーを使用します。

  • Bonita BPM UI デザイナーでページをダイレクトに作成する
  • Bonita BPM Studio 内の適切なコントラクトからフォームの設計を開始する
  • Bonita BPM ポータルのリソース内で利用可能なデフォルトのレイアウトを複製し、それを更新してレイアウトを作成する

既存のページ、フォーム、レイアウトをインポートし、編集や複製を作成することができます。

ページの構造
Bonita BPM プラットフォームとの統合
UI デザイナーのユーザープロファイル

ページの構造

１つのページ（フォームを含む）は、複数のウィジェットで構築されます。各ウィジェットは、ページ内に入力または表示されるべき情報項目に相当します。Performance、 Efficiency および Teamwork editionでは、ウィジェットのグループであるフラグメントも使用できます。一連の標準ウィジェットがありますが、ニーズに合致しない場合は、カスタムウィジェットを定義できます。サブスクリプション エディションでは、いくつかのページまたはフォームで同じ挙動を持つウィジェットのグループをフラグメントとして作成し再利用することができます。

「コンテナ」という いくつかの構造ウィジェットもあり、１つのページを構造化するために使用できます。このコンテナには異なる種類があります：

  • 通常のコンテナは、ページ利用者には見えません。これはページの開発時に複数ウィジェットの構成設定を一括操作する手段として便利です。
  • タブのコンテナは、ページの領域をタブで区分けするのに使用されます。このタブはページ利用者が見えるので、 タブ名をクリックしてタブを切り替えることができます。

ページにウィジェットを追加するには、画面の左にあるパレットからそれをドラッグし、ホワイトボードにドロップします。ウィジェットをコンテナに、あるいは直接ホワイトボードにドロップできます。それは他のウィジェットに隣接（または最初のウィジェットがページトップに隣接）する必要があります。 ウィジェット間に空スペースを放置することはできません。ウィジェットを他に隣接せずにドロップしようとすると、そのドロップは機能しません。

ページの挙動は、ウィジェットのプロパティによって決定付けられます。コンテナに構成設定した任意のプロパティは、あるウィジェットを固有値で上書きしない限り、そのコンテナ内のすべてのウィジェットに適用されます。

UI デザイナーは、AngularJS をベースに標準HTML のアプリケーション コードを生成します。あなたがお気に入りの web 開発環境でより一層進んだカスタマイズをしたい場合は、そのページをエクスポートします。

Bonita BPM プラットフォームとの統合

ビジネス アプリケーションのページを使用するには、Bonita BPM UI デザイナーからそのページをエクスポートし 、ポータルのリソースとしてインポートします。そして、対象のアプリケーションのページリストにそれを追加し、ナビゲーションメニューにそれを挿入します。

プロセス内のフォームを使用するには、Bonita BPM Studio で対象のプロセスまたはヒューマンタスクにそれをマップします。それは、Bonita BPM ポータルにデプロイするために準備する .bar アーカイブ中に自動的にパッケージ化されます。

サブスクリプション エディションでは、Bonita BPM UI デザイナーからフォームの新バージョンをエクスポートして、ポータル内の対象プロセスにインポートし、それを対象のタスクまたはプロセス開始イベントにマップすることで、運用環境でフォームを更新することができます。

ビジネスアプリケーションのレイアウトを使用するには、Bonita BPM UI デザイナーからそれをエクスポートして、Bonita BPM ポータルのリソースとしてそれをインポートし、対象のアプリケーションのレイアウトとしてそれをマップします。

UI デザイナーのユーザープロファイル

UI デザイナーは、BPMN アプリケーションの部分となるページとフォームを作成するweb 開発者に向けたもので、JavaScript と CSS の深い知識が要求されます。 あなたがビジネスアナリストである場合、UI デザイナーを使用してページ構造を作成し、基本的な挙動を定義することは可能ですが、ページ内の大半のプロパティは、JavaScript を使用して定義する必要があります。