Bonita BPM UI デザイナーは、Bonita BPM のカスタムページとフォーム設計専用の強力なアプリケーションです。ブラウザで稼働します。Bonita BPM Studio からの起動によって、 Web サーバーが開始され、UI デザイナーのホームページがデフォルトのブラウザ（Studio の環境設定に依存）で開きます。

UI デザイナーの開始

Bonita BPM Studio メニューバーから

[開発] メニューを開き、[UI デザイナーを開く…] を選択するか、またはクールバーの[UI デザイナー] アイコンをクリックします。

フォーム マッピングタブから

ヒューマンタスクを選択し、[詳細] パネル -> [実行] タブに進みます。 そして次の該当するフォーム マッピングタブに進みます：

• 起案フォーム： プロセス インスタンスを開始するフォーム
• 案件概況フォーム： プロセス インスタンスの概況を表示するページ
• フォーム： ヒューマンタスク上のフォーム

フォームの種類を[UI デザイナー] にして、ドロップダウンリストからフォームを選択し、鉛筆アイコンをクリックしてそれを編集するか、または newForm を選択し鉛筆アイコンをクリックして新規フォームを作成することができます。

ページをデザインする

ページを作成した後、ページ エディタでそれを更新することができます。ウィジェットをパレットからホワイトボードにドラッグ＆ドロップすることによってページを更新します。ウィジェットのプロパティ パネルでウィジェットのプロパティを編集します。その時、必要に応じて変数を作成したり、ウィジェットにそのデータをバインドします。

ページをプレビューする

[プレビュー] ボタンをクリックすることによって、ページの再描画をプレビューできます。このとき、デプロイ後に表示されるページビューを伴ってた別のブラウザ ウィンドウが開かれます。そのページを更新し保存したときに、そのプレビューは自動的にリフレッシュされます（Internet Explorer 9 では機能しません）。

Performance と Efficiency edition では、プレビュー画面で下図のデバイスタイプバーを使用しターゲットのデバイスの種類を選択できます。

プレビューは選択したデバイスの種類で表示される予定のページを表現します。

ページをエクスポートする

ページをBonita BPM ポータルにカスタムページとしてデプロイするため、あるいは別のUI デザイナーにそのページをインポートするために、エクスポートできます。

ペーシをエクスポートするには、UI デザイナーのホームページ、またはページエディタ上の [エクスポート] ボタン  をクリックします。zip ファイルがあなたのコンピュータにダウンロードされます。それはBonita BPM のカスタムページを含んでおり、別のUI デザイナーにインポートも可能です。

エクスポート後、 resources フォルダに置かれているコードを直接編集することで、あなたのページコードを変更できます。この方法でコードに加えた如何なる変更も Bonita BPM ポータルにページがデプロイされたときに使用可能になることを承知しておいてください。ただし、そのページを他のUI デザイナーにインポートする場合を除きます。

ページをインポートする

別のUI デザイナーからページをインポートするには、UI デザイナーのホームページに進んでページエディタ上の [インポート] ボタン をクリックします。ページをインポートするとき、その依存性（そのページで使用されているカスタム ウィジェットやフラグメント）も自動的にインポートされます。

警告： UI デザイナーで設計されていないカスタムページは、UI デザイナーにインポートできません。

.bos/.bar ファイル内のページ

プロセスの .bar ファイルを生成するとき、UI デザイナーで作成してマップしたページは、このファイルに組み込まれます。この .bar ファイルを使用してプロセスを Bonita BPM にデプロイするときは、そのページもインポートされデプロイされます。

同様の方法で、プロセスの .bos ファイル内のページをエクスポートすることが選択できます。その .bos ファイルを別の Bonita BPM にインポートする場合、そのページは Studio のUI デザイナーで使用可能です。