Show TOC

Object Page HeaderLocate this document in the navigation structure

The ObjectPageHeader control consists of several parts. Some parts remain visible and scroll with the content.

Header Structure

The ObjectPageHeader control consists of three main parts. These are dispalyed in the following screenshot:

  1. The Navigation Bar (navigationBar)- Contains the top-most element and a “Back” button to return to the previous selection.

  2. The Header Title (headerTitle) - Contains the title and most prominent details of the object in the page and scrolls down with the content.

  3. The Header Content (headerContent) - Contains all the additional information of the object.

The headerTitle and headerContent are described in the sections below.

Header Title
This part of the header contains the basic object information. It always remains visible and scrolls along with the content of the page. The following properties can be set for the headerTitle:

  • objectTitle: The title of the object

  • objectSubtitle: The description of the object

  • objectImageURI: The location of the image that is displayed for the object

  • objectImageShape: The shape in which to display the image: Square or Circle

  • isObjectIconAlwaysVisible: Indicates if the image remains visible at all times

  • headerDesign: The visual style for the Header: Light or Dark

If the ObjectPageHeader control contains actions, those will have to be declared as sap.uxap.ObjectPageHeaderActionButton.

Tip

Using a custom headerTitle

You can extend the ObjectPageHeader class and then use any control in the headerTitle aggregation to build your custom header in there. The ObjectPageLayout however needs correct values for the objectImageURI / objectImageShape and headerDesign, as those properties are important for the headerContent in order to style it properly.

Header Content
The second part of the ObjectPageHeader control is the headerContent. This is an aggregation of controls that are displayed in a float layout underneath the headerTitle. The controls that can be used in the headerContent are the standard SAPUI5 controls and they will be automatically styled to fit the current header style. The following properties can be set for the elements in the headerContent:

  • visibleS: Indicates if the control should be visible in small-sized layouts

  • visibleM: Indicates if the control should be visible in medium-sized layouts

  • visibleL: Indicates if the control should be visible in large-sized layouts

  • showSeparatorAfter: Indicates if a separator should be added after this control

  • showSeparatorBefore: Indicates if a separator should be added before this control