Skip to main content

ConstellationでのUI設定

PegaアプリケーションのUI設定モデルでは、ワークフロー内のビジネス目的を把握し、その意図を複数のデジタルチャネルで解釈することに重点を置いています。

懸念事項の分離の原則

8.7以前のPega Infinity™ リリースにおける従来のアーキテクチャでは、開発者はセクションルール、ダイナミックレイアウト、スキンフォーマット、カスタムコントロール、さまざまなプロパティパネル設定を使用してアプリケーションインターフェイスを構築していました。 新しいConstellation UI モデルは柔軟性が高く、開発者はフロントエンドコンポーネントとバックエンドAPIをより効率的に接続する手段を提供します。

Pega ConstellationアーキテクチャのUIレイヤーは、懸念事項の分離の原則に従っています。これは、アプリケーションが個別のパーツに分かれるよう定め、各パーツが特定の懸念事項に対応するように定めることで、ソフトウェアのモジュール性を促進するソフトウェア設計の原則です。

UI要素

Constellationアーキテクチャは、不必要な複雑さのある一貫性のないUIに対応し、新しいUIモデルを使用して、ビュー、テンプレート、ウィジェットによりアプリケーションを作成できるようになります。

次の画像で「+」アイコンをクリックすると、UI要素について詳細を表示できます。

補足: App StudioでConstellationビューを作成または更新する方法の詳細については、「ビューの作成」を参照してください。 さまざまなビュータイプとその用途の詳細については、「ビューの設定」を参照してください。 Constellationデザインシステムのコンポーネントの詳細については、「コンポーネントのインストール」を参照してください。

自動生成ビュー

Constellationライブラリを使用して Constellationアーキテクチャ上に構築する新しいアプリケーションの場合、システムは自動的に一連のビューを生成し、App StudioでUIの設定をただちに開始するために使用できます。

フルケースビュー

フルケースビュー、つまりフルケースページは、Pega Platform™の1つのケースを表します。 ほとんどのケースやビジネスオブジェクトに最適化されており、3パネルのレイアウトでは多くの情報に対応しており、その多くはスクロールしたり、他のビューに移動したりすることなく利用できます。 

次の画像で「+」アイコンをクリックすると、Constellationデザインシステム上に構築されたフルケースページの主な領域の詳細が表示されます。

次の画像で「+」アイコンをクリックすると、App StudioでケースUIを設定する方法の詳細が表示されます。

補足: App Studioでは、「Preview」セクションにはプレースホルダーテキストのみが表示されます。 データを使用してケースUIをプレビューするには、ケースインスタンスを実行します。 フルビューとウィジェットの詳細については、「フルページビューの設定」を参照してください。

以下のインタラクションで理解度をチェックしてください。

詳細

Detailsビューは、重要なフィールドなどの読み取り専用ケースデータやその他の情報をレンダリングできるデフォルトのオプショナルビューです。 デフォルトでは、詳細ビューはプライマリーフィールドを表示するように設定されています。 

補足: プライマリーフィールドは、ビューベースのConstellationアーキテクチャでのみ使用できます。 プライマリーフィールドの詳細については、「プライマリーフィールドの設定」を参照してください。

Pulse

Pulseビューは、Pulseを表示するデフォルトのオプショナルビューで、ユーザーはこのケースのコンテキストでメッセージを投稿、表示、返信できます。

編集

Editビューは、ユーザーが「Edit」をクリックするとフォームをレンダリングします。 ビューには、ケースのどのステージでも編集できる重要なフィールドが含まれています。

Create

Createビューは、ケースを作成するために必要なデータを取得するフォームをレンダリングします。

リスト

Listビューは、さまざまな動作を持つこのケースタイプのケースのリストを効率的に設定するためのコントロールを提供します。 デフォルトの構成では、開いているすべてのケースが含まれるリストになりますが、以下の設定も行えます。

  • リストをテーブルまたはタイルベースのギャラリーとして表示
  • ユーザーが選択できるさまざまなビューのリストの設定
  • リストに表示する列の選択
  • 条件によるケースとデータ参照のフィルター、並べ替え、グループ化
  • リスト内のケースに対するケースアクションのバルク実行
  • リスト内のケースに対する新しいレコードの編集または追加
補足: Viewsでのリストデータの使用方法の詳細については、「リストビューの設定」を参照してください。

以下のインタラクションで理解度をチェックしてください。


このトピックは、下記のモジュールにも含まれています。

トレーニングを実施中に問題が発生した場合は、Pega Academy Support FAQsをご確認ください。

このコンテンツは役に立ちましたか?

改善できるところはありますか?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice