Fiori OVP Cards with XML Annotation using CDS

[prashanth01]

Hi All,

In this blog, we shall learn how we can create OVP Column card using XML annotations which based on the CDS service which is very simple process.

I will cover only Column type OVP card creation, consuming the CDS view using annotation file.

Pre-requisite: Have to understand  or knowledge on UI. Annotations

Creating new app in WEB IDE:

process of creating Overview Page application in WEB IDE

FILE->NEW->select the PROJECT FROM TEMPLATE-> select the Category as SAP Fiori Element -> Select the Overview page

While creating the application we must select the Data Source which we have available CDS in the Backend system.

After our OVP app created we need to create the Annotation file:

Right click on the webapp folder we can New option, after click on the New option we can see

Annotation file option we can able to create the Annotation file, Once click on the Finish

Annotation file will be created and available in the webapp Folder.

In Below screenshot is the Application structure we can find:

In this Image we can see the OVP application structure

 

In annotation1.xml fil we must write the UI annotation for Column type chart, I have provided below for reference code. To develop Column type chart required at least one Measure and one Dimension value. We have to write code like below in the annotation1.xml  file.

annotation1.xml

<edmx:Edmx xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">

	<edmx:Reference Uri="https://sap.github.io/odata-vocabularies/vocabularies/UI.xml">

		<edmx:Include Namespace="com.sap.vocabularies.UI.v1" Alias="UI"/>

	</edmx:Reference>

	<edmx:Reference Uri="/sap/opu/odata/sap/ZC_PRTOPO_CDS/$metadata">

		<edmx:Include Namespace="ZC_PRTOPO_CDS"/>

	</edmx:Reference>

	<edmx:DataServices>

		<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="local">

			<Annotations Target="ZC_PRTOPO_CDS.ZC_PRTOPOType">

				<!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

				<!--++++++++++++++++++++++++UI.Identification+++++++++++++++++++++++++++++++++++-->

				<!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

					<Annotation Term="UI.Identification" Qualifier="zpurchasereqtopo">

					<Collection>

						<Record Type="UI.DataFieldForIntentBasedNavigation">

							<PropertyValue Property="SemanticObject" String="zpurchasereqtopo"/>

							<PropertyValue Property="Action" String="analyze"/>

							<!--<PropertyValue Property="RequiresContext" Bool="true"/>-->

							<PropertyValue Property="Inline" Bool="true"/>

						</Record>

						

					</Collection>

				</Annotation>

				

				<!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

				<!--++++++++++++++++++++++++UI.SelectionFields+++++++++++++++++++++++++++++++++++-->

				<!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

			

				<Annotation Term="UI.SelectionFields">

					<Collection>

						<PropertyPath>SupplierName</PropertyPath>

						<PropertyPath>CostCenterName</PropertyPath>

						<PropertyPath>WBSDescription</PropertyPath>

						<PropertyPath>WBSElement</PropertyPath>

					</Collection>

				</Annotation>

				<!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

				<!--++++++++++++++++++++++++UI.DATAPOINT+++++++++++++++++++++++++++++++++++++++++-->

			    <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

				<Annotation Term="UI.DataPoint" Qualifier="POQuantitydp">

					<Record Type="UI.DataPointType">

						<PropertyValue Property="Criticality" EnumMember="UI.CriticalityType/Positive"/>

						<PropertyValue Property="Value" Path="POQuantity"/>

						<PropertyValue Property="Title" String="Billing Quantity"/>

						<PropertyValue Property="ValueFormat">

							<Record Type="com.sap.vocabularies.UI.v1.NumberFormat">

								<PropertyValue Property="NumberOfFractionalDigits" Int="1"/>

							</Record>

						</PropertyValue>

					</Record>

				</Annotation>

				

				<!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

				<!--++++++++++++++++++++++++UI.Chart+++++++++++++++++++++++++++++++++++++++++-->

			    <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

				<Annotation Term="UI.Chart" Qualifier="purchasereq01">

					<Record>

						<PropertyValue Property="Title" String="Purcahse Requisition"/>

						<PropertyValue Property="MeasureAttributes">

							<Collection>

								<Record Type="UI.ChartMeasureAttributeType">

									<PropertyValue Property="Measure" PropertyPath="Count_PR"/>

									<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>

								</Record>

							</Collection>

						</PropertyValue>

						<PropertyValue Property="DimensionAttributes">

							<Collection>

								<Record Type="UI.ChartDimensionAttributeType">

									<PropertyValue Property="Dimension" PropertyPath="PurchaseReqCreationDate"/>

									<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category"/>

								</Record>

							</Collection>

						</PropertyValue>

						<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column"/>

					</Record>

				</Annotation>

			</Annotations>

		</Schema>

	</edmx:DataServices>

</edmx:Edmx>

 

 

This step is most important and main operation for this to work.

Adding the card in the manifest.json file with  the annotations  and template which we need to provide manually.

we have to maintain cards like this

 

We  created OVP Fiori element application with required DATA source and created annotation file to local UI development and maintained XML UI annotation code in  annotation file.

Final step is we maintained card and called annotation using Qualifiers which we provided  on the annotation file. all set we  developed the OVP Column with UI annotations using CDS.

OUTPUT of our application:

OUTPUT of ZOVP_DEMO Application

 

 

I hope this was a good and new learning experience for you with simple steps and helped you in your implementation. If you have any questions please feel free to drop a comment below. I will be happy to answer them.

Thanks & Regards,

Prashanth