Some of UI annotations/Local annotations for LROP Fiori application.

January 21, 2023
Sara Sampaio
Technical Articles

This is my first blog on UI annotations/Local annotations.

There two ways we can write annotations.

Using CDS views
Using annotation modler in webide

We can overwrite the annotations coming from backend cds view using annotation modler.

In this blog I am focusing purely on Local annotations for List report object page application which are useful while developing the fiori elements list report object page application. Only some of the annotations I have covered in this blog.

We can utilize annotation modler to overwrite/create new annotations based on our need. This post can give you insights on where the local annotations can show the result on the screen.

Through this post I am writing some of local annotations step by step process on list report and object page, so that if any one is trying to build fiori elements app and they can easily understand where different local annotations fits on the screen.

Note: Here I had used standard PO service to demonstrate the UI annotations.

How to link annotation.xml file to our service:

– create annotation.xml(filetype should be .xml) file inside webapp folder. Path: right click on webapp folder-new-Annotation File ->in the next window we have to choose the corresponding odata service = this will create an local annotation file for that service and corresponding code will be added in manifest.json file.

Manifest.json link for annotation file:

Path: sap.app – dataSources

In below example inside localannotations section check the uri to find where the annotation file exist in webapp folder.

1)Selection fields

<Annotation Term="UI.SelectionFields">
<Collection>
<PropertyPath>Supplier</PropertyPath>
<PropertyPath>CompanyCode</PropertyPath>
</Collection>
</Annotation>

Result:

2) Value List:

Here we have to always match valuelist property with local property(i.e the property which is coming from the bindelement aggregation).

<Annotations Target="MM_PUR_PO_MAINT_V2_SRV.C_PurchaseOrderTPType/Supplier">
<Annotation Term="Common.ValueList">
<Record Type="Common.ValueListType">
<PropertyValue Property="CollectionPath" String="C_MM_SupplierValueHelp"/>
<PropertyValue Property="Parameters">
<Collection>
<Record Type="Common.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="Supplier"/>
<PropertyValue Property="ValueListProperty" String="Supplier"/>
</Record>
<Record Type="Common.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="SupplierName"/>
</Record>
<Record Type="Common.ValueListParameterIn">
<PropertyValue Property="LocalDataProperty" PropertyPath="CompanyCode"/>
<PropertyValue Property="ValueListProperty" String="CompanyCode"/>
</Record>
</Collection>
</PropertyValue>
</Record>
</Annotation>
</Annotations>

Result:

3) Line Item :

Showing the line item (table at main page)

<Annotation Term="UI.LineItem">
<Collection>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="PurchaseOrder"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="Supplier"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="CompanyCode"/>
</Record>
</Collection>
</Annotation>

Result:

4) Identification:

<Annotation Term="UI.Identification">
<Collection>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="PurchaseOrder"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="CompanyCode"/>
</Record>
</Collection>
</Annotation>

Result:

5) Header Info:

<Annotation Term="UI.HeaderInfo">
<Record Type="UI.HeaderInfoType">
<PropertyValue Property="TypeName" String="{@i18n&gt;PURCHASE_ORDER}"/>
<PropertyValue Property="TypeNamePlural" String="{@i18n&gt;PURCHASE_ORDERS}"/>
<PropertyValue Property="Title">
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="PurchaseOrder"/>
</Record>
</PropertyValue>
<PropertyValue Property="Description">
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="PurchaseOrderType"/>
</Record>
</PropertyValue>
<PropertyValue Property="ImageUrl" String="/sap/bc/ui5_ui5/sap/mm_po_manages1/images/purchaseorder.jpg"/>
</Record>
</Annotation>

Result:

6) Data Point:

<Annotation Term="UI.DataPoint" Qualifier="postatus">
<Record Type="UI.DataPointType">
<PropertyValue Property="Value" Path="PurchaseOrderStatus"/>
<PropertyValue Property="Title" String="po status"/>
</Record>
</Annotation>
<Annotation Term="UI.DataPoint" Qualifier="netamunt">
<Record Type="UI.DataPointType">
<PropertyValue Property="Value" Path="PurchaseOrderNetAmount"/>
<PropertyValue Property="Title" String="NetAmount"/>
</Record>
</Annotation>
<Annotation Term="UI.DataPoint" Qualifier="progress">
Record Type="UI.DataPointType">
<PropertyValue Property="Value" Path="NumberOfOverduePurOrdItm"/>
<PropertyValue Property="Visualization" EnumMember="UI.VisualizationType/Progress"/>
<PropertyValue Property="Title" String="progress data"/>
<PropertyValue Property="TargetValue" Int="100"/>
</Record>
</Annotation>
<Annotation Term="UI.DataPoint" Qualifier="rating">
<Record Type="UI.DataPointType">
<PropertyValue Property="Value" Path="NumberOfOverduePurOrdItm"/>
<PropertyValue Property="Visualization" EnumMember="UI.VisualizationType/Rating"/>
<PropertyValue Property="Title" String="Rating"/>
</Record>
</Annotation>

Result:

7) Header Facets:

