RAP - UI Annotations (Part 2)
Let's look again at the structure of the UI annotations for the complex entity and what we can influence with them.
Table of contents
If you want to learn more about the UI annotations, just take a look at the first part of the series, where we explain the structure of the images in detail. In this article you can expect the delta to the complex entity and what you can actually do with the annotations.
Introduction
How should you build your UI annotations to deal with complex entities and RAP objects? We will focus on the structure of the list report, which consists of a list and an object page. The list shows the individual entries, mostly with a reduced amount of information. The details page prepares the information and makes it available to the user in a more engaging way.
Metadata
In the first step, let's create the metadata for the two entities, and we'll move them back to the metadata extension files. The calculations now look like this:
@Metadata.layer: #CUSTOMER
@UI: {
headerInfo: {
typeName: 'Invoice',
typeNamePlural: 'Invoices',
title: { value: 'Document' },
description: { label: '(Description)' },
typeImageUrl: 'sap-icon://my-sales-order'
}
}
annotate entity ZBS_C_RAPCInvoice with
{
@UI.facet : [
{
id : 'FacetControlHeader',
label : 'Header',
type : #FIELDGROUP_REFERENCE,
purpose : #HEADER,
targetQualifier: 'CONTROL_HEADER'
},
{
id : 'FacetFieldArea',
label : 'Information',
type : #FIELDGROUP_REFERENCE,
purpose : #STANDARD,
targetQualifier: 'FIELD_AREA'
},
{
id : 'controlSection',
type : #LINEITEM_REFERENCE,
position : 20,
targetElement: '_Position'
}
]
@UI : {
selectionField : [ { position: 10 } ],
lineItem : [{ position: 10 }]
}
Document;
@UI : {
lineItem : [{ position: 20 }],
fieldGroup : [{ position: 20, qualifier: 'FIELD_AREA', label: 'Date' }]
}
DocDate;
@UI : {
lineItem : [{ position: 30 }],
fieldGroup : [{ position: 30, qualifier: 'FIELD_AREA', label: 'Time' }]
}
DocTime;
@UI : {
selectionField : [ { position: 20 } ],
lineItem : [{ position: 40 }],
fieldGroup : [{ position: 40, qualifier: 'CONTROL_HEADER', label: 'Partner' }]
}
Partner;
}
We also create the extension for the positions. The first thing you notice here is that there are no selection fields. These are not supported in the detail screen.
@Metadata.layer: #CUSTOMER
@UI: {
headerInfo: {
typeName: 'Position',
typeNamePlural: 'Positions',
title: { value: 'PositionNumber' },
description: { value: 'Material' }
}
}
annotate entity ZBS_C_RAPCPosition with
{
@UI.facet : [
{
id : 'FacetMaterialGroup',
label : 'Material',
type : #FIELDGROUP_REFERENCE,
targetQualifier: 'MATERIAL_AREA'
},
{
id : 'FacetPriceGroup',
label : 'Information',
type : #FIELDGROUP_REFERENCE,
targetQualifier: 'PRICE_AREA'
}
]
@UI.hidden: true
Document;
@UI : {
lineItem : [{ position: 10 }]
}
PositionNumber;
@UI : {
lineItem : [{ position: 20 }]
}
Material;
@UI : {
lineItem : [{ position: 30 }],
fieldGroup : [{ position: 30, qualifier: 'MATERIAL_AREA', label: 'Quantity' }]
}
Quantity;
@UI : {
lineItem : [{ position: 40 }],
fieldGroup : [{ position: 40, qualifier: 'MATERIAL_AREA', label: 'Unit' }]
}
Unit;
@UI : {
fieldGroup : [{ position: 50, qualifier: 'PRICE_AREA', label: 'Price' }]
}
Price;
@UI : {
fieldGroup : [{ position: 60, qualifier: 'PRICE_AREA', label: 'Currency' }]
}
Currency;
}
Hint: The second entity can then be integrated into the detail screen via the LINEITEM_REFERENCE. A list similar to the initial screen is displayed.
Explanation
The following explanation for this, in order to take a look at the annotations in detail. First of all, the entry list of the app (top right) and the detailed list (bottom right):
Then the list of the second entity in the detail screen of the invoices (top right) and the corresponding detail page of the items:
In this example we also worked with the HEADERINFO to show information in the header area. Keys are usually used here, which you usually cannot edit anyway.
Change mode
If you activate the change mode in the detail screen of the invoices, all changeable fields of the entity are switched to input. With newer Fiori Elements versions, however, the fields of the sub-entities are also put into edit mode, so you can edit all information at once.
Fiori Elements Showcase App
At the end of last year, SAP released a showcase app for RAP and CAP, so you can easily see and test all current functions of Fiori Elements. The app is supplemented with the latest features of the frameworks and is therefore up to date. You can find out more about the installation, the documentation and the functions in the blog in the reference.
You can find the individual features using the tag (#EXAMPLE) in the documentation, but also in the source code. So you can see how the feature was implemented and how you can use it sensibly.
Conclusion
UI annotations are a very easy way to give applications a look and function. With Fiori Elements, the development of standardized Fiori applications is accelerated many times over and saves a pure Fiori developer. As an ABAP developer, you are very well positioned with Fiori Elements. You can find the latest version of the app in our repository.
