Create a Analytical report in 5 min
A picture speaks more than 1000 words. Similarly, an analytical report is much more understandable than an endlessly scrolling list report. You can get the right insights, without mining through the complete data set.
It saves all the pain of exporting the data to a Analytical tool like SAC for visualization purposes.
In this blog, I would like to share my experience of creating a simple analytical report. Believe me or not, it took more time to write this blog than to develop my first analytical report.
For the experienced users, who understand the lingo, follow the video tutorial and try it yourself.
- REST service of SAP HANA views by SAP HANA Extended Application Services (SAP HANA XS). Follow this link for creating one.
- OData url should be configured in your SAP Cloud account destination, So that you can use it, in your application.
Create an xsodata service in SAP HANA XS application(link provided in prerequisites 1). I already have created the odata service exposing the details about the vehicles, like their trips and fuel consumed. After creating it successfully, you should get the metadata like this.
Please make sure you have the sap:aggregation-role attribute in your odata properties, Otherwise your chart will not display the data properly. That attribute can have only 2 types of value dimension or measure.
Dimension would come if you have mentioned that particular column as type Attribute in your calculation view and Measure would come if you have mentioned that particular column as type Measure in your calculation view.
Once we are done with the backend, creating a front end is our next task. As I said earlier we will use Analytical list report template for this purpose. It comes with features like sorting, filtering and much more.
Here we configure the view using one file called annotation.xml. Here we will not use any UI5 xml views we are familiar with. Rather this annotation.xml file will be used to manipulate the UI of the application.
For more details for annotation based UI refer to these blogs –
1. Creating a template project. Follow this tutorial.
In template selection part select Analytical List Page / Object Page. And press next. Rest of the process will be same.
2. After creating the project, create the annotation.xml file inside the annotations folder under your webapp folder.
Right Click > New > Annotation File > Give a proper name > next and then click on finish.
Now if you run the application in this state, you should get an error popup like this.
Since you have not selected any column to view, this error is coming. You can either select the columns from the frontend by clicking on the setting button on top of the table and ticking the column names you want to see and then press ok. But for the obvious reason, this is not the ideal way of doing it. It is very annoying to select the column every time you render the page. To fix this issue we have an annotation term called UI.LineItem which is responsible for displaying the columns (Only those columns you have mentioned inside this annotation) as soon as you application is rendered in the browser. This part is very well explained in the link provided previously (https://blogs.sap.com/2016/11/27/fiori-elements-how-to-develop-a-list-report-using-local-annotations/)
3. Now we will focus on the most exciting part of this blog. Creating and configuring one chart view in this app.
- Click on the add button on Local Annotations row.
- Select Chart, and press OK.
- Under the UI.Chart Annotation, you can see the following properties
Each of the property have their own role to be played.
ChartType Represent the type of the chart; Column Chart, Bar Chart, Heat Map and there are many other options. For the simplicity of our chart we are selecting Column for Chart Type.
Measures– It is used for mentioning the OData properties, meaning the column names of database table or view, using which you want to draw the chart, meaning the data coming along Y axis of the chart. For example, if I want to see the kilometers travelled by each vehicle, I would select the column kilometer travelled as measure and vehicle ID as dimensions (Will be discussed later).
Click on the add button on the measures row, under UI.Chart annotation > Select Item > OK > I am selecting KMTravelled as PropertyPath (Please do it, as per your business scenario)
Measure Attributes – Now we need something called Measure Attributes, which specifies how we want to use the measures defined previously. Detail description of the properties of Measure Attributes is out of the scope of this blog. For simplicity we will learn by keeping it as simple as possible.
To add measure attributes click on the add button on measure attributes row > Select ChartMeasureAttributeType under records > OK > Again click on the add button on chart measure attribute type row > select measure and role > OK > In measure part select the property which you have select previously as measure (KMTravelled in my case ) and Select Axis 1 as Role
Dimensions – Let’s have a look at the Dimensions attribute. In my case it will be VehicleID, which comes along X axis. It is the attribute, based on which the data are distributed.
Click on the add button in the dimensions row > select Item > OK > Now select VehicleID as Propertypath
Same as Measure attributes, Dimension Attributes also specify how we want to use the Dimensions defined in previous section
Click add on DimensionAttributes > select Chart Dimension Attribute Type > OK > click on add on ChartDimensionAttributeType > select Dimension and Role > OK > Select VehicleID as dimension and Category as Role.
Now save the application in WebIDE and run the app.
My chart looks like this. Your chart will differ based on the attributes you have selected.
Hope this blog helped you. Please feel free to give any sort of feedback and comment. Happy Learning.
Hi Arunava Mukherjee ,
I made this application using northwind odata but the chart did not show up and odata did not come into the chart. Filtering works in lineItem but I could not do it on the chart. Why could it be ? Can you help me ..
Please check if your OData has the necessary SAP Odata annotations like sap:aggregation-role (please see the screenshot). That annotation is responsible for rendering the graph. Anyway I have created the odata using calculation view in hana. So in .xsodata file, I have added aggregates always keyword
Hope it would help you. 🙂
Hi Arunava Mukherjee ,
Thank you so much for your return.
But I did not use .xsodata. I used http://services.odata.org/V2/Northwind/Northwind.svc/ .. For this reason, where should I add Calculation view ? or Can not I do it without using .xsodata?
Hi Ozlem Seker,
The sap:aggregation-role annotation is important for rendering the chart. Because that helps to do aggregation operations on the data .
I was also facing a lot of trouble to get it done. As I told you only adding aggregates always keyword solved all my problems. Having the SAP specific annotation is very easy when you are using native HANA to create Odata(As I have done). To be honest I don't know how you can implement the same using olingo or even you can do or not. So If it is ok for your application to switch to native HANA app, please do it. Because then It would be lot more easier for you to create the Odata with sap specific annotations and leverage the complete power of hana.
Since northwind odata is not having those annotations, chart can not be rendered.
Please have a look at this. I Hope it would help to get you started. Happy learning.
Hi Former ,
Sharing was helpful. I keep working on the subject but I get an error like this. can you help me ?
Analytical Charts cannot be created using Northwind Data model as there is no Dimensions and Measures specified in the Metadata.
Inside of routes Path include Destinations follwed by your destination name
Actually it show like below format
"path": "/your DestinationName",
Check based on below format
"path": "/Destinations/your DestinationName",
I am a new comer for this analytical list page, especially for how to create different annotation within annotation.xml. There are so many options to choose for creating different component in UI. Do you have any documentation that list the usage of each option in annotation graph page? Can you help?
Hi Former ,
Unfortunately , there is not yet a document on this. I share if I find document.
Thanks for explaining the topic very nicely and it is so much informative.
I have a requriement where in I want to add a chart in the List page? I tried the possible options but never successful. Could you let me know with any example you have to add a chart as part of List page?