Skip to main content

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

3 タスク

10 分

Visible to: All users
初級
Pega Platform '23
ユーザーエクスペリエンス
日本語

シナリオ

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

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

ロール ユーザー名 パスワード
アプリケーションデベロッパー author@gogoroad pega123!
補足: 練習環境では、複数のチャレンジの完了をサポートする場合があります。 その結果、チャレンジのウォークスルーに表示される設定は、お客様の環境と完全に一致しない場合があります。

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

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

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

詳細なタスク

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

  1. チャレンジのPegaインスタンスに、以下のログイン情報を入力します。
    1. User nameフィールドに「author@gogoroad」と入力します。
    2. Password フィールドに「pega123!」と入力します。
  2. Dev Studioのナビゲーションパネルで、「Data types」>「Service provider」をクリックして、Service providerデータタイプを開きます。
  3. 「Views」タブをクリックします。
    Views tab of Service Provider data type
  4. Create new View」をクリックして、新しいビューを作成します。
  5. New Viewウィンドウの左上で、「New View」をクリックして、ビュー名を編集します。
  6. Providers list」と入力してビューの名前を変更します。
  7. ウィンドウの左ペインで、「Fields」をクリックします。
    The Fields icon on the left pane of the Providers list view.
  8. Name」フィールドにカーソルを合わせて、「Add to View」をクリックします。
    Adding the Name field to the Providers list view.
  9. 「Options」リストで、「Read-only」を選択します。
  10. 手順8を繰り返して、Addressフィールドを追加します。 
    The Name and Address fields assed to the Providers list view.
  11. 「Submit」をクリックしてウィンドウを閉じます。
  12. 右上隅にある「Save」をクリックして、Providers listビューを保存します。

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

  1. Dev Studioのナビゲーションペインで、「App」をクリックしてApp Explorerを開きます。
  2. 検索フィールドに「GoGo-GoGoRoad-Data-ServiceProvider」と入力するか、これを選択し、「Enter」キーを押して指定されたクラス内のルールを表示します。
  3. 「User Interface」>「Section」を展開します。
    App Explorer with GoGoRoad-Data-ServiceProvider selected
  4. 「Section」 を右クリックし、「Create」をクリックします。
  5. Create SectionフォームのLabelフィールドに「Providers List Responsive」と入力して、セクションに名前を付けます。
  6. 右上隅にある「Create and open」をクリックして、セクションを作成します。
  7. Providers List Responsive」セクションの右側のパネルで、「Change」をクリックしてテンプレートを変更します。
    Change section template button
  8. 「Select a template」ウィンドウで、「Inline wrapping」をクリックします。
  9. 右側のペインで、「Add」アイコンをクリックしてコントロールを追加します。
    Add control to a section
  10. Add リストで、「Action」>「Button」をクリックして、ボタンコントロールを追加します。
  11. 右側のペインで、「Button」コントロールにカーソルを合わせて、「Edit this Button」をクリックします。 
  12. 「Cell Properties」ウィンドウの「Text」フィールドに、「Select provider」と入力します。
    Cell properties for the Select provider button
  13. 「Submit」をクリックしてウィンドウを閉じます。
  14. 右側のペインで、「Add」アイコンをクリックします。
  15. Add リストで、「Data display」>「Embedded section」をクリックします。 「Section Include Modal」ダイアログボックスが表示されます。
  16. 「Section Include Modal」ダイアログボックスの「Section」フィールドに「ProvidersList」と入力するか、選択します。
    Section include modal for an embedded section
  17. 「Submit」をクリックしてダイアログを閉じます。
  18. 右上隅の「Save」をクリックして、レスポンシブビューを保存します。

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

  1. 新しいAssistance Requestケースを作成し、Select service providerステップに進みます。
    ヒント: すべての拠点で付近にサービスプロバイダーが存在するとは限りません。 Identify LocationステップのStateフィールドに「MA」と入力して、米国のマサチューセッツ州のサービスプロバイダーのリストを表示します。
  2. 右下にある「Developer Toolbar」で、「Live UI」をクリックします。
  3. Assistance Requestケースで、「Service provider」セクションをクリックします。 
    Select service provider view
    ヒント:  UIセクションのルールを開くには、Live UIツールを使用するか、App ExplorerまたはData Explorerを使用します。 Live UIは、ケースタイプで頻繁に使用されるセクションへの適用に適しています。
  4. 右側のペインのSelectServiceProvider_ServiceProviderの右にある「Open in Dev Studio」をクリックして、Dev Studioでセクションのルールを開きます。
    Open in Dev Studio icon from Live UI
  5. セクションルールで「Structural」をクリックしてから、「Service provider」のテーブルに従って、「Repeating dynamic layout」をクリックして「Service provider」セクションにドラッグします。
  6. Repeating Dynamic Layout」ヘッダーで、「View properties」クリックします。
    list data views repeating dynamic layout
  7. Repeating Dynamic Layout properties」ウィンドウの「List/Group」フィールドに、「.ServiceProvider」と入力するか、これを選択します。
    Repeating dynamic layout properties with .Service provider as List/Group
  8. 「Submit」をクリックしてウィンドウを閉じます。
  9. App Explorerで、「Options」>「Refresh App Explorer」をクリックします。
    Refresh App Explorer
  10. 「User Interface」>「Section」を展開します。
    Drag the ProvidersListResponsive section from the App Explorer
  11. App Explorerからリピーティングダイナミックレイアウトに「ProvidersListResponsive」セクションをドラッグアンドドロップします。
    Drag and drop section to repeating dynamic layout
  12. 右上隅での「Save」をクリックして、セクションへの変更を保存します。
補足: プロバイダーを表示するためには、リピーティングダイナミックレイアウトまたはテーブルのみが必要です。 比較のために両方を残します。

作業の確認

  1. 作成したAssistance Requestケースインスタンスに戻ります。
  2. 右上隅で、「Actions>Refresh」をクリックします。
  3. To doセクションで「Go」をクリックし、「Select service provider」ビューに戻ります。
  4. 更新されたセクションが表示されることを確認します。
    Dynamic Repeating layout of Service providers.

このチャレンジは、下記のモジュールで学習したことを実践するための内容です。


このモジュールは、下記のミッションにも含まれています。

トレーニングを実施中に問題が発生した場合は、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