How to build an Analytical Card in a Fiori Overview Page

[gsravya]

Hi friends,

In my previous blog, I explained how to create an overview page along with list card. Now, I am going to explain about analytical card.

First of all, we need to know what is an analytical card and why we use?

Analytical cards let us to view data in a variety of chart formats. The card is divided into two areas - header area (either a standard header or a KPI header) and chart area with a visual representation of the data. The cards can be used in both the fixed and re-sizable card layouts.

They are mainly used for “Data Visualization”.

Now let us see an example for Analytical Card.

In my previous blog I already explained how to create an overview page. Please refer the below link for that.

https://blogs.sap.com/2019/12/03/how-to-create-overview-page-along-with-list-card/

 

Step -1:

Adding Analytical card to an overview page. Right click on project, select “New” and then “Card”.

Right click on project -->  New --> Card

 

Step - 2:

Choose “Analytical Card” and click on “Next” button.

 

Step - 3:

By clicking Next button, we will navigate to the next tab.

In the “Configure Datasource” tab, choose Datasource and click on “Next” button.

Here, I choose the existing Datasource - “NorthwindModel”.

 

Step - 4:

In the “Template Customization” tab, choose the “Entity Set” from the available entity sets from the service and then give all the mandatory fields like Title, KPI Annotation Path.

Then click on “Next” button.

 

Step - 5:

In the “Confirmation” tab, give the confirmation by clicking on “Finish” button.

 

Step - 6:

Now the card is added to our project. We can change all these card properties in manifest.json cards section as shown below.

 

Manifest.json Code for Analytical Card:

"sap.ovp": {

		"globalFilterModel": "NorthwindModel",

		"globalFilterEntityType": "",

		"containerLayout": "fixed",

		"enableLiveFilter": true,

		"considerAnalyticalParameters": false,

		"cards": {

			"card1": {

				"model": "NorthwindModel",

				"template": "sap.ovp.cards.charts.analytical",

				"settings": {

					"title": "{{techippoOverviewApp_card02_title}}",

					"entitySet": "Category_Sales_for_1997",

					"chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart"

				}

			}

		}

	}

 

Step - 7:

Now add Annotation file as shown below.

Give Annotation File name and choose oData service and click on Next button.

Click on “Finish” button.

Now a new annotation file is added to our project.

 

Here is the code for Analytical Card. Copy the following code in your annotation.xml file.

<edmx:Edmx xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx"

	xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:sap="http://www.sap.com/Protocols/SAPData" Version="1.0">

	<edmx:Reference xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"

		Uri="https://wiki.scn.sap.com/wiki/download/attachments/448470968/UI.xml?api=v2">

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

	</edmx:Reference>

	<edmx:Reference xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Uri="/Northwind/V2/Northwind/Northwind.svc/$metadata">

		<edmx:Include Alias="Metadata" Namespace="NorthwindModel"/>

	</edmx:Reference>

	<edmx:DataServices m:DataServiceVersion="2.0">

		<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="NorthwindModel" sap:schema-version="1">

			<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>

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

					</Record>

				</Annotation>

			</Annotations>

		</Schema>

	</edmx:DataServices>

</edmx:Edmx>

 

Step - 8:

Now our application is ready to execute. Let us check the output by running the application.

 

Oops….!!! I am getting the “CORS” issue.

What is CORS issue and why we are getting here?

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.

Here we are using Northwind oData service which is a publicly available service. And we cannot modify that service. So, when we are trying to execute the XMLHttpRequest, the browser may refuse to connect to that service (i.e., prevents the call) due to same-origin policy.

To overcome this issue, i replaced the below northwind uri

https://services.odata.org/V2/Northwind/Northwind.svc/

with the following uri

https://cors-anywhere.herokuapp.com/https://services.odata.org/V2/Northwind/Northwind.svc/

 

 

 

Finally, we got the output for Analytical card.

 

Hope this will help.

 

Thanks for reading!!