Skip to main content

チャレンジ

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

シナリオ

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

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

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

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

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

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

詳細なタスク

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

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

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」をクリックします。 「Create Section」フォームが表示されます。
  5. 「Label」フィールドに「Providers List Responsive」と入力して、セクションに名前を付けます。
  6. 右上の「Create and open」をクリックして、セクションを作成します。 「Providers List Responsive」セクションが表示されます。
  7. 右側のパネルで、「Change」をクリックしてテンプレートを変更します。 「Select a template」ウィンドウが表示されます。
    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」をクリックします。 「Cell Properties」ウィンドウが表示されます。
  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」セクションをクリックします。 
    image which shows the Select service provider
    ヒント: UIセクションのルールを開くには、Live UIツールを使用するか、App ExplorerまたはData Explorerを使用します。 Live UIは、ケースタイプで頻繁に使用されるセクションへの適用に適しています。
  4. 右側のペインの SelectServiceProviderの右側の「Open in Dev Studio」をクリックして、Dev Studioでセクションのルールを開きます。
    Open in Dev Studio icon from Live UI
  5. セクションルールで、「Structural」をクリックしてから、「Repeating dynamic layout」をクリックして「Service provider」セクションにドラッグします。
  6. 「Repeating dynamic layout」ヘッダーで、「View properties」クリックします。 「Repeating dynamic layout properties」ウィンドウが表示されます。
  7. 「Repeating dynamic layout properties」ウィンドウの「List/Group」フィールドに、「.ServiceProvider」と入力するか、これを選択します。
    Repeating dynamic layout properties window with source specified as Service provider
  8. 「Submit」をクリックしてウィンドウを閉じます。
  9. App Explorerで、「Options」 > 「Refresh App Explorer」とクリックします。
    Refresh App Explorer
  10. 「User Interface」 > 「Section」をクリックします。
  11. App Explorerからリピーティングダイナミック レイアウトに「ProvidersListResponsive」セクションをドラッグ アンド ドロップします。 
    Drag the ProvidersListResponsive section from the App Explorer
  12. 右上の「Save」をクリックしてセクションへの変更が保存されます。
補足: プロバイダを表示するためには、リピーティングダイナミック レイアウトまたはテーブルのみ必要です。 比較のために、両方を残します。

作業の確認

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


下記のミッションにも含まれています。

トレーニングを受講中に何か問題がありましたら、こちらをご覧ください: Pega Academy サポートのよくある質問 (FAQ).

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

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

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