ビューでのリストデータの表示

Archived

3 タスク

10 分

Visible to: All users

初級

Pega Platform 8.6

ユーザーエクスペリエンス

日本語

シナリオ

GoGoRoadアプリケーションでは、使用可能なすべてのサービスプロバイダのリストがテーブルに表示されます。 UIコンサルタントから、関連するサービスプロバイダ情報のみを表示し、複数の画面サイズに対応するように画面上のコンテンツを設定するという、UIの変更を依頼されました。テーブル形式でない形式で表示するようにプロバイダのリストの形式を設定し、単一項目の表示を編成するレイアウトを使用してから、リピーティングダイナミックレイアウトにセクションを埋め込みます。

以下の表は、チャレンジに必要なログイン情報をまとめたものです。

ロール	ユーザー名	パスワード
アプリケーションデベロッパー	author@gogoroad	pega123!

補足： 練習環境では、複数のチャレンジの完了をサポートする場合があります。その結果、チャレンジのウォークスルーに表示される設定は、お客様の環境と完全に一致しない場合があります。

チャレンジウォークスルー

詳細なタスク

1 「Providers list」ビューを作成する

Dev Studioのナビゲーションパネルで、「Data types」 > 「Service provider」をクリックして、Service providerデータタイプを開きます。
「Views」タブをクリックします。
「Create new view」をクリックして、新しいビューを作成します。
New Viewウィンドウの左上で、「New View」をクリックして、ビュー名を編集します。
「Providers list」と入力してビューの名前を変更します。
ウィンドウの左ペインで、「Fields」をクリックします。
「Name」フィールドにカーソルを合わせて、「Add to view」をクリックします。
「Options」リストで、「Read-only」を選択します。
手順7を繰り返して、「Address」フィールドおよび「LatLong」フィールドを追加します。
「Submit」をクリックしてウィンドウを閉じます。
右上の「Save」をクリックして、「Providers」リストビューを保存します。

2 レスポンシブなビューを作成する

Dev Studioのナビゲーションペインで、「App」をクリックしてApp Explorerを開きます。
検索フィールドに「GoGo-GoGoRoad-Data-ServiceProvider」と入力するか、選択して、「Enter」キーを押します。指定されたクラス内のルールが表示されます。
「User Interface」 > 「Section」をクリックします。
「Section」を右クリックし、「Create」をクリックします。「Create Section」フォームが表示されます。
「Label」フィールドに「Providers List Responsive」と入力して、セクションに名前を付けます。
右上の「Create and open」をクリックして、セクションを作成します。「Providers List Responsive」セクションが表示されます。
右側のパネルで、「Change」をクリックしてテンプレートを変更します。「Select a template」ウィンドウが表示されます。
「Select a template」ウィンドウで、「Inline wrapping」をクリックします。
右側のペインで、「Add」アイコンをクリックしてコントロールを追加します。
Add リストで、「Action」>「Button」をクリックして、ボタンコントロールを追加します。
右側のペインで、「Button」コントロールにカーソルを合わせて、「Edit this Button」をクリックします。「Cell Properties」ウィンドウが表示されます。
「Cell Properties」ウィンドウの「Text」フィールドに、「Select provider」と入力します。
「Submit」をクリックしてウィンドウを閉じます。
右側のペインで、「Add」アイコンをクリックします。
Add リストで、「Data display」>「Embedded section」をクリックします。「Section Include Modal」ダイアログボックスが表示されます。
「Section Include Modal」ダイアログボックスの「Section」フィールドに「ProvidersList」と入力するか、選択します。
「Submit」をクリックしてダイアログを閉じます。
右上の「Save」をクリックすると、レスポンシブビューが保存されます。

3 新規作成したビューをアプリケーションに追加する

新しい「Assistance Request」ケースを作成し、「Select service provider」ステップに進みます。
ヒント： すべての拠点で付近にサービスプロバイダが存在するとは限りません。「Identify Location」ステップのStateフィールドに「MA」と入力して、米国のマサチューセッツ州のサービスプロバイダのリストを表示します。
Developer Toolbarで、「Live UI」をクリックします。
「Assistance Request」ケースで、「Service provider」セクションをクリックします。

ヒント： UIセクションのルールを開くには、Live UIツールを使用するか、App ExplorerまたはData Explorerを使用します。 Live UIは、ケースタイプで頻繁に使用されるセクションへの適用に適しています。
右側のペインの SelectServiceProviderの右側の「Open in Dev Studio」をクリックして、Dev Studioでセクションのルールを開きます。
セクションルールで、「Structural」をクリックしてから、「Repeating dynamic layout」をクリックして「Service provider」セクションにドラッグします。
「Repeating dynamic layout」ヘッダーで、「View properties」クリックします。「Repeating dynamic layout properties」ウィンドウが表示されます。
「Repeating dynamic layout properties」ウィンドウの「List/Group」フィールドに、「.ServiceProvider」と入力するか、これを選択します。
「Submit」をクリックしてウィンドウを閉じます。
App Explorerで、「Options」 > 「Refresh App Explorer」とクリックします。
「User Interface」 > 「Section」をクリックします。
App Explorerからリピーティングダイナミックレイアウトに「ProvidersListResponsive」セクションをドラッグアンドドロップします。
右上の「Save」をクリックしてセクションへの変更が保存されます。