UI デザイナーは、BPM アプリケーションで使用するページおよびフォームを作成するためのツールです。フォームはプロセスのインスタンス化（起案）、またはヒューマンタスクにマップされ、コントラクトにデータを埋める必要があります。ページはプロセスの部分にマップされません。ページとフォームに違いはありません。ですから、それらの設計手順はまったく同じです。ページでも入力フィールドと送信ボタンを表現できますが、フォームはそれらの入力フィールドと送信ボタンを持つのが一般的です。このドキュメントでは、特に明記しない限り、ページとフォームの両方に「ページ」という用語を使用します。

ページの構成

コンテナ

ウィジェットの行への追加

行の追加

コンテンツの繰り返し

フラグメントとして保存

タブ コンテナ ウィジェット

フォーム コンテナ ウィジェット

テキストウィジェット

入力ウィジェット

テキスト入力ウィジェット

選択ウィジェット

オートコンプリート ウィジェット

日付ウィジェット

ラジオボタン ウィジェット

チェックリスト ウィジェット

チェックボックス ウィジェット

ボタン ウィジェット

ファイルアップロード ウィジェット

テーブル ウィジェット

イメージ ウィジェット

データテーブル ウィジェット

チャート ウィジェット

ファイル ビューア ウィジェット

リッチ テキスト エリア ウィジェット

ページの構成

ページはコンテナ内に配置したウィジェットと複数の行で構成されます。UI デザイナーはページをデザインするために使用できる一連のウィジェットを提供しています。デフォルトのウィジェットはページ エディタの左手にあるパレット パネルから使用可能です。ウィジェットはその表現方法と振る舞いをコントロールするプロパティを持ちます。すべてのウィジェットはいくつかの共通プロパティとウィジェットの種類ごとに固有のプロパティを持ちます。さらに、あなた独自のカスタム ウィジェットも作成できます。

パレット内の各ウィジェットは説明を持っています。ウィジェットの説明を表示するには、ウィジェット パレット内のウィジェットの右上コーナーをロールオーバーします。

コンテナは他のウィジェットを含む１つのウィジェットです。他の複数のコンテナをネスト（入れ子）して持つことが可能です。コンテナは一般的に、ページのメインレイアウトをコントロールするために使用します。たとえば、２つのカラムレイアウトを作成したい場合、同じ行に２つのコンテナを追加し、それぞれを幅を６カラムに設定します。ページはコンテナを必ずしも持つ必要はありませんが、便利なツールです。

行はページやコンテナ内のウィジェットを整列させるためのメカニズムです。あなたが新しい空白のページを作成した場合、その空白ページは１行の空白行を持っています。行はページまたは、その内部のコンテナの全体幅を占有し、１２になると考えられます。行にウィジェットを追加したとき、そのウィジェットの幅（最大１２まで）を指定します。実際の幅はそのページが表示されたときに計算されます。

コンテナ

コンテナ ウィジェットは、他のウィジェットを縛り付けるために使用されます。デフォルトでは、コンテナは、あなたがコンポーネントのウィジェットをドロップできる１つの行を持ちます。

ウィジェットの行への追加

行の終端にいくつかの余白を持っている場合、ウィジェットはその行の残る空白域を埋めます。その行に空白域がない場合は、ドロップしたコンポーネントはその行に既に配置済みのウィジェット幅を自動調整し挿入されます。

行の追加

必要に応じ、コンテナは任意の数の行を持つことができます。

新しい行にウィジェットを追加するに、コンテナはパレットからウィジェットをドロップできる２つのドロップゾーンを持っています。それらのドロップゾーンは、コンテナのトップとボトムにあります。マウスを行内のウィジェット境界線の上または下に重ねるとそのドロップゾーンが下図の例に示すように表示されます。

例 1: テキスト ウィジェットの上の新しい行の中にタイトル ウィジェットを追加します：

例 2: タイトル ウィジェットの下の新しい行の中にテキスト ウィジェットを追加します：

