Fiori Element- Adding Header Facet

light111Adding 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- 

1

23


@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.

4

The object page looks as below. Here in the object page header will add the title,description.

5

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.

67


@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.

8


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”

9

CDS View Data Preview- Looks good we have all field values.

10

Run the app and select a line.

11

Upto now we have just created a field group in the CDS view and it is not added to the UI- header facet.

12

Open the annotation file in the web ide of the project.  Press the + against the Local Annotations.

13

Select the Header Facet.

14

Now let’s add a reference facet under the header facet. Press the + button.

15

Select a reference facet.

16

Assign a field group to the Target of the reference facet. 

17

Finally Save the file and run the app again.

18

Select a line from the list report.

19

Now we have finally added the Title,Description and a Header Facet that points to a field group.

20

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s