Skip to main content

Displaying list data in Views

3 Tasks

10 mins

 Visible to: All users
Beginner Pega Platform '23 User Experience English

Scenario

The GoGoRoad application presents a list in a table of all available service providers for roadside assistance. The UI consultant wants you to make the following changes to the UI: give the relevant service provider information only, and then configure the on-screen content to accommodate multiple screen sizes. Format the list of providers to display in a non-tabular form by using a layout to organize the presentation of a single item and then embedding the Section in a Repeating dynamic layout.

The following table provides the credentials you need to complete the challenge:

Role User name Password
Application Developer author@gogoroad pega123!
Note: Your practice environment may support the completion of multiple challenges. As a result, the configuration shown in the challenge walkthrough may not match your environment exactly.

You must initiate your own Pega instance to complete this Challenge.

Initialization may take up to 5 minutes so please be patient.

Challenge Walkthrough

Detailed Tasks

1 Create the Providers list View

  1. In the Pega instance for the challenge, enter the following credentials:
    1. In the User name field, enter author@gogoroad.
    2. In the Password field, enter pega123!.
  2. In the navigation pane of Dev Studio, click Data types > Service provider to open the Service provider data type.
  3. Click the Views tab.
    Views tab of Service Provider data type
  4. Click Create new View to create a new View.
  5. In the upper left of the New View window, click New View to edit the View name.
  6. Enter Providers list to rename the View.
  7. In the left pane of the window, click Fields.
    The Fields icon on the left pane of the Providers list view.
  8. Hover over the Name field, and then click Add to View.
    Adding the Name field to the Providers list view.
  9. In the Options list, select Read-only.
  10. Repeat step 8 to add the Address field. 
    The Name and Address fields assed to the Providers list view.
  11. Click Submit to close the window.
  12. In the upper-right corner, click Save to save the Providers list View.

2 Create a responsive View

  1. In the navigation pane of Dev Studio, click App to open App Explorer.
  2. In the search field, enter or select GoGo-GoGoRoad-Data-ServiceProvider, and then press the Enter key to display the Rules within the specified class.
  3. Expand User Interface > Section.
    App Explorer with GoGoRoad-Data-ServiceProvider selected
  4. Right-click Section, and then click Create.
  5. In the Create Section form, in the Label field, enter Providers List Responsive to name the Section.
  6. In the upper-right corner, click Create and open to create the Section.
  7. In the Providers List Responsive Section, in the right pane, click Change to change the template.
    Change section template button
  8. In the Select a template window, click Inline wrapping.
  9. In the right pane, click the Add icon to add a control.
    Add control to a section
  10. In the Add list, click Action > Button to add the button control.
  11. In the right pane, hover over the Button control, and then click Edit this "Button". 
  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 the Add icon.
  15. In the Add list, click Data display > Embedded Section. The Section Include Modal dialog box is displayed.
  16. In the Section Include Modal dialog box, in the Section field, enter or select ProvidersList.
    Section include modal for an embedded section
  17. Click Submit to dismiss the dialog box.
  18. In the upper-right corner, click Save to save the responsive view.

3 Add the newly-created View to your application

  1. Create a new Assistance Request Case, and then advance to the Select service provider Step.
    Tip: Not all locations have nearby service providers. In the Identify location Step, in the State field, enter MA to display a list of service providers in Massachusetts, USA.
  2. In the bottom-right corner, on the Developer Toolbar, click Live UI.
  3. In the Assistance Request Case, click the Service provider Section. 
    Select service provider view
    Tip: 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.
  4. In the right pane, to the right of SelectServiceProvider_ServiceProvider, click Open in Dev Studio to open the Section Rule in Dev Studio.
    Open in Dev Studio icon from Live UI
  5. In the Section Rule, click Structural, and then click and drag a Repeating dynamic layout to the Service provider Section, following the Service provider table.
  6. In the Repeating dynamic layout header, click View properties.
    list data views repeating dynamic layout
  7. In the Repeating dynamic layout properties window, in the List/Group field, enter or select .ServiceProvider.
    Repeating dynamic layout properties with .Service provider as List/Group
  8. Click Submit to dismiss the window.
  9. In App Explorer, click Options > Refresh App Explorer.
    Refresh App Explorer
  10. Expand User Interface > Section.
    Drag the ProvidersListResponsive section from the App Explorer
  11. Drag and drop the ProvidersListResponsive Section from App Explorer to the Repeating dynamic layout.
    Drag and drop section to repeating dynamic layout
  12. In the upper-right corner, click Save to save the changes to the Section.
Note: Only the Repeating dynamic layout or the table is needed to show providers. Leave both for comparison.

Confirm your work

  1. Return to the Assistance Request Case instance that you created.
  2. In the upper-right corner, click Actions > Refresh.
  3. In the To do Section, click Go to return to the Select service provider View.
  4. Confirm that the updated Section is displayed.
    Dynamic Repeating layout of Service providers.

This Challenge is to practice what you learned in the following Module:

Available in the following missions:

Return to mission Continue mission
If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

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