Skip to main content

チャレンジ

ビューにリストデータを表示する

4 タスク

10 分

Visible to all users
初級 Pega Platform 8.4 ユーザーインターフェイス 日本語

シナリオ

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

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

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

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

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

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

詳細なタスク

1 Create the Providers list view

  1. In the navigation pane of Dev Studio, click Data types > Service provider to open the Service provider data type.
  2. Click the Views tab.
    Views tab of the Service provider data type
  3. Click Create new view to create a new view.
  4. In the upper left of the New View window, click New View to edit the view name.
  5. Rename the view Providers list.
  6. In the left pane of the window, expand Fields.
    Expand fields in the left pane of the New View window
  7. Hover over the Name field, and then click Add to view.
    Add to view icon
  8. From the Options drop-down, select Read-only.
  9. Repeat step 7 to add the Address and LatLong fields.
  10. To the right of the empty row, click the trash icon to delete the empty field.
    Providers list view
  11. Click Submit, and then click Save.

2 Create a responsive view

  1. From the navigation pane, click App to open the App Explorer.
  2. In the search field, enter or select GoGo-GoGoRoad-Data-ServiceProvider and press the Enter key. The rules within the specified class are displayed.
  3. Expand User Interface > Section.
    App Explorer with GoGoRoad-Data-ServiceProvider selected
  4. Right-click Section, and then click Create. The Create Section form is displayed.
  5. In the Label field, enter Providers List Responsive to name the section.
  6. Click Create and open to create the section. The Providers List Responsive section is displayed.
  7. In the right pane, click Change to change the template. The Select a template window is displayed.
    Change section template button
  8. In the Select a template window, click Inline wrapping.
  9. In the right pane, click Add to add a control. A dialog box is displayed.
    Add control to a section
  10. In the dialog box, expand Action, and then click Button.
  11. Hover over the Button control, and then click Edit. The Cell Properties window is displayed.
  12. In the Cell Properties window, in the Text field, enter Select provider.
    Cell properties for the Select provider button
  13. Click Submit to dismiss the window.
  14. In the right pane, click Add.
  15. Expand Data display, and then click Embedded section. The Section Include Modal window is displayed.
  16. In the Section Include Modal window, in the Section field, enter or select ProvidersList.
    Section include modal for an embedded section
  17. Click Submit, and then click Save.
     

3 Use the newly-created view in your application

  1. Create a new Assistance Request case, and advance to the Select service provider step.
  2. In the Developer Toolbar, click Live UI, and then click the Service provider section.
    Live UI with the Select Service Provider section selected
ヒント: You can open UI section rules by using the Live UI tool or from the App or Data Explorer. Live UI is best applied for sections that are actively used in the case type.
  1. Click Open in Dev Studio to open the section rule in Dev Studio.
    Open in Dev Studio icon from Live UI
  2. Click Structural, and then click and drag a Repeating dynamic layout to the Service provider section.
  3. Click View properties. The Repeating dynamic layout properties window is displayed.
  4. In the Repeating dynamic layout properties window, in the List/Group field, enter or select .ServiceProvider.
    Repeating dynamic layout properties window with source specified as Service provider
  5. Click Submit.
  6. From the App Explorer, click Options > Refresh App Explorer.
    Refresh App Explorer
  7. Expand User Interface > Section.
  8. Drag and drop the ProvidersListResponsive section from the App Explorer to the Repeating Dynamic Layout.
    Drag the ProvidersListResponsive section from the App Explorer
  9. Click Save.
補足: Only the repeating dynamic layout or the table is needed to show providers. Leave both for the purposes of comparison.

4 Confirm your work

  1. Return to the Assistance Request case instance you created.
  2. Click Actions > Refresh.
  3. Verify that the updated section is displayed. 
    Select service provider view with repeating dynamic layout


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

トレーニングを受講中に何か問題がありましたら、こちらをご覧ください: 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