レスポンシブUIと表形式データ

Pega Platform™では、テーブルはデータリレーションシップからのデータを自動的に表示します。画面サイズが変化したときに表示される情報を制限するには、そのサイズに適応するようにテーブルを設定できます。テーブルのレスポンシブ設計では、UI画面に重要度の低い情報が表示されないようにし、左右のスクロールを最小限に抑えます。

レスポンシブ動作を設計する際は、表示される情報がビジネスニーズに沿うようにします。情報がエンドユーザーに表示される順序はユーザーエクスペリエンスに影響します。た例えば、次のテーブルでは、注文を梱包する出荷倉庫スタッフのために、「Part number」列、「Quantity」列、「Description」列を表示する必要があります。注文をする顧客に対しては、「Part number」列は非表示にし、「Line total列は表示される情報の最後に必ず表示します。

列の重要度

テーブルには1つまたは複数の列を含み、各列に重要度を設定します。列の重要度により、表示サイズを変更した場合にPega Platformで列がどのように表示されるかが決まります。列の重要度のオプションは「Primary」、「Secondary」、「Other」で、デフォルトでは左端の列が「Primary」に設定されます。

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

列の重要度はDev Studioで設定します。またApp Studioでは、実行時にフォーム設定を編集する際に1つの列の重要度を「Primary」に設定または変更できます。列をテーブルの左端に移動させ、列の重要度を「Primary」に設定できます。テーブルの列の順序を変更すると、Pega Platformでは自動的に左端の列の重要度が「Primary」に設定され、残りの列は「Secondary」に設定されます。

Table at runtime so you can edit column importance

Dev Studioでは、列に「Primary」、「Secondary」、「Other」の重要度を割り当て、列の幅を編集することができます。ベストプラクティスとして、固定された幅は使用しないでください。グリッドやツリーグリッドなどテーブル形式のレイアウトでは、幅は常に100%に設定します。この設定により、使用されるデバイスに適応するように表示が構成されます。

補足： Dev Studioでの列のプロパティの詳細については、「Arranging column visibility by importance」を参照してください。

レスポンシブテーブルのデフォルトブレークポイントの設定

デフォルトでは、テーブルには2つのレスポンシブブレークポイントがあります。最初のやや広いブレークポイントでは、重要度が「Other」に設定されている列は表示されません。 2番目のやや狭いブレークポイントでは、テーブルはリストとして表示されます。テーブルの各行について、各列の内容が縦に並んで表示されるため、左右にスクロールする必要はありません。