ページ

このページは、ポータルにページ リソース（カスタム ページとも呼ばれる）を適用しユーザーが利用可能にする方法を説明します。ページ リソースは、アプリケーション内での利用を意図しています。ポータルをカスタマイズするためにページ リソースを使用することもできます。たとえば：

  • Bonita BPM の活動や関連の外部アプリケーションを表示するダッシュボード付きのウェルカムページを追加する。
  • プロセス オーナーにプロセスの案件進行状況を表示するダッシュボードを提供する。
  • 多忙なユーザーにフィルターで絞り込んだタスク リストのビューを提供する。
  • システム管理者に複数の属性の検索に機能を提供する。
  • 外部アプリケーションとページを統合する。
  • システム管理者プロファイルを持たないユーザーに対しレポートを使用可能にする。
カスタム ページの定義
ページコントローラー インターフェイス
カスタム ページ例
Bonita BPM ポータル コンテンツの使用
カスタム ページの開発時のデバッキング
制約
ページ リソースの管理
ページ リソース
API アクセス
テーマ アクセス

ページはBonita BPM ポータルのリソースとしてエクスポート、インポート、変更、削除されます。

カスタム ページの定義

ページ リソースは、全般的なリソース定義を持っています。そのリソース定義が Index.groovy ファイルを含む場合、オプションとしてライブラリを使用してページコントローラー インターフェイスを実装する必要があります。UI デザイナーを使用してカスタムページを作成する場合は、そのカスタムページは要求される構造とコンテンツを自動的に持ちます。

カスタム ページは、ポータルのリソース（たとえば、JS や CSS）とカスタム ページで使用されるリソース間の衝突を避けるため iframe の内部に表示されます。これはマイグレーションで問題が生じるリスクを低減します。たとえば、カスタム ページが Bonita BPM ポータルで提供している JQuery のバージョンを使用し、そのバージョンが更新された場合です。

ページコントローラー インターフェイス

public interface PageController {

/**
* Let the custom page parse request for specific attribute handling.
*
* @param request the HTTP servlet request intended to be used as in a servlet
* @param response the HTTP servlet response intended to be used as in a servlet
* @param pageResourceProvider provide access to the resources contained in the custom page zip
* @param pageContext provide access to the data relative to the context in which the custom page is displayed
*/
public void doGet(HttpServletRequest request, HttpServletResponse response, PageResourceProvider pageResourceProvider, PageContext pageContext);
}

カスタム ページ例

２つのサンプル カスタム ページがポータルで利用可能です。両サンプルは次の方法をガイドします：

  • Bonita CSS を取得する
  • 単純な HTMLコードを書き込む
  • ロケールを含むセッション情報を取得する
  • カスタム ページ定義からリソースを取得する
  • Engine Java API （Groovy 使用例） または Web REST API （HTML 使用例）の呼び出し
  • 外部ページへのクリック可能なリンクを書き込む
  • ポータルページへのクリック可能なリンクを書き込む
  • ロケール固有のメッセージを書き込む

Groovy example page は Groovy を使用してカスタムページを定義します。 HTML example page は HTML だけを使用してカスタムページを定義します。実際にやってみると、あなたは多分、Groovy と HTML の組み合わせでカスタムページを作成するでしょう。

サンプルページを見るには、ページをカスタム プロファイルに発行してから、ポータル内でそれを見ることができます。サンプルのソースを見るには、カスタム ページをエクスポートします。

また、カスタマーポータル上には、AngularJS とカスタマイズ可能なタスクリストのサンプルページを使用してカスタムページを作成するためのサンプルがシードプロジェクトのフォーム内にあります。

Bonita BPM ポータル コンテンツの使用

カスタムページ内でBonita BPM ポータルのページを再利用することができます。たとえば、案件履歴の詳細を提供するページに現在の案件状態を示すライブの案件状態図を含めることができます。たとえば、プロセス定義Id “8270554088248243867” の案件番号 “1” に対しては、あなたのカスタム ページ定義に次の行を含めます:

def idProcess = "8270554088248243867";
def idCase = "1";
out.write("""http://../portal.js/#/admin/monitoring/$idProcess-$idCase""");

これは、標準のBonita BPMポータルに現れる案件フロー図とまさに同じものを表示します。ビューを変更し、URL に次のように ?diagramOnly を追加してポータルの[戻る] ボタンを非表示にすることができます：

out.write("""http://../portal.js/#/admin/monitoring/$idProcess-$idCase?diagramOnly""");

カスタム ページの開発時のデバッキング

あなたがカスタム ページを開発している間、ポータルでカスタム ページをデバッグモードにすることができます。デバッグモードでは、新しい zip アーカイブをインポートすることなく、カスタム ページの変更点を見ることができます。

カスタムページをデバッグモードにするには、 <BONITA_HOME>/client/tenants/<tenant ID>/conf/console-config.properties を編集し custom.page.debug を true にセットします。

デバッグモードでページを作業するには：

  1. あなたのカスタムページの zip アーカイブをポータルにインポートします。これはディレクトリ  <BONITA_HOME>/client/tenants/<tenant ID>/work/pages/<your custom page> を作成します。
  2. そのページをプロファイルに発行し、ログアウト後、そのプロファイルを持つユーザーでログインします。
  3. これでIndex.groovy および <BONITA_HOME>/client/tenants/<tenant ID>/work/pages/<your custom page> 直下の lib ディレクトリのコンテンツを更新できます。
  4. ページ変更後、それを見るには、ブラウザ上のそのページをリフレッシュします。

ページの開発が終了したら、カスタムページの zip アーカイブを再作成し、それをインポートしてページを変更します。これで、ページの最終バージョンが永続的に利用可能になります。

制約

カスタム ページがポータルの iframe 内に表示されるのでポータルの変更とは切り離されています。Bonita BPM の新しいバージョンにマイグレートした場合、カスタム ページ定義は有効なままになります。しかしながら、将来のすべてのマイグレーションを保証できるものではありません。

ページ リソースの管理

ページ リソース

カスタム ページのリソースは、 PageResourceProvider によってアクセスできます。

bonita.css は、次を使用して取得できます。

pageResourceProvider.getBonitaThemeCSSURL()

その他の css/js は、次を使用して取得できます。

pageResourceProvider.getResourceURL(“<path in the custom page resources folder>”)

Groovy を使用していない場合は、 index.html 内にリンクを追加してリソースにダイレクトにアクセスできます。

たとえば：

<link href="css/file.css" rel="stylesheet" />

API アクセス

あなたのページがカスタム プロファイル、またはアプリケーション内に表示された場合、portal API の機能にアクセスできます。

次のパスを使用し portal API にアクセス可能になります： “../API/{API name}/{resource name}”

テーマ アクセス

あなたのページがアプリケーション内に表示された場合、application theme の機能にアクセスできます。

index.html 内に次のリンクを追加することによって、直接リソースにアクセスできます： <link href="../theme/theme.css" rel="stylesheet" />