Skip to main content

Designing a mobile app experience

Archived

4 Tasks

15 mins

Visible to: All users
Beginner Pega Platform 8.6 Mobile 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. Click here to continue your progress in 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.  

Challenge Walkthrough

Detailed Tasks

1 Configure navigation for the app menu

  1. In the navigation pane of App Studio, click Channels to access the multi-channel configuration. 
  2. In the Current channel interfaces section, click User Mobile App to begin working on the mobile application.
    UserChannel
  3. Click Enable it to activate the Mobile Authentication Service.
    The Mobile Authentication Service ribbon.
  4. In the Navigation section, to the right of Create, click the Gear icon to configure the settings for navigation icon.
  5. In the Name field, enter Create case.
  6. Confirm the Assistance Request check box is selected and click Submit to close the dialog box.
    SectionSelection
  7. In the Navigation section, click Add > Mobile list pages to display a list of menu options.
  8. In the options under the Mobile list pages category, click Assistance Request list to add it to the interface.
  9. In the Navigation section, drag the handle icons to reflect the following order: Assistance Request list, Create case, Notifications, Log off. 
  10. In the Navigation section, click the Delete icon in the remaining item rows so that the Navigation section resembles the following image.
    navmenu05
  11. In the mobile app preview, confirm that the bottom navigation has only four options. 
    navmenu06

2 Add actions for the Assistance Request cases

  1. On the Content tab, click List pages, and then Assistance Request list to access the Assistance Request list page settings.
  2. 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.
    FollowAction
  3. In the Left side actions section, click Add, and then Identify location to add the swipe action.
  4. To the right of Identify location, click the Gear icon to open the Edit settings dialog box.
  5. In the Edit settings dialog box, click Change to access the Icon class picker window.
  6. In the Icon class picker window, in the Search field, enter pi-location.
  7. In the Icon class picker window, select the pi-location icon, and then click Submit to close the Edit settings dialog box.

 

3 Configure app name, description, and security

  1. On the mobile channel page, select the Configuration tab and click the General category.
  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 role list, select Author to grant access to the Author role for this channel. 
  5. In the left menu navigation, select the Security category.
  6. In the Authentication and Security settings section, enter 3 as the time-out value in the Lock app after x minutes of inactivity field.

4 Customize the app branding

  1. On the Layout tab, click the Branding category to configure branding options. 
  2. Hover your pointer over the Launch screen area to display a Change box.
  3. Click Change to open the Launch screen window.
    ChangeIcon
  4. In the Launch screen window, 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.
    ChangeIcon2
  6. Click Generate to add the icon to the Roadside assist app.
  7. Repeat steps 2-6 to change the App icon. 
  8. Click the Theme category to configure your mobile app's theme.
  9. In the Mobile specific colors section, click the swatch to the right of Mobile bottom navigation.
    Roadside assist mobile app Theme
  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.
  13. In the mobile app preview, confirm your color changes.
  14. In the main App Studio window, click Save to save your changes.
    Mobile Assist mobile app preview

Confirm your work

  1. Install Pega Mobile Preview from your device-specific app store (App Store for iOS or Google Play for Android). 
  2. In your web browser, in the upper right, click the Pega icon to generate your QR code. 
    5-1mobilePreview
  3. Open Pega Mobile Preview and scan the QR code to preview your app.
     
    Note: You can further check your work by opening the app and confirming that the preview on the device matches the preview in the channel.


Available in the following mission:

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