チャレンジ

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

3 タスク

10 分

表示の対象：All users Applies to: Pega Platform '24.2

初級

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

日本語

シナリオ

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

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

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

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

補足： このミッションは、Infinity 24.2のリリース日に先駆けて社内で公開されています。チャレンジ環境は、ミッションが外部で公開された時点で使用可能になります。

このチャレンジを完了するには、Pegaインスタンスを起動する必要があります。

起動には5分ほどかかることがありますので、しばらくお待ちください。

ログイン

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

詳細なタスク

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

チャレンジのPegaインスタンスに、以下のログイン情報を入力します。
1. User nameフィールドに「author@gogoroad」と入力します。
2. Password フィールドに「pega123!」と入力します。
Dev Studioのナビゲーションペインで、「Data types」>「Service provider」をクリックして、Service providerデータタイプを開きます。
「Views」タブをクリックします。
「Create new View」をクリックして、新しいビューを作成します。
New Viewウィンドウの左上で、「New View」をクリックして、ビュー名を編集します。
「Providers list」と入力してビューの名前を変更します。
ウィンドウの左ペインで、「Fields」をクリックします。
「Name」フィールドにカーソルを合わせて、「Add to view」をクリックします。
手順8を繰り返して、Addressフィールドを追加します。
「Submit」をクリックしてウィンドウを閉じます。
右上隅にある「Save」をクリックして、Providers listビューを保存します。

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」ウィンドウで、「Inline wrapping」をクリックします。
右側のペインで、「Add」アイコンをクリックしてコントロールを追加します。
Add リストで、「Action」>「Button」をクリックして、ボタンコントロールを追加します。
右側のペインで、「Button」コントロールにカーソルを合わせて、「Edit this Button」をクリックします。
Cell PropertiesウィンドウのTextフィールドに、「Select provider」と入力します。
「Submit」をクリックしてウィンドウを閉じます。
右側のペインで、「Add」アイコンをクリックします。
Add リストで、「Data display」>「Embedded section」をクリックします。「Section Include Modal」ダイアログボックスが表示されます。
「Section Include Modal」ダイアログボックスのSectionフィールドに「ProvidersList」と入力するか、選択します。
「Submit」をクリックしてダイアログを閉じます。
右上隅の「Save」をクリックして、レスポンシブビューを保存します。
右側のペインで、Providers listの隣にある「Open 」アイコンをクリックします。
右側のペインで、Nameの隣にある「Edit this "Text input" 」アイコンをクリックします。
Presentation タブをクリックします。
Edit optionsリストで、「Read-only (always)」を選択します。
「Submit」をクリックしてダイアログを閉じます。
右上隅で、「保存」をクリックしてビューを保存します。

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_ServiceProviderの右側の「Open in Dev Studio」をクリックして、Dev Studioでセクションのルールを開きます。
セクションルールで「Structural」をクリックしてから、「Service provider」のテーブルに従って、「Repeating dynamic layout」をクリックして「Service provider」セクションにドラッグします。
「Repeating dynamic layout」ヘッダーで、「View properties」クリックします。
Repeating dynamic layout propertiesウィンドウで、Sourceフィールドで「Data Page」を選択します。
「Data Page」フィールドに「D_ServiceproviderList」を入力または選択してください。
パラメーター値セクションのstateフィールドに、「.serviceaddress.state」を入力または選択します。
「Submit」をクリックしてウィンドウを閉じます。
App Explorerで、「Options」>「Refresh App Explorer」をクリックします。
「User Interface」>「Section」を展開します。
App Explorerからリピーティングダイナミックレイアウトに「ProvidersListResponsive」セクションをドラッグアンドドロップします。
右上隅での「Save」をクリックして、セクションへの変更を保存します。