Skip to Content
Technical Articles
Author's profile photo Prashanth Varikuppala

Fiori OVP Cards with XML Annotation using CDS

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%20this%20Image%20we%20can%20see%20the%20OVP%20application%20structure

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.


<edmx:Edmx xmlns:edmx="" Version="4.0">
	<edmx:Reference Uri="">
		<edmx:Include Namespace="" Alias="UI"/>
	<edmx:Reference Uri="/sap/opu/odata/sap/ZC_PRTOPO_CDS/$metadata">
		<edmx:Include Namespace="ZC_PRTOPO_CDS"/>
		<Schema xmlns="" Namespace="local">
			<Annotations Target="ZC_PRTOPO_CDS.ZC_PRTOPOType">
					<Annotation Term="UI.Identification" Qualifier="zpurchasereqtopo">
						<Record Type="UI.DataFieldForIntentBasedNavigation">
							<PropertyValue Property="SemanticObject" String="zpurchasereqtopo"/>
							<PropertyValue Property="Action" String="analyze"/>
							<!--<PropertyValue Property="RequiresContext" Bool="true"/>-->
							<PropertyValue Property="Inline" Bool="true"/>
				<Annotation Term="UI.SelectionFields">
				<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="">
								<PropertyValue Property="NumberOfFractionalDigits" Int="1"/>
				<Annotation Term="UI.Chart" Qualifier="purchasereq01">
						<PropertyValue Property="Title" String="Purcahse Requisition"/>
						<PropertyValue Property="MeasureAttributes">
								<Record Type="UI.ChartMeasureAttributeType">
									<PropertyValue Property="Measure" PropertyPath="Count_PR"/>
									<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>
						<PropertyValue Property="DimensionAttributes">
								<Record Type="UI.ChartDimensionAttributeType">
									<PropertyValue Property="Dimension" PropertyPath="PurchaseReqCreationDate"/>
									<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category"/>
						<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column"/>



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,


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Kevin Hu
      Kevin Hu

      Wanna try the 21st century tool called SAP Business Application Studio to build OVP with guided development? 🙂

      Author's profile photo Prashanth Varikuppala
      Prashanth Varikuppala
      Blog Post Author

      Thank you for your Suggestion!. I explained here with using WEBIDE.

      Author's profile photo Aqib Pathan
      Aqib Pathan

      Hi! Prashanth

      Excellent blog!

      Can we also add drill down to this chart to display table of related records representing the node in the chart?



      Author's profile photo Prashanth Varikuppala
      Prashanth Varikuppala
      Blog Post Author

      Thanks for your appreciation !,Monday motivation.

      Yes, We can add  drill down details. Its my to do list. I will write a blog on that to cover the drill down