これらのタイムゾーンの１つにウィジェットをドロップする場合、新しい行が自動的に作成されます。

コンテナ内部の左側のグレーの小さな三角形によってコンテナの行であることが示されます。
行は、いつもページの全体幅です。 下図の例では、１つのコンテナが４つの行を持っています。

行を移動または削除するには、その行をマウスでポイントし、その行のツールバーを表示します。

ツールバー内のコントロールを使用してその行を上あるいは下に移動するか、または削除（X）します。

コンテンツの繰り返し

コンテナは、そのコンテンツを動的に繰り返すことができます。これは、データのコレクション（配列）内の各要素に対し一連のコンポーネントを繰り返す必要がある場合に役立ちます。 「コンテンツを繰り返す]」のプロパティを配列の変数にバインドします。コレクションの現在の要素は、$item を使用して指定します。これは、現在の要素のあるプロパティを表示したい場合に役立ちます。

フラグメントとして保存

Performance, Efficiency, または Teamwork edition を使用している場合は、任意のコンテナをフラグメントとして保存できます。これは、別のページでウィジェットのセットを再利用することを可能にします。

タブ コンテナ ウィジェット

タブを使用してページを構造化するために、タブ コンテナを使用します。タブ名を編集するには、それらのプロパティの表示に関連するタブを選択します。各タブは、１つのコンテナ ウィジェットです。

フォーム コンテナ ウィジェット

入力 ウィジェットのエラー検証を可能にしたフォームに対しフォーム コンテナを使用します。フォーム コンテナは、そのフォーム コンテナに関連したAngularJS のフォーム オブジェクトである $form をローカルで使用可能にします。

たとえば、ボタンの「無効」プロパティを $form.$invalid にバインドして、フォームの入力が正しくなるまで、そのボタンのクリックを防止することができます。

テキスト ウィジェット

ページ上に情報を表示するためには、テキスト ウィジェットを使用します。これは、タイトル、文節、リストを含みます。それぞれに対し、テキストと配置を指定できます。テキスト ウィジェットには次の種類があります：

• リンク： 外部サイトへナビゲーションするHTMLリンクを組込み可能
• タイトル： 標題用、文字の大きさを６段階で設定可能
• テキスト： テキストの塊、テキストは文節、リスト、イメージなどの基本的なHTMLタグをサポート

入力ウィジェット

ユーザーが入力データを提供可能にするためには、入力ウィジェットを使用します。入力ウィジェットは、共通のウィジェット プロパティに加え、すべての入力ウィジェットが次のプロパティを持ちます：

• フォーム コンテナ内部の送信時に、ボタンのクリックを阻止する「必須」の動的プロパティ
• ユーザーの値変更を阻止する「読み取り専用」または「非表示」のプロパティ
• 「ラベル」（非表示にすることも可能）
• 入力が「必須」かどうかを指定するプロパティ
• ユーザーが入力した値を採取する「値」プロパティ

使用可能な入力ウィジェットをこのセクションの以下に説明します。

テキスト入力ウィジェット

ページの入力フィールドにテキスト入力ウィジェットを使用します。４つの入力タイプがあります。

• テキスト： 形式が自由なテキストフィールド
• 電子メール： e-メールアドレス
• 数値： 小数点付きの実数、または整数
• パスワード： テキストと同じ、ただし、各文字はアスタリスク（*）に置き換えられる

選択ウィジェット

ユーザーに値のドロップダウンリストを提供するためには、選択ウィジェットを使用します。ユーザーは必要な値をリストから選択します。使用可能な値を埋め込むために、「使用可能な値」のプロパティが使用されます。テキスト形式のシンプルなデータを使って、カンマ区切りの値リスト（例： red, green, blue）を提供することができます。使用可能な値のリストを埋め込んだ変数を指定し、データ バインディングを使用することもできます。この場合、そのウィジェット内に表示される属性を識別するラベルキーを指定します。

オートコンプリート ウィジェット

