Skip to Content

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

  1. 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/

 

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

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

 

  1. 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 –

 

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.

 

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Ozlem Seker

    Hi Former Member ,

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

     

    Regards,

    Özlem.

    (0) 
  2. Former Member Post author

    Hi Ozlem,

     

    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

     

    service{
        // path for .calculationview file
        keys generate local "ID" 
        aggregates always;
    
    }
    
    annotations {
        enable OData4SAP; 
    }

     

    Hope it would help you. 🙂

    (0) 
      1. Former Member Post author

        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.

        (1) 
  3. Former Member

    Hi Ozlem,

    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?

    (0) 

Leave a Reply