Header Facets

You can include various types of header facets in your object page header, for example to display contact data or a rating indicator.

You can use the annotation term UI.HeaderFacets to define which information is displayed in the header. The UI.HeaderFacets annotation contains a collection of UI.ReferenceFacet, with each reference facet, corresponding to a header element displayed on the UI. The following sample code shows such a structure:

Sample Code:

XML Annotation


<Annotation Term="UI.HeaderFacets">
    <Collection>
        ...
        <Record Type="UI.ReferenceFacet">
            <PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Price" />
        </Record>
        ...
        <Record Type="UI.ReferenceFacet">
            <PropertyValue Property="Target" AnnotationPath="to_StockAvailability/@UI.DataPoint#StockAvailability" />
        </Record>
        ...
    </Collection>
</Annotation>

Sample Code:

ABAP CDS Annotation


@UI.Facet: [
    {
        targetQualifier: 'Price',
        type: #DATAPOINT_REFERENCE,
        purpose: #HEADER
    },
    {
        targetQualifier: 'StockAvailability',
        targetElement: 'TO_STOCKAVAILABILITY',
        type: #DATAPOINT_REFERENCE,
        purpose: #HEADER
    }
]Test;

Sample Code:

CAP CDS Annotation

Annotate c_salesordermanage_sd.SalesOrderManage with @(
    UI : {
        HeaderFacets : [
            {
                $Type  : 'UI.ReferenceFacet',
                Label  : 'Price',
                ID     : 'Price',
                Target : '@UI.DataPoint#Price'
            },
            {
                $Type  : 'UI.ReferenceFacet',
                Label  : 'Stock Availability',
                ID     : 'StockAvailability',
                Target : 'to_StockAvailability@UI.DataPoint#StockAvailability'
            }
        ]
    }
)

On desktops, the dynamic or static header is used with the responsive layout.

On mobile devices, a header container is used with the horizontal layout, providing scrolling for header facets.

You can see the object page header facets within a horizontal scroll container.

Stashing

If an application developer has defined header facets as stashed in the manifest.json file, they are initially not visible on the UI. Such header facets are not loaded when the application is started. Key users can add these stashed header facets using the key user adaptation at runtime and make them visible for end users on the object page header.

For more information, see Extending Delivered Apps With Key User Adaptation.