オートコンプリート ウィジェットを使用すると、フィールドに入力したデータを基に可能性のある値のリストをユーザーに提供します。たとえば、”山”を入力すると、その値リストには、”山田”、”山下”、”山村”、”山中” が提案されます。ユーザーはその中から希望の値を選択します。「使用可能な値」を定義するには、提案値リストを初期化するデータソースをバインドします。オブジェクトの配列である提案値リストに対し、ウィジェット内に提案として表示する属性を識別する「表示するキー」を指定できます。「値」プロパティには、選択された提案値を保持する変数を作成し、バインドする必要があります。

日付ウィジェット（Datepicker）

日付ウィジェットを使用して利用者が日付を選択できるカレンダーを表示することができます。年：yyyy、月：MM、日：dd、分：mm などのパターンを使って表示される「日付フォーマット」を設定できます。

関連プロパティを使ってタイムゾーンを強制的にゼロに設定できます。

サポートされるフォーマットのより詳しい情報は、 AngularJS ドキュメントの日付フィルターを参照してください。

ラジオボタン ウィジェット

ラジオボタン ウィジェットを使用し、使用可能な値リストから利用者が１つの値を選択する一連のラジオボタンを作成します。 「使用可能な値」の定義は、単純な値のカンマ区切りのリスト（例： red, green, blue）で定義するか、値の配列を保持する変数にバインドします。その値がJavaScript オブジェクトである場合は、ラジオボタンのラベルに使用される属性を識別する 「表示するキー」と「返されるキー」も指定できます。その場合、「選択された値」は付随するすべてのオブジェクトではなく、「返されるキー」で指定した特定のキーの値のみを返します。

選択された値は、ラジオボタンで選択されたデータを保持する変数にバインドする必要があります。

チェックボックス ウィジェット

ユニークなチェックボックスを作成するには、チェックボックス ウィジェットを使用します。値プロパティは、 チェックされたチェックボックスの値に従って、true または false になります。

チェックリスト ウィジェット

チェックボックス ウィジェットを使用し、使用可能な値リストから利用者が任意の数の値を選択する一連のチェックボックスを作成します。 「使用可能な値」の定義は、単純な値のカンマ区切りのリスト（例： red, green, blue）で定義するか、値の配列を保持する変数にバインドします。その値がJavaScript オブジェクトである場合は、チェックボックスのラベルに使用される属性を識別する 「表示するキー」と「返されるキー」も指定できます。その場合、「選択された値」は付随するすべてのオブジェクトではなく、「返されるキー」で指定した特定のキーの値のみを返します。

選択された値は、「選択された値」 のプロパティを通じて捕獲されます。

警告：  「選択された値」のプロパティを「使用可能な値」のコレクションの特定項目にバインドしないでください。その理由は、選択された値はチェックボックスを変更の都度更新されるからです。 「選択された値」のプロパティを「使用可能な値」のコレクションに直接バインドしないでください。その理由は、予期しない挙動を引き起こす可能性があるためです。

ボタン ウィジェット

ボタン ウィジェットを使用し、利用者がアクションをトリガーすることを可能にします。このボタンは PUT または POST リクエストを実行し指定された URL にデータを送信します。 PUT または POST リクエストに対して、「成功」または「失敗」後の結果データを保持する変数を使用できます。

タスク、またはプロセスのコンテキストで表示されるページでは、ボタン ウィジェットはフォームの送信、ヒューマンタスクの完了、プロセス インスタンスの開始のために使用されます。フォームの送信では、送信するデータだけを定義する必要があります。URL は、そのコンテキストから抽出されます。

最後に、指定のコレクションからデータを削除したり、追加するためにウィジェット ボタンを使用することができます。

フォームが無効な状態である場合は、フォーム コンテナの内部のボタンは自動的に無効にされます。

ファイル アップロード ウィジェット

指定した「URL」上へのファイルアップロード （POST）を実行するには、アップロード ウィジェットを使用します。サーバーによって戻されたデータは、「値」 プロパティ内に格納されます。

テーブル ウィジェット

