Skip to Content
Technical Articles

Data Visualization app on SAP Cloud Platform versus graphical report in SAP Analytics Cloud

Authors: Hồng Ngọc Vũ & Freek Keijzer, Experis Ciber

Introduction

In a recent blog, we described the work we did at Experis Ciber on a 100% virtual end-to-end scenario across an SAP system landscape with S/4HANA Cloud, SAP Cloud Platform (SCP) and SAP Analytics Cloud (SAC). URL: https://blogs.sap.com/2019/05/15/sap-end-to-end-scenario-from-s4hana-cloud-via-hana-modeling-in-scp-to-sac/

In this blog, we are going to focus on SCP + SAC to draw a comparison between developing a SAPUI5 data visualization app on SCP and creating a graphical report in SAC. Prior to these developments we are going to do some data modeling on SCP with graphical calculation views.

System landscape

Below the system landscape used for the end-to-end scenario. For the work presented here, we did not use data from ES5, but we created dev/test data in table in a Hana database on SCP.

HANA Modeling

All HANA modeling was done using the ”SAP HANA Web-Based Development Workbench” on the SCP. Dev/test data were created on SCP itself using the csv-files shown below. We used hdbdd/hdbti-files to create table structure plus content on the HANA database. File “data_act.csv” is a simplified version for actual data stored on document level. File “data_plan.csv” represents plan data, which are usually not stored on document level, but assigned to combinations of attributes, like “cocode” + “year” in this case.

First calculation view created was a union between these files. See below.

Shared attributes are “cocode” and “year”. Measures are “act1”, “act2” and “plan”. Attribute “docnr” represents the document number, and has no value for measure “plan”. See data preview below.

This union will turn out to be sufficient for the SAC report. For the UI5 app we created some more calculation views, e.g. aggregations after which only “year” or “cocode” was left as an attribute, and various filters.

Connectivity

To be able to use the data in the SAPUI5 app, we will expose it with oData. Create an xsodata-file with a service having the entities between {}s. In this case, we defined different datasets to use in the SAPUI5 app later on.

To be able to use this oData service in the WebIDE, we need to add a destination in our cloud. Remember to use credentials of user DEMO that you have created and used during creation of tables, data, calculation views and oData service.

Report in SAC

Connecting to a calculation view in SCP from SAC via a live connection is a piece of cake, as shown in the previous blog. The same is true for creating a SAC Model with the calculation view as datasource – we took the “union” version of the data – as well as for building a graphical report. We chose the chart option “Chart Structure” > “Comparison” > “Combination Stacked Column & Line”. It is all child’s play. Look at the result shown below. Doesn’t it look nice?

It does, until you decide to change the setting for “Y-Axis Labels” from default “Hide” to “Show”, take a good look at the scale of the Y-axes, and notice these are different for stacked column versus line. Note that this is the output with marker “Y Axes Overlap” switched on. This either is a bug, or it makes sense to software developers of the SAC product to do some sort of rescaling. We reported it as a bug to SAP to find out which is the case.

Data Visualization app with UI5

We are using WebIDE Full Stack to develop the app. When creating a new project choose option “New Project From Template”, then “SAPUI5 Application” template, fill in all required fields, give the first view a name like “Overview” and choose view type “XML”. After that, a project will be created with the following files in folder structure.

Before we start to make the view with the desired chart, we of course need to be able to access the data. With the oData and destination, we still weren’t there! In the app it needs to be defined, which can be done in the “manifest.json” file. Choose for “Descriptor Editor” at the bottom.

Then choose “Data Sources” followed by “+”. After that, choose a system to add a service catalog. You will see the name that you have added in the destination configuration. After everything is successfully done, you will get the following:

