Skip to main content

Designing a mobile app UI

Archived

3 Tasks

15 mins

Visible to: All users
Beginner Pega Platform 8.4 Mobile User Experience English
This content is now archived and is no longer updated. Progress is not calculated. Pega Cloud instances are disabled, and badges are no longer awarded.

Scenario

GoGoRoad's customer experience team wants to provide mobile users with a mobile-oriented interface to present nearby service providers. Instead of presenting a table, present mobile users with a map that displays markers that indicate the location of nearby service providers. Configure the map to display a pop-up that contains the name and address of the provider when the user taps a marker. Another developer has already configured the user interface that is presented in the pop-up.

Add an Address map control to the Select service provider view to display a marker for each nearby service provider. Configure the map to display the ProviderInformation section when the user clicks the marker. Apply a visible when condition by using the standard pyIsMobile when rule to the map to display the map only on mobile devices. Apply a visible when condition by using the standard IsNotMobile when rule to hide the table of service providers on mobile devices.

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

Role Operator ID Password
Application Developer author@gogoroad pega123!

Challenge Walkthrough

Detailed Tasks

1 Configure a map control to display nearby service providers

  1. In Dev Studio, in the navigation pane, click App to open the Application Explorer.
  2. In the Application Explorer, expand AssistanceRequest > User Interface > Section and click SelectServiceProvider_ServiceProvider to open the section rule that displays the list of nearby service providers.
  3. On the section rule form, click Structural > Dynamic layout and drag the mouse cursor to the rule form above the Table 1 layout. A horizontal orange line is displayed on the rule form to indicate the planned position of the dynamic layout.
    The insertion point for a new layout is indicatedby the orange horizontal line
  4. Release the mouse button to insert the dynamic layout above the table layout.
  5. Click Data display > Map and drag the mouse cursor into the empty dynamic layout to add a map control to the section.
  6. Double-click the Map control to open the Cell Properties window.
  7. Change the map to use the Address Map control, rather than the default Tracking Map control.
    1. To the right of the control name, click Change to select a new control.
      Map properties window, highlighting the link for changing the control
    2. Under Custom, select Other to dismiss the list of controls and display an entry field to the right of the control name.
    3. In the unlabeled field to the right of the control name, enter or select pxAddressMap to use the Address Map control.
      Map properties window with the pxAddressMap control selected
  8. In the Cell Properties window, click the Show User Location check box to display the current location of the user.
  9. Add markers for service providers to the map.
    1. Under Markers source, from the Type drop-down list, select Data page to source marker data by using a data page.
    2. In the Data page field, enter or select D_ServiceproviderList to source marker data by using the records associated with the Service Provider data type. The Cell Properties window refreshes to display the parameter expected by the data page.
    3. Under the Data page field, in the Value field, enter or select .ServiceAddress.State to use the state of the service address as a parameter to the data page to filter the list of service providers.
    4. In the Property for location field, enter or select .LatLong to position markers using the latitude and longitude coordinates for each service provider.
    5. In the Marker Info section field, enter or select ProviderInformation to identify the section to display when the user clicks a marker icon.
      Completed configuration of the Address Map control to display markers for nearby service providers
  10. Click Submit to complete the configuration of the Address Map control.

2 Apply visible when conditions to the map and table of service providers

  1. On the section rule form, double-click the Dynamic Layout (Default) - 1 label to open the Dynamic layout properties window.
  2. In the Dynamic layout properties window, from the Visibility drop-down list, select Condition (when rule). A field is displayed to the right of the drop-down list.
  3. In the unlabeled field to the right of the drop-down list, enter or select pyIsMobile to display the layout that contains the map only when the user is using a mobile device.
    Configuration of the dynamic layout containing the map control to display only if the user is using a mobile device
  4. Click Submit to complete the configuration of the layout that contains the map of service providers.
  5. Double-click the Table - 2 label to display the Layout Properties window for the table layout.
  6. Under Conditions, from the Grid visibility drop-down list, select Condition (when rule). A field is displayed to the right of the drop-down list.
  7. In the unlabeled field to the right of the drop-down list, enter or select IsNotMobile to display the table layout only when the user is not using a mobile device.
  8. Click Submit to complete the configuration of the table layout.
  9. Click Save to complete the configuration of the section.

3 Confirm your work

  1. In App Studio, click Preview application to return to the Case Manager.
  2. Create a new Assistance Request case.
  3. Advance the case to the Identify Location step, completing any required fields.
  4. On the Identify Location step, in the State field, enter MA to display service providers located in the state of Massachusetts in the United States.
  5. Advance the case to the Select Service Provider step.
  6. Confirm that only the table of service providers is displayed.
    Table of service providers displayed to a user not using a mobile device
  7. In the menu bar, click the Tablet preview icon to preview the case by using a simulated Apple iPad Pro 10.5 display.
    App Studio menu bar with the Tablet preview icon highlighted
Tip: The Tablet preview provides a larger preview area for the case than the mobile phone preview.
  1. Confirm that only the map of service providers is displayed.
    The Select service providers step, as viewed on a simulated Apple iPad display
  2. Click one of the markers to display a pop-up window containing provider information and a button to assign the provider to the case.
    Map of service providers with a provider selected, displaying a pop-up containing information about the service provider
  3. Optional: Use the Phone preview icon and use the device picker to preview the case by using other simulated mobile devices.


Available in the following missions:

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