Customize Page Headers

All pages in your app include a page header, separated from page content by a visual stripe, that provides users with page-specific information. This default header is defined by the page-header fragment and can be customized to suit your requirements.

  1. Open your page, then select the area above the horizontal stripe on the page canvas. Alternatively, select page-header in Structure view.
    Description of page-header.png follows
    Description of the illustration page-header.png

  2. In the page-header fragment's Properties pane, use the title property under Input Parameters to set a page title. You can also remove the title text. By default, the page's flow name is used as the title.
  3. Optional: To add page-specific actions, add components of your choice to the Actions slot. For example, you might add a Button Set to the fragment slot and configure it to display some options.

    To do this, simply drag the Button Set (One) component from the Components palette onto the page-header fragment on the canvas, onto Template (actions) in Structure view, or onto Actions in the fragment's Properties pane.

    Alternatively, hover over Actions in the fragment's Properties pane, click the Insert Component icon (Insert Component icon), and select a component.
    Description of page-header-insertcomponent.png follows
    Description of the illustration page-header-insertcomponent.png

    Here's an example of a page with some page-specific actions in the page header:
    Description of page-header-example.png follows
    Description of the illustration page-header-example.png