Hello Dear ABAP Developers if you are looking for New Learning about SAP ABAP then here you will get the details about how you can use facets in cds fiori app development which we use most of the time to develop the apps. Facets are most commonly used in cds views to show the data properly on the fiori app.
In this post, I have shared my findings on how to create facets and the basic
annotations needed to achieve it. The application used for demonstration is a basic Sales
Order app with Sales order items.
Fiori App Development Using Managed and Unmanaged using Annotation
There is a lot more to this topic which you can find on the below link.
https://help.sap.com/viewer/cc0c305d2fab47bd808adcad3ca7ee9d/7.52.2/en-US
FINAL OUTPUT
Object Detail Screen
Involved Data Definitions and Metadata extensions
| OBJECT NAME | DESCRIPTION |
| ZC_DEMO_SALESORD_PV | Sales order consumption view |
| ZC_DEMO_SALESORD_PV | Sales order Metadata extension |
| ZC_DEMO_SALESORD_ITEM_PV | Sales order item consumption view |
| ZC_DEMO_SALESORD_ITEM_PV | Sales order item Metadata extension |
Code Snippet
ZC_DEMO_SALESORD_PV – Sales order consumption view
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Consumption view for sales orders'
@Metadata.allowExtensions: true // To allow
metadata extension file to be created
define root view entity zc_demo_salesord_pv
as projection on zr_demo_salesord_pv
{
key so_key as SalesOrderKey,
id as SalesOrderExternalId,
lifecycle_status as LifecycleStatus,
buyer_id as BuyerId,
_Buyer.family_name as BuyerDescription,
created_by as CreatedBy,
last_changed_by as LastChangedBy,
@ObjectModel.virtualElementCalculatedBy:
'ABAP:CL_DEMO_SALES_VIRT_ELEM_EXIT'
virtual ValidToDate : abap.dats(8),
_Items : redirected to composition child
zc_demo_salesord_item_pv,
_Items[*:posnr <= 3] as _TopItems : redirected to
zc_demo_salesord_item_pv
}ZC_DEMO_SALESORD_PV – Sales order Metadata extension
@Metadata.layer: #CUSTOMER // Has the highest priority
@Search.searchable: true // To bring a search box on the
screen
@UI.headerInfo:
{
typeName: 'Sales Order Demo', // Title of the Object Page
title: { value: 'SalesOrderExternalId' } // Represents the title of an
item header
}
annotate view zc_demo_salesord_pv with
{
@UI.facet: [{
id: 'idHead', // Facet id
purpose: #HEADER, // To be displayed on the
Header
type: #IDENTIFICATION_REFERENCE, // Facet type: Identification
targetQualifier: 'QHead', // All the fields that needs to
be displayed in this facet would have to use the specified qualifier in
"Qualifier" annotation
label: 'Header Facet'
},
{
id: 'idCollection',
position: 10,
purpose: #STANDARD,
type: #COLLECTION, // Collection of facets
label: 'Collection Facet'
},
{
id: 'idFieldgroup1',
position: 10,
label: 'FieldGroup 1 Facet',
type: #FIELDGROUP_REFERENCE, // Used when elements are to
be grouped
targetQualifier: 'QFieldGroup1',
parentId: 'idCollection' // To group this facet in
higher "Collection" facet
},
{
id: 'idFieldgroup2',
position: 20,
label: 'FieldGroup 2 Facet',
type: #FIELDGROUP_REFERENCE,
targetQualifier: 'QFieldGroup2',
parentId: 'idCollection' // To group this facet in
higher "Collection" facet
},
{
id: 'idIdentification',
position: 30,
label: 'Identification Ref Facet',
type: #IDENTIFICATION_REFERENCE, // Displays all the elements
used with annotation @UI.identification
purpose: #STANDARD
},
{
id: 'idItem',
position: 50,
label: 'Lineitem Ref facet',
purpose: #STANDARD,
type: #LINEITEM_REFERENCE, // Used to display the
associated entity sets
targetElement: '_Items' // Association to be provided
here
}
]
@Search.defaultSearchElement: true // This element is searchable
in the search box
@UI.selectionField: [{ position: 20 }] // A separate selection field
is available on the screen
@EndUserText.label: 'Sales Order' // To override the DB Field
label
@UI.lineItem: [{ position: 10 }] // To display the element in
the search hit list/table
@UI.identification: [{ position: 10, qualifier: 'QHead' }] // To position the
field on the Identification facet "idHead"
SalesOrderExternalId;
@EndUserText.label: 'Lifecycle status'
@UI.lineItem: [{ position: 20 }]
@UI.fieldGroup: [{ position: 10, qualifier: 'QFieldGroup1' }]
LifecycleStatus;
@EndUserText.label: 'Buyer ID'
@UI.lineItem: [{ position: 30 }]
@UI.fieldGroup: [{ position: 10, qualifier: 'QFieldGroup2' }]
BuyerId;
@EndUserText.label: 'Created By'
@Search.defaultSearchElement: true // This element is searchable
in the search box
@UI.identification: [{ position: 10 }]
@UI.lineItem: [{ position: 40 }]
CreatedBy;
}ZC_DEMO_SALESORD_ITEM_PV – Sales order item consumption view
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Consumption view for sales order items'
@Metadata.allowExtensions: true
define view entity zc_demo_salesord_item_pv
as projection on zr_demo_salesord_item_pv
{
key so_item_key as SalesOrderItemKey,
parent_key as SalesOrderKey,
posnr as PositionNumber,
@ObjectModel.text.element: ['MaterialName']
material as MaterialId,
_Material._Text.material_name as MaterialName : localized,
@Semantics.amount.currencyCode: 'Currency'
gross_amount as GrossAmount,
currency as Currency,
@Semantics.quantity.unitOfMeasure: 'Unit'
quantity as Quantity,
unit as Unit,
_SalesOrder :
redirected to parent zc_demo_salesord_pv,
_SalesOrder.buyer_id as BuyerID
}ZC_DEMO_SALESORD_ITEM_PV – Sales order item Metadata extension
@Metadata.layer: #CUSTOMER
annotate view zc_demo_salesord_item_pv
with
{
@UI.lineItem: [{ position: 10 }]
SalesOrderItemKey;
@UI.lineItem: [{ position: 30 }]
@EndUserText.label: 'Item no.'
PositionNumber;
@UI.lineItem: [{ position: 40 }]
MaterialId;
@UI.lineItem: [{ position: 60 }]
GrossAmount;
@UI.lineItem: [{ position: 80 }]
Quantity;
}
Annotation and its functionality
@Metadata.allowextensions: true
This annotation is used to allow creation of a Metadata extension file.
This new Metadata extension file not only helps us keep the CDS and the annotations in separate
files, but also helps us add annotations to standard CDS views if we wish to extend it.
@Search.searchable : true
This annotation adds a search box to the selection screen.
Note: When this annotation is used, at least one element must be set as default search element
using the annotation @Search.defaultSearchElement: true. There can be many elements marked as
default search elements, but the performance of the search gets impacted by the number of
elements you add to the default search list.
In the example, I have added the below two elements to the default search list.
- SalesOrderExternalId;
- CreatedBy;
Hence, values of these two fields could be searched from here.
Total entries
Search on Sales Order number
Search on Created By
@UI.selectionField
This annotation also helps you to filter the data, but unlike the generic search,
here the filter is only on a specific field. Also, we get a variety of options
while searching.
In our example, this annotation is used for the below field:
- SalesOrderExternalId;
@UI.lineitem
This annotation is used to display elements in a tabular/list manner.
In our example, we have used this annotation for many elements. Some are
mentioned below:
- SalesOrderExternalId;
- LifecycleStatus;
- BuyerId;
Position is provided to the elements to define the order of the elements in the
list. The value of position can be any integer value, the list is displayed in
ascending order.
@UI.headerinfo
Its an optional annotation used to describe the entity displayed. Eg. The
name, description etc.
@UI.facet
This annotation is used to define the facets. Facets are like tabs, used to
display an element group.
There are many types of facets.
Before we look into the types of facets, lets look at purpose of facets.
In our example, I have used 2 purposes:
- Header – To display the facet on the header.
- Standard – To display on the detail area.
Continuing to types of facets.
In our example, I have used 4 types of facets:
- IDENTIFICATION_REFERENCE
This facet groups all the elements annotated by @UI.identification.
Because the purpose of this facet is Header, it is displayed on the header level.
For the elements to be displayed in this facet, the below annotation is needed:
@UI.identification: [{ qualifier: ‘QHead’ }]
Eg. SalesOrderExternalId;
Note: The element and the facet are bound together by “Qualifier and TargetQualifier”
values.
Facet “Identification Ref Facet” is also an example of IDENTIFICATION_REFERENCE, the only
difference is that the purpose is STANDARD. In this case, you do not need to provide a
Qualifier.
FIELDGROUP_REFERENCE
This facet would group the elements with annotation @UI.FIELDGROUP. The element and
the facets would be bound by “Qualifier and TargetQualifier” values.
For the fields to be grouped in the above facet, the below annotation is needed.
@UI.fieldGroup: [{ qualifier: ‘QFieldGroup1’ }]
For the fields to be grouped in the above facet, the below annotation is needed.
@UI.fieldGroup: [{ qualifier: ‘QFieldGroup2’ }]
The above two facets look different because they have been grouped into a higher facet
“COLLECTION”. To display these facets independently, you must remove the PARENTID
annotation. Below is the result if I take FieldGroup1 facet out of the Collection facet. It gets
its independent tab/facet.
COLLECTION
This facet is used to group multiple facets together. In our example I have grouped two
FIELDGROUP_REFERENCES.
LINEITEM_REFERENCE
This facet is used to display the values of the associations.
Association value is to be provided in TARGETELEMENT annotation.
The list of the associated entity would not be available readily, which is why we need to add
@UI.LINEITEM annotations in the associated entities.
Annotations added in Metadata extension of Sales order items CDS.
1 thought on “CDS FIORI ELEMENTS – FACETS”