Skip to main content

Designing a mobile app experience

4 Tasks

15 mins

Visible to: All users
Beginner
Pega Platform '23
Mobile
English
Verify the version tags to ensure you are consuming the intended content or, complete the latest version.

Scenario

GoGoRoad wants to allow customers to create an assistance request Case from their mobile device. Customize the User mobile app Channel to design a mobile app experience that lets customers: 

  • Create an assistance request Case
  • Check any Notifications sent to the customer
  • Update details on an assistance request Case
  • Update the location for an assistance request Case
  • Log off

In addition, customize the app branding, including the launch screen and app icon, and configure the app to lock after three minutes of inactivity. 

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 a List page for Assistance Requests

  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 App Studio, click Channels to access the multi-Channel configuration.
  3. In the Current Channel interfaces section, click User Mobile App to begin working on the mobile application.
    User Mobile App channel
  4. On the Content tab, click List pages to display the list pages.
  5. To the right of List pages, click Add.
  6. In the Page name field, enter My Requests.
  7. In the Case Type list, select Assistance Request.
  8. In the Data Page list, select Assistance Request List.
    My Requests list page details
  9. In the Swipe Actions area, in the Left side Actions section, to the right of Follow, click the Delete icon to remove the swipe Action.
    Delete the Follow action
  10. In the Left side Actions section, click Add, and then Identify location to add the swipe Action.
    Note: Starting with version 8.7 of Pega PlatformTM, left and right side Action options are configured as Case-wide optional Actions in the Case designer. For more information, see Authoring mobile list pages.
  11. To the right of Identify location, click the Gear icon to open the Edit Action dialog box.
  12. In the Edit Action dialog box, click Change to access the Icon class picker window.
  13. In the Icon class picker window, in the Search field, enter pi-location.
  14. In the Icon class picker window, select the pi-location icon, and then click Submit.
  15. In the Mobile interface page header, click Save.

2 Configure navigation for the app menu

  1. To the left of List pages, click the Back arrow, and confirm that Navigation is selected.
    Back arrow to the left of List pages
  2. To the right of the Create Action, click Edit configuration
    Edit Case action in the mobile app navigation
  3. In the Action Name field, enter Create Case.
  4. In the Case Types section, clear the New vendor check box so that only Assistance Request is selected, and then click Submit.
  5. In the Navigation section, click Add > List pages > My Requests to add a new page to the navigation menu.
  6. In the Navigation section, drag the handle icons to reflect the following order: My Requests, Create Case, Notifications, Log off. 
  7. In the Navigation section, click the Delete icon in the remaining item rows so that the Navigation section resembles the following image.
    Mobile channel navigation

3 Configure app name, description, and security

  1. On the Mobile interface page, click the Configuration tab, and ensure General is selected.
  2. In the Mobile app name field, enter Roadside Assist to rename your mobile app. 
  3. In the Description field, enter Help is never far away with Roadside Assist!.  
  4. In the Select Persona list, select User to grant access to the User Persona for this Channel. 
    Roadside assist mobile channel general configuration
  5. In the left menu navigation, click Security.
  6. In the Authentication and Security section, enter 3 as the time-out value in the Lock app after x minutes of inactivity field.
    Roadside assist mobile app channel Security tab

4 Customize the app branding

  1. On the Mobile interface page, click the Layout tab, and ensure Branding is selected. 
  2. Hover your pointer over the Launch screen area to display a Change button.
  3. Click Change to open the Edit launch screen dialog box.
    Launch screen Change button
  4. In the Edit launch screen dialog box, click the Icon tab to select a launch screen icon. 
  5. In the Select icon area, click the Gauge icon to select it as your launch screen icon.
  6. Click Generate to add the icon to the Roadside Assist app.
    Gauge icon
  7. Repeat steps 2-6 to change the App icon. 
  8. Click the Theme tab to configure your mobile app's theme.
  9. In the Mobile specific colors section, click the swatch to the right of Mobile bottom navigation.
  10. In the color swatch window, select white, or enter the Hex value FFFFFF.
  11. Click Save to make your selection and dismiss the color swatch window.
  12. Repeat steps 9-11 to change the color for Secondary swipe Action and Primary button to dark green, or enter the Hex value 064F2E.
    Highlighting the updated colors for the Mobile application.
  13. Repeat steps 9-11 to change the color for Footer text & icon to blue, or enter the Hex value 006BBD.
  14. In the Mobile interface page header, click Save to save your changes.

Confirm your work

  1. In the mobile app Preview, confirm that the bottom navigation has only four options and that the colors match the theme changes you made.
    User Mobile App preview with the theme updated

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


Available in the following mission:

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

Did you find this content helpful?

Want to help us improve this content?

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