Configuring the template for the native header

Create a section with the design template that renders the native header in your app. Use the template to add a custom header title and custom actions to the native header. For example, add a button on the right side of the header that enables the users of your mobile app to use the native search.

The native header provides the users with a responsive interface that is consistent across native apps and different devices.

Before you begin: Create a harness that references the section that you plan to configure. For more information, see Configuring a harness for the native header.
  1. On the Create section form, specify the label, and then click Create and open.
    To ensure that the section works with the harness that you configured, the Apply to and Add to ruleset fields are populated with the class and ruleset of the harness.
  2. 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.
  3. Optional: To add a custom title and improve the styling of the mobile header, configure the properties of the Subtitle section:
    1. In the Subtitle section of the template elements pane, click the Edit icon.
    2. In the Region properties window, select the Override default region settings check box.
    3. In the Title list, select Text, and then enter the custom title of your header.
    4. In the Container format list, select Other, and then enter Mobile header.
    5. Click Submit.
  4. Optional: To add left and right actions to the mobile header, in the Left actions and Right actions sections of the template elements pane, click the Add icon, and then select an element that you want to use. For example, add a native search button as the right action on the native header:
    1. In the Right actions section, click Add > Action > Button.
    2. Hover over the button, and then click the Edit icon.
    3. On the General tab, in the Image source list, select Icon class.
    4. Click the Open the class picker icon to display all available icons.
    5. Search for and select the pi-search icon.
    6. On the Actions tab, click Create an action set.
    7. Click Add an event > Click.
    8. Click Add an action > All actions, and then, in the Display category, click Mobile search.
    9. Click Submit.
  5. Click Save.
Result: You can now reference the section in the header area of the harness that you want to use to create a new page in your mobile app. The header of the new page renders with a custom title and the right and left actions that you configured in the mobile header design template.
What to do next: Go to step 12 in Configuring a harness for the native header.