Adding Header Facet to the object page in a List Report & Object Page
in the last post Fiori Elements- Adding Reference Facet we added few reference facet under the collection facet in the object page of a list report & Object Page. In this post will extend the same app by adding title, description and a header facet in the object page header.
The CDS view with annotation loos like as shown below-
@AbapCatalog.sqlViewName: ‘ZZ_V_DEMO_SPFLI’
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: ‘Flight Information’
@UI.headerInfo: {typeName: ‘Flight’, typeNamePlural: ‘Flights’ }
@OData.publish: true
define view ZZ_DEMO_SPFLI as select from spfli
{
//spfli
@UI: {
lineItem: [{ position: 10, label: ‘Carrier Name’}],
identification: [{position: 10, label: ‘Carrier Name’}]
}
key carrid,
@UI: {
lineItem: [{ position: 20, label: ‘Connection’}],
identification: [{position: 20, label: ‘Connection’}]
}
key connid,
@UI: {
lineItem: [{ position: 30, label: ‘Strat Country’}],
fieldGroup: [{ qualifier: ‘Coun’, position: 10, label: ‘Strat Country’ }]
}
countryfr,
@UI: {
lineItem: [{ position: 40, label: ‘Arriving Country’}],
fieldGroup: [{ qualifier: ‘Coun’, position: 20, label: ‘Arriving Country’ }]
}
countryto,
@UI: {
lineItem: [{ position: 50, label: ‘Start City’}],
fieldGroup: [{ qualifier: ‘City’, position: 10 }]
}
cityfrom,
@UI: {
lineItem: [{ position: 60, label: ‘Arriving City’}],
fieldGroup: [{ qualifier: ‘City’, position: 20 }]
}
cityto,
@UI: {
lineItem: [{ position: 70, label: ‘Start Airport’}],
fieldGroup: [{ qualifier: ‘Airp’, position: 10 }]
}
airpfrom,
@UI: {
lineItem: [{ position: 80, label: ‘Arriving Airport’}],
fieldGroup: [{ qualifier: ‘Airp’, position: 20 }]
}
airpto
}
Run the app and we have the list as shown below. Select a line.
The object page looks as below. Here in the object page header will add the title,description.
Let’s add a association to SCARR as we want to show the CARRNAME as the object page title.
Add the association field CARRNAME to the view select element and then in the HEADERINFO add the title and description. Save and activate the cds view.
@AbapCatalog.sqlViewName: ‘ZZ_V_DEMO_SPFLI’
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: ‘Flight Information’
@UI.headerInfo: {typeName: ‘Flight’, typeNamePlural: ‘Flights’,
title: { value: ‘carrname’}, description: { value: ‘connid’ } }
@OData.publish: true
define view ZZ_DEMO_SPFLI
as select from spfli
association [1..1] to scarr as _scarr on $projection.carrid = _scarr.carrid
{
//spfli
@UI: {
lineItem: [{ position: 10, label: ‘Carrier Name’}],
identification: [{position: 10, label: ‘Carrier Name’}]
}
key carrid,
@UI: {
lineItem: [{ position: 20, label: ‘Connection’}],
identification: [{position: 20, label: ‘Connection’}]
}
key connid,
_scarr.carrname as carrname,
@UI: {
lineItem: [{ position: 30, label: ‘Strat Country’}],
fieldGroup: [{ qualifier: ‘Coun’, position: 10, label: ‘Strat Country’ }]
}
countryfr,
@UI: {
lineItem: [{ position: 40, label: ‘Arriving Country’}],
fieldGroup: [{ qualifier: ‘Coun’, position: 20, label: ‘Arriving Country’ }]
}
countryto,
@UI: {
lineItem: [{ position: 50, label: ‘Start City’}],
fieldGroup: [{ qualifier: ‘City’, position: 10 }]
}
cityfrom,
@UI: {
lineItem: [{ position: 60, label: ‘Arriving City’}],
fieldGroup: [{ qualifier: ‘City’, position: 20 }]
}
cityto,
@UI: {
lineItem: [{ position: 70, label: ‘Start Airport’}],
fieldGroup: [{ qualifier: ‘Airp’, position: 10 }]
}
airpfrom,
@UI: {
lineItem: [{ position: 80, label: ‘Arriving Airport’}],
fieldGroup: [{ qualifier: ‘Airp’, position: 20 }]
}
airpto
}
Run the app again and select a line from list and see the object page.
The title and description appears in the object page header section.
Let’s add a HeaderFacet to the object page header.
Let’s add two more fields to the cds view and assign a field group “Time”
CDS View Data Preview- Looks good we have all field values.
Run the app and select a line.
Upto now we have just created a field group in the CDS view and it is not added to the UI- header facet.
Open the annotation file in the web ide of the project. Press the + against the Local Annotations.
Select the Header Facet.
Now let’s add a reference facet under the header facet. Press the + button.
Select a reference facet.
Assign a field group to the Target of the reference facet.
Finally Save the file and run the app again.
Select a line from the list report.
Now we have finally added the Title,Description and a Header Facet that points to a field group.
SAPCODES 
One comment