Page Header

Get information about what UI annotations to use to work with page headers of object-page floorplans for SAP Fiori UIs.

The page header contains information on the object you are editing in the object-page floorplan, for example.

Figure 1: Example of @UI.headerInfo for page header of object-page floorplan

You can use the following UI annotations to use several properties to influence the header section of the object-page floorplan:

@UI.headerInfo

Sample Code

@UI.headerInfo: { 
  typeName: 'Sales Order',
  title: {
    label: 'Sales Order',
    value: 'SalesOrder'	-- Reference to element in element list
  },
  description: {
    label: 'Customer',
    value: 'CompanyName'	-- Reference to element in element list
  }
}

define view ZExample_SalesOrder as select from sepm_cds_sales_order as so {
  key so.sales_order_id as SalesOrder,
  so.customer.company_name as CompanyName,
  ...
}

@UI.badge

This UI annotation can be considered as the combination of the UI annotations @UI.headerInfo and @UI.identification. The properties imageUrl, typeImageUrl and title should usually correspond to the properties of the UI annotation @UI.headerInfo. In addition to the title, a headLine, mainInfo and secondaryInfo of the same format can be specified.

Sample Code

@UI.badge: { 
    title: {
        label: 'Sales Order',
        value: 'SalesOrderID'	-- Reference to element in element list
    },
    headLine: {
        label: 'Customer',
        value: 'CompanyName'	-- Reference to element in element list
    },
    mainInfo: {
        label: 'Gross Amount',
        value: 'GrossAmount'	-- Reference to element in element list
    },
    secondaryInfo: {
        label: 'Billing Status',
        value: 'BillingStatus'	-- Reference to element in element list
    }
}

define view ZExample_SalesOrder as select from sepm_cds_sales_order as so {
  key so.sales_order_id as SalesOrder,
  so.customer.company_name as CompanyName,
  so.gross_amount as GrossAmount,
  so.billing_status as BillingStatus,
  ...
}

@UI.statusInfo
This UI annotation can be used to display status information of an entity on the UI, for example the delivery status or payment status of an entity. This annotation is similar to the @UI.lineItem annotation. However, the @UI.statusInfo annotation is usually used together with the criticality property instead of the qualifier property.
Sample Code
```
...
define view ZExample_SalesOrder as select from sepm_cds_sales_order as so {
  key so.sales_order_id as SalesOrder,

  @UI.statusInfo: [ { position: 10 } ]
  so.delivery_status as DeliveryStatus,

  @UI.statusInfo: [ { position: 20 } ]
  so.billing_status as BillingStatus,

  @UI.statusInfo: [ { position: 30 } ]
  so.lifecycle_status as LifecycleStatus,
  ...
}
```