Now let’s get started with the app! In SAC, you can see we used “Chart Structure” > “Comparison” > “Combination Stacked Column & Line”, so of course we are going to find a chart within the SAPUI5 controls that is the same and voilà we found it. Go to the “SAPUI5 SDK – Demo Kit” (https://ui5.sap.com/) > “Samples” > “Charts – Data Visualization” > “Data Visualization” > “VizFrame Charts” > “Combined Charts – Column + Line / Stacked Column + Line”. A VizFrameChart has its own aggregations. The two important ones to mention here are “dataset” which is of the type “DataSet” and “feeds” which is of the type “FeedItem”. In the dataset we tell which data we want to use for the dimension and which for the measures. In the feeds we make sure that the data we have referred to will be showed properly as we want it to be visualized.

The code for the XML view should be similar to what is shown below. Remember to add the libraries in the “mvc:View” tag.

The code for the controller should look something like this:

In the app we would have liked to use the data of the calculation view of the union, but because there is no built-in aggregation like in a reporting tool, this will not work. There will be more algorithm needed to achieve this, but that is for another time! As you have seen we had more entities in the oData collection. To obtain the proper result, we used the calculation view aggregated so the only attribute left is “year”.

If result looks like this, congratulations! You just built a UI5 app. Who knows your first.

Though in the app the proportions and responsiveness is great, we forgot the labels to make it just like the SAC visualization. In our case we used the switch label on or off just like the sample in the demo kit. Then it will look just like SAC.

But have a good look at the displayed data. This is not only similar to the SAC report, it is even better!

Data Visualization app with UI5 – Additional coolness

Besides that the control visualizes the data in a better ratio we also have other advantages of Fiori, mostly the responsiveness. To really live check your graphs on a mobile device, do the following. Right click on your project and choose “Run Configuration”.

Select the “Run Component.js” for the configurations to “Run as SAP Fiori LaunchPad Sandbox”. Make sure you have your “Component.js” selected in at the File Name and the preview mode “With Frame”. Then click save and run.

When your application has started, you will see your app in a frame with different options. Please click on the button on the right to display the QR-code.

After the QR-code is showed, take your phone and scan the QR-code with any QR-reader code app and open the weblink (you might have to login with your SCP login). If all successfully done, you can see your beautiful graph on your mobile phone with scaling and responsiveness!

Side-By-Side Extensibility

Were we to make the UI5 app available in the S/4HANA source system, something we cannot due with ES5, we would have closed the cycle of a “side-by-side extension”. See image below from openSAP training “Create and Deliver Cloud-Native SAP S/4HANA Extensions” (s4h13).

The Software-as-a-Service (SaaS) version of S/4HANA is almost completely closed for custom-specific changes. Some options for “In-App Extensibility” exist, like custom fields/objects or custom CDS views. However, anything more than that needs to be created outside of S/4HANA and brought back in. Recommended environment for all custom-specific extensions is the SCP. This is called “Side-By-Side Extensibility”. “In-App Extensibility” and “Side-By-Side Extensibility” are recommended by SAP for all versions of S/4HANA, so also for on-premise and Infrastructure-as-a-Service (IaaS).

Epilogue

For the topics presented in the previous blog and this one, we are following the path from knowledge development to knowledge sharing to product development. As part of Experis Ciber’s “Qualified Package Professional Services”, we developed an advanced dashboard in SAC. We are currently investigating if this dashboard can also be delivered by data visualization apps on SCP, for those customers who for some reason do not want to invest in SAC.

The knowledge sharing was also quite interesting. We organized a training for a mixed audience of SAP consultants and even 1 non-SAP consultant. It was fun to see how different groups struggled with different parts of concepts and practical work. Developers seemed to be surprised by the built-in aggregation behavior every reporting system has, whereas BI consultants were surprised by the absence of this behavior in the UI5 app. Overall, it is safe to conclude that all participants were pushed out of their comfort zone at some point during the training.

Two new openSAP courses have recently started with related topics: “SAP Cloud Platform Essentials (Update Q2/2019)” (cp1-3), which started April 29th, and “Evolved Web Apps with SAPUI5” (ui52), which started May 8th. Programs of both courses have quite some overlap with what we have been doing, so if you are interested in topics such as presented here you can enroll in these courses at following urls:

2 Comments
You must be Logged on to comment or reply to a post.
  • Hello Freek,

     

    in regards to the report in SAC and the scaling that you mentioned, I would suggest you take a look at the Chart Scaling feature in SAP Analytics Cloud, where you simply choose which measures should be on an identical scaling, and then the charts will visualize the information accordingly.

     

    Regards

    Ingo Hilgefort, SAP

  • Ingo,

    We tested your suggestion, and it works. Solution is not very intuitive as it is on page-level and not on graph-level. This also reduces flexibility for the other graphs on the page.

    But, again, thanks for your suggestion. Nevertheless, we keep hoping for an option on graph-level 😉.

    Regards,    Freek