Hello everyone.
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.
Purpose:
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.
Prerequisites
- REST service of SAP HANA views by SAP HANA Extended Application Services (SAP HANA XS). Follow this link for creating one.
https://blogs.sap.com/2013/01/22/rest-your-models-on-sap-hana-xs/
- OData url should be configured in your SAP Cloud account destination, So that you can use it, in your application.
https://www.sap.com/india/developer/tutorials/hcp-create-destination.html
Steps
- Backend
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.
- Frontend
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 –
- https://blogs.sap.com/2016/11/27/fiori-elements-how-to-develop-a-list-report-using-local-annotations
1. Creating a template project. Follow this tutorial.
https://www.youtube.com/watch?v=crfnx3pw23E
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
DimensionAttributes-
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.
- SAP Managed Tags:
10 Comments
