Configuring a harness for the native header

Create a harness that defines the appearance of the mobile app page. By using a harness layout that supports a mobile header, you build a user interface container where you can reference the template with the native mobile header. The native header provides the users with a responsive interface that is consistent across native apps and different devices.
Before you begin: Open the mobile channel interface page and enable the native header in your app. For more information, see Enabling the native header in a mobile app.
  1. On the Layout tab, in the Layout section, hover over the Mobile - Slide Up application layout, and then click Configure.
  2. In the Configure layout dialog box, select the navigation rule that you want to modify, and then click the Open icon.
  3. If you selected a default Pega Platform rule in step 2, create a new instance of the navigation rule:
    1. Expand the Save as menu, and then click Save as.
    2. In the Save as navigation form, specify the label, class, and ruleset for the navigation rule, and then click Create and open.
  4. On the navigation rule form, on the Editor tab, select the Validate for mobile bottom menu usage check box.
    To validate your navigation rule for bottom bar usage, Pega Platform checks whether the nodes in your form meet the following requirements when you save the form:
    • The Type of your node is Item.
    • The Image source of your node is Icon class.
    • Each node has at least one configured action. For more information about available actions, see Configuring the bottom bar.
  • Add a page with a harness that contains the native header to the bottom bar of your app:
    1. In the navigation rule editor, select a node, and then add another node to the list by clicking one of the following options:
      • Add above
      • Add below
    2. Configure the new node to display a new page when the user taps the appropriate button on the bottom bar of the mobile app:
      1. On the General tab, in the Label field, enter the page name that you want to display on the bottom bar.
        Note: The labels appear in the app only if you keep the default option, Icons with text, as the bottom menu style in the layout of your mobile channel interface.
      2. In the Image source list, select Icon class, and then enter the name of the page icon that you want to display on the bottom bar.
        For example: Enter pi pi-user for a page that shows your user profile.
      3. On the Actions tab, click Add an action > All actions, and then, in the Launch category, click Harness.
      4. In the Target list, select New document.
      5. In the Tab name field, enter an identifier for the tab.
      6. In the Harness field, create a harness for the new page by clicking the Open icon.
  • Configure the harness to support the native header for your page:
    1. On the Create harness form, specify the label, and then click Create and open.
      To ensure that Pega Platform validates the navigation rule to work in your app, the Apply to and Add to ruleset fields are populated with the class and ruleset of the navigation rule.
    2. On the Design tab, select the screen layout, and then click the View properties icon.
    3. In the Screen layout properties window, on the General tab, select Header, and then click Submit.
    4. Expand the Structural list, and then drag Embedded section onto the upper area of the screen layout.
      The upper area of the screen layout is the placeholder where you add elements that constitute the header of the page in the mobile app.
    5. Configure the design template with the native header:
      1. In the Section include dialog box, in the Section field, click the Open icon.
      2. Configure a section with the Mobile page header with left and right action design template. For more information, see Configuring the template for the native header.
    6. In your harness rule form, in the Section include dialog box, in the Section field, enter the name of the section that you created, and then click Submit.
    7. On the Advanced tab, in the Harness usage section, select the Work area check box.
    8. 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 customized greetings message and a Pulse gadget that is referenced as an embedded section.
    9. Click Save.
    10. On the navigation rule form, in the Harness field, enter the name of the harness that you created, and then click OK.
    11. Click Save.
  • Save the layout configuration of your mobile app:
    1. In the mobile channel interface, in the Configure layout dialog box, select the navigation rule that you configured, and then click OK.
      Note: If you created a new instance of the navigation rule in step 3, reopen the mobile channel interface to refresh the list of navigation rules that you can use in the bottom bar of your app.
    2. Click Save.
    Result: At run time, your mobile app now displays the page that you added on the bottom bar. When the users tap the icon of the new page, the app displays the content that you configured. The new page has the native header with a custom title, a native search button as the right action, and a back navigation arrow as the left action.