テーブルウィジェットを使用し、テーブル内のデータを表示します。データを表示するためには、列ヘッダーをカンマ区切りでリスト化した 「ヘッダー」 プロパティを初めに定義します。

それから、JavaScript オブジェクトの配列に「コンテンツ」をバインドします。

最後に、各列に表示する属性を示す「列を示すキー」にカンマ区切りのリストを指定します。

選択された行のデータを取得するには、「選択された行」を変数にバインドします。

イメージ ウィジェット

イメージ ウィジェットを使用し、イメージ（画像）を表示します。イメージ ウィジェットは、ローカル アセットのイメージ、またはURLのイメージを表示できます：

• イメージ ウィジェット内でイメージ アセットを使用するには、 「ソースのタイプ」プロパティをAsset に設定し、 「アセット名」の入力フィールド内にイメージ名を入力します。
• イメージ ウィジェット内でオンラインのイメージを使用するには、 「ソースのタイプ」プロパティを URL に設定し、 「アセット名」の入力フィールド内にイメージの URL を入力します。

Note: Applies from 7.0.2

データテーブル ウィジェット （サブスクリプション版のみ）

テーブル ウィジェットに似ていますが、それ以上の能力を発揮します！データテーブル ウィジェットは、列の並び替え、フィルターリング、改ページなど、テーブル ウィジェットの追加機能を提供します。

案件やプロセスなどのBonita BPM のレコードを表示したい場合、データテーブルを使用します。

データソースを「Bonita API 」にセットとして、Bonita BPM REST API からレコードを伴ったデータテーブルを装着します。（注意： データソースを変数にセットして、「変数」でデータテーブルを装着することも、まだ可能です）

その後、「REST API URL」を入力します。API のリクエスト パラメータ プロパティを使用し、そのリクエストに追加パラメータを渡します。サポートされるパラメータは、REST API の概要で説明されています。バックグラウンドの改ページ機能を使用すると、レコードの初めから終わりまでをナビゲートします。

データテーブルのヘッダーをクリックすると、テーブルのレコードをソートします。いくつかのフィールドはソートをサポートしませんがソートボタンは表示されたままになっています。それは既知の制限です。

データテーブルにフィルターを使用できます。変数パネルからフィルターの変数を作成します。そして、そのページ上に pbInput を追加しフィルターの変数を pbInput の「値」プロパティにバインドします。最後に、データテーブルの「フィルター」プロパティをフィルターの変数にバインドします。

これで、フィルター入力のコンテンツは常時変化します。このフィルター値は、データテーブルのレコードを絞り込み、テーブルの表示を状況に応じて更新します。

チャート ウィジェット （サブスクリプション版のみ）

チャート　ウィジェットを使用し、理解し易いグラフィカルなデータ表示を作成します。このウィジェットは、 Chart.js をベースにした angular-chart-0.8.1 に基いています。詳しい情報は Angular chart documentation （英語） または Chart.js documentation（英語）.を参照してください。

このウィジェットは、次のチャートを表示できます：

• 単一セットのデータポイントに対して：
  • 棒グラフ
  • 折れ線グラフ
  • レーダーチャート
• 複数セットのデータポイントに対して
  • 円グラフ
  • ドーナツ グラフ
  • 鶏頭図（Polar area chart）

各ウィジェットの表示例：

表示のための各データセットは、数値を含む JSON 配列で提供します。「値」プロパティで直接、単一配列を入力するか、または配列（１次元）を提供する任意の変数にそれをバインドします。複数セットのチャートでは、配列の配列（２次元）を提供する変数にそれをバインドします。すべてのセットは同じ長さを持ちます。 「ラベル」プロパティ内の値のリストは、関連するセットと同じ長さを持つ必要があります。

チャートは 「詳細オプション」を使ってより詳しくカスタマイズできます。詳細オプションを指定するには、このプロパティをそのオプションを指定する JSON 変数にバインドします。オプションは各チャートごとに固有です。Chart.js documentation の中に、各チャート スタイルごとのチャート オプション（例えば、棒グラフにはスペーシング オプションがある） がリストされています。