map datapoint annotation info here: in below example rating and progress indicator are data point annotations are mapped in header facet as a reference facet.

<Annotation Term="UI.HeaderFacets">
<Collection>
<Record Type="UI.ReferenceFacet">
<PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#netamunt"/>
</Record>
<Record Type="UI.ReferenceFacet">
<PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#postatus"/>
</Record>
<Record Type="UI.ReferenceFacet">
<PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#rating"/>
</Record>
<Record Type="UI.ReferenceFacet">
<PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#progress"/>
</Record>
</Collection>
</Annotation>

Result:

8) object page: Item’s line Item annotations:

Result:

Annotations:

Step1) prepare line item annotations of the corresponding item entity with a Qualifier.

<Annotation Term="UI.LineItem" Qualifier="item">
<Collection>
<Record Type="UI.DataField">
<PropertyValue Path="PurchaseOrderItem" Property="Value"/>
<Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
</Record>
</Collection>
</Annotation>

Step2) the step1 qualifier we have to add as a reference facet in the entity UI.Facet annotation

<Annotation Term="UI.Facets">
<Collection>
<Record Type="UI.ReferenceFacet">
<PropertyValue Property="Label" String="Second Facet"/>
<PropertyValue Property="Target" AnnotationPath="to_PurchaseOrderItemTP/@UI.LineItem#item"/>
</Record>
</Collection>
</Annotation>

9) navigate to sub object page:

To navigate to sub object from an objectpage, then below code is used in manifest.json file.

"pages": {
"ObjectPage|to_PurchaseOrderItemTP": {
"navigationProperty": "to_PurchaseOrderItemTP",
"entitySet": "C_PurchaseOrderItemTP",
"component": {
"name": "sap.suite.ui.generic.template.ObjectPage"
}}}

10) Hide objectpage data fields:

we can use UI.Hidden annotation to hide any data field on the screen.

<Annotation Term="UI.Identification">
<Collection>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="MaterialGroup"/>
<PropertyValue Property="Label" String="material group"/>
<Annotation Term="UI.Hidden" Bool="true"/>
</Record>
</Collection>
</Annotation>

11) Field group annotation:

Here we can group several data fields into groups using the field group annotations.

Result:

Step1) add annotation field group with qualifier:

<Annotation Term="UI.FieldGroup" Qualifier="subobjectfg1">
<Record Type="UI.FieldGroupType">
<PropertyValue Property="Data">
<Collection>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="OverdelivTolrtdLmtRatioInPct"/>
<PropertyValue Property="Label" String="over delivery"/>
</Record>
</Collection>
</PropertyValue>
</Record>
</Annotation>

Step2) add this qualifier as reference facet in Item’s entity in the annotation file:

<Annotations Target="MM_PUR_PO_MAINT_V2_SRV.C_PurchaseOrderItemTPType">
<Annotation Term="UI.Facets">
<Collection>
<Record Type="UI.CollectionFacet">
<PropertyValue Property="ID" String="GeneralInformation"/>
<PropertyValue Property="Label" String="{@i18n&gt;@GeneralInfoFacetLabel}"/>
<PropertyValue Property="Facets">
<Record Type="UI.ReferenceFacet">
<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#subobjectfg1"/>
<PropertyValue Property="Label" String="Delivery"/>
</Record>
</Collection>
</Annotation>
</Annotations>

12) add table in subobject page:

in the sub-object page if we have to add table then, we can make use of below annotations.

Result:

Here inside the item object page , add table for schedules lines using annotations

Step1) add line item annotations for corresponding entity:

<Annotations Target="MM_PUR_PO_MAINT_V2_SRV.C_PurOrdScheduleLineTPType">
<Annotation Term="UI.LineItem">
<Collection>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="ScheduleLine"/>
<PropertyValue Property="Label" String="scheduleline"/>
</Collection>
</Annotation>
</Annotations>

Step2) we have to add the above line item annotation as reference facet funder UI.Facet for corresponding entity(the current page navigated entity)

<Annotations Target="MM_PUR_PO_MAINT_V2_SRV.C_PurchaseOrderItemTPType">
<Annotation Term="UI.Facets">
<Collection>
<Record Type="UI.CollectionFacet">
<PropertyValue Property="ID" String="GeneralInformation"/>
<PropertyValue Property="Label" String="{@i18n&gt;@GeneralInfoFacetLabel}"/>
<PropertyValue Property="Facets">
<Collection>
</Collection>
</PropertyValue>
</Record>
<Record Type="UI.ReferenceFacet">
<PropertyValue Property="Target" AnnotationPath="to_PurOrdScheduleLineTP/@UI.LineItem"/>
<PropertyValue Property="Label" String="schedule lines"/>
</Collection>
</Anotation>
</Annotations

13) more link:

Inside general information tab when we have multiple sections of data and we want to show the data using show more/show less buttons

Result:

<Record Type="UI.ReferenceFacet">
<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#DeliveryInvoiceGroup2"/>
<PropertyValue Property="Label" String="delivery group1"/>
<Annotation Term="UI.PartOfPreview" Bool="false"/>
</Record>