In previous posts we created our first SAP Fiori Overview Page Application using northwind OData service and added a List card and Stack card to our application.
In this post we will see how to add an analytical card to our application.The analytical chart card types used in Fiori overview page application are Line,Bubble,Donut,Column,Stacked Column,Vertical Bullet,Combination or Scatter.
We will be adding Donut chart card in our application.
A donut chart displays data as different colored sections of a donut.The size of each section varies according to the measure values.By seeing a donut chart a viewer can quickly determinte the key area which needs immediate attention.Donut chart require exactly one measure.We can provide more than one dimension to donut chart.We will be providing one dimension and measure for keeping this tutorial as simple as possible.
Pre-requisites
In this post we will see how to add an analytical card to our application.The analytical chart card types used in Fiori overview page application are Line,Bubble,Donut,Column,Stacked Column,Vertical Bullet,Combination or Scatter.
We will be adding Donut chart card in our application.
A donut chart displays data as different colored sections of a donut.The size of each section varies according to the measure values.By seeing a donut chart a viewer can quickly determinte the key area which needs immediate attention.Donut chart require exactly one measure.We can provide more than one dimension to donut chart.We will be providing one dimension and measure for keeping this tutorial as simple as possible.
Pre-requisites
- Fiori Overview Application created already.I will be using the application created in 'How to Create your first SAP Fiori Overview Page Application ? - Example using List Card' for this tutorial.
- First step is adding a analytic card to the fiori overview application.For this Right click on application->new->Card.
![]()
- Select a card.Choose Analytic card and press next button.
![]()
- In Card customisation section select the entityset we are going to use.I chose Category_Sales_for_1997.Give a title.title is mandatory this will be shown in the card.In the annotation section just give Chart Annotation path as com.sap.vocabularies.UI.v1.Chart.Keep all other paths blank.We will keep this tutorial simple.That is why we are keeping all other paths blank.Press next and press finish.Now a new component will be added to our application.
![]()
- Open manifest.json and edit the code inside cards section like below.
- Open our localAnnotations_1.xml file and paste below code inside Schema section.So far we have used Employees entityset for our previous tutorials.Now we are using Category_Sales_for_1997.So we have to create another annotations section targeting our new entityset inside Schema.We can add as many annotations section inside the schema.Paste below code just above our Northwind.Employees annotation section.
- Now our Fiori Overview Application have a chart section.Run the application and feel the beauty of our application.See my application screenshot.
![]()
"sap.ovp": {
"globalFilterModel": "NorthwindModel",
"globalFilterEntityType": "",
"cards": {
"techippoOverviewApp_card00": {
"model": "NorthwindModel",
"template": "sap.ovp.cards.list",
"settings": {
"title": "{{techippoOverviewApp_card00_title}}",
"subTitle": "{{techippoOverviewApp_card00_subTitle}}",
"entitySet": "Employees",
"listType": "condensed",
"listFlavor": "standard",
"sortBy": "TitleOfCourtesy",
"sortOrder": "descending",
"addODataSelect": "false",
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem#Top5Employees"
}
},
"techippoOverviewApp_card01": {
"model": "NorthwindModel",
"template": "sap.ovp.cards.stack",
"settings": {
"title": "{{techippoOverviewApp_card01_title}}",
"entitySet": "Employees",
"addODataSelect": "false",
"objectStreamCardsSettings": {
"annotationPath": "com.sap.vocabularies.UI.v1.Facets"
}
}
},
"techippoOverviewApp_card02": {
"model": "NorthwindModel",
"template": "sap.ovp.cards.charts.donut",
"settings": {
"title": "{{techippoOverviewApp_card02_title}}",
"entitySet": "Category_Sales_for_1997",
"chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart",
"navigation": "dataPointNav"
}
}
}
}
<Annotations
xmlns="http://docs.oasis-open.org/odata/ns/edm" Target="NorthwindModel.Category_Sales_for_1997">
<Annotation Term="UI.Chart">
<Record>
<PropertyValue Property="MeasureAttributes">
<Collection>
<Record Type="UI.ChartMeasureAttributeType">
<PropertyValue Property="Measure">
<PropertyPath>CategorySales</PropertyPath>
</PropertyValue>
<PropertyValue EnumMember="UI.ChartMeasureRoleType/Axis1" Property="Role"/>
</Record>
</Collection>
</PropertyValue>
<PropertyValue Property="DimensionAttributes">
<Collection>
<Record Type="UI.ChartDimensionAttributeType">
<PropertyValue Property="Dimension">
<PropertyPath>CategoryName</PropertyPath>
</PropertyValue>
<PropertyValue EnumMember="UI.ChartDimensionRoleType/Category" Property="Role"/>
</Record>
</Collection>
</PropertyValue>
</Record>
</Annotation>
</Annotations>
