Header

Last modified: August 20, 2024

Introduction

A header combines the functionality of a page title and a control bar for your page. Due to its compact design and versatility it is often used in mobile pages. A header can only be used in a layout.

Headers consist of three distinct elements: a page title and a left and right drop-zone. The page title is indicated by the text [Page title]. The drop-zones cannot be seen by default, but they can be selected and also become visible when they have elements dropped into them.

For example, the following header has the right drop-zone selected and the user is dropping a button into the left drop-zone.

The drop-zones are intended for confirmation buttons, such as an action button for creating a new object, but can easily be appropriated for any number of alternate implementations.

The page title placeholder is replaced by the page title setting of the page being displayed.

For example, the image below shows an edit page derived from a layout with a header. The page title is automatically set to that of the page and the drop-zones have been used to add a save and cancel button, replacing the need to add a control bar to the data view.

Properties

An example of header properties is represented in the image below:

Header properties consist of the following sections:

Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

Design Properties Section

The Design Properties allow you to change spacing and alignment of the widget and hide it on phone, tablet, or desktop, if needed. Design properties may vary depending on the type of the widget. For example, for the text widget you can change its font weight, color, alignment, and letter case.