Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Enhancing a mobile app with the native header

Updated on April 27, 2022

Standardize the user experience in your mobile apps by adding the native header for a custom mobile page. By using the native header in your app, you provide users with a responsive interface that is consistent across native apps and different devices. For example, users can navigate to the previous view by using the native back button for Android apps or a swipe right gesture for iOS apps.

To create a mobile page with the native header, you must configure three user interface components:
Harness
A container for your mobile page, in which you embed the wrapper section.
Wrapper section
A wrapper container, in which you embed the template-based section and adjust the layout properties to set a custom title for the native header.
Section with a mobile header template
A template-based section with the native header, in which you can configure optional left and right actions.
Attention: Native header configuration is not supported in applications that run on the Constellation service.

    Creating a harness for your page

  1. In the header of Dev Studio, click CreateUser InterfaceHarness.
  2. On the Create harness tab, in the Label field, provide the name for the harness.
  3. In the Context section, define the application, class, and target ruleset for the harness.
    Note: To ensure that you can later add a page with the harness to the navigation of your mobile app, choose the UIPages class of your application, or a class that is in the hierarchy of that class.
  4. Click Create and open.
    Result: A tab with the new harness opens.

    5. Configuring the harness to support the native header for your page

  5. On the Advanced tab, in the Harness usage section, select the Work area checkbox.
  6. On the Design tab, select the screen layout, and then click the View properties icon.
  7. In the Screen layout properties window, on the General tab, select Header, and then click Submit.
    The upper area of a header-type screen layout is a placeholder in which you add the elements that constitute the header of the page in the mobile app.

    8. Creating a wrapper section for the native header

  8. Expand the Structural list, and then drag Embedded section onto the upper area of the screen layout.
  9. In the Section include modal dialog box, in the Section field, click the Open icon.
  10. On the Create section form, specify the label for the wrapper section, and then click Create and open.
    To ensure that the wrapper section works with your harness, the Apply to and Add to ruleset fields automatically include the class and ruleset of the harness.
    Result: A tab with the new wrapper section opens.
  11. In the header of the section editor, click Convert to full section editor, and then confirm the conversion.

    12. Creating and configuring the template-based section for the native header

  12. On the Design tab, expand the Structural list, and then drag Embedded section onto the canvas, below the default dynamic layout.
  13. In the Section include modal dialog box, in the Section field, click the Open icon.
  14. On the Create section form, specify the label for the template-based section, and then click Create and open.
    To ensure that the template-based section works with your harness, the Apply to and Add to ruleset fields automatically include the class and ruleset of the harness..
    Result: A tab with the new template-based section opens.
  15. On the Design tab, in the template elements pane on the right, click Change, and then click the Mobile page header with left and right action design template.
  16. Optional: To add left or right actions to the mobile header, add a Button to the Left actions or Right actions sections of the template elements pane.
    For example, add a native search button as the right action on the native header:
    1. In the Right actions section, click AddActionButton.
    2. Hover over the button, and then click the Edit icon.
    3. On the General tab, clear the Text field.
    4. In the Image source list, select Icon class.
    5. Click the Open the class picker icon to display all available icons.
    6. Search for and select the pi-search icon.
    7. On the Actions tab, click Create an action set.
    8. Click Add an eventClick.
    9. Click Add an actionAll actions, and then, in the Display category, click Mobile search.
    10. Click Submit.
    Note: Native mobile header only supports Button elements as left or right actions. In the action sets for buttons, use only Click events.
  17. On the template-based section rule form, click Save.

    18. Configuring the wrapper section and adding a custom header title

  18. Click the tab with your wrapper section.
  19. In the Section include modal dialog box of the wrapper section, in the Section field, enter the name of the template-based section that you created, and then click Submit.
  20. Select the default dynamic layout, and then press the Delete key to remove it from your canvas.
  21. Select the embedded section, and then click the View properties icon.
  22. In the Layout properties window, in the Container format list, select Other, and then enter Mobile header.
  23. Select the Display header and title checkbox.
  24. In the Container settings section, in the Title list, select Text, and then enter the custom title of your header.
  25. Click Submit.
  26. On the wrapper section rule form, click Save.

    27. Configuring the harness with the native header

  27. Click the tab with your harness.
  28. In the Section include modal dialog box of the harness, in the Section field, enter the name of the wrapper section that you created, and then click Submit.
  29. On the Design tab, configure the main content of your page by adding elements from the palette to the bottom area of the screen layout.
    For example: Add a section with a customized greetings message and a Pulse gadget that is referenced as an embedded section.
  30. On the harness rule form, click ActionsMark as relevant record.
  31. On the harness rule form, click Save.
  32. Add the page with the native mobile header to the navigation of your mobile channel.
    For more information, see Adding items to the menu bar.
Result: At run time, your mobile app now displays the page that you added to the menu bar. When users tap the icon of the new page, the app displays the content that you configured. The new page has the native header with your custom title, a native search button as the right action, and a back navigation arrow as the left action.
  • Previous topic Tracking mobile users based on geolocation data
  • Next topic Localizing mobile apps for international audiences

Tags

Pega Platform 8.7 Mobile

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Visit the Support Center

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.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us