This article will describe, how to use the great and powerful Fiori Elements Framework, like Overview Pages (OVP’s) or List Reports in a standard on premise world without big development effort or connecting to a Data Warehouse (BW System). We will look to the really great implementation of Fiori Elements and how the components work together, passing information from charts to tables, displaying detailed information and how this great capabilities can be used to visual data from ALV Report, Infoset Queries, OADP or B2 Cluster Time Results.
First of all I would like to take a look at the great interaction between OVPs, List Reports and Split Pages and all the features that come up using Fiori Elements which allow to concentrate on the most important point in the data driven, statistic, management summary world: the business information!
Let’s pick a simple example in the HR World: Time Off or Vacation! Every employee should have an entitlement to take a time off. But how to report outstanding time off entitlements which will expire soon in order to instruct the employee to take the time? Indeed, mostly it’s done via SAP Report Export to Excel which are send via Email or using the MDT in a Portal.
Our aim was to create a standard Overview Page consuming different results of standard ALV Reports, OADP Views and Infotype Information in One Page. Therefore, we’ve created a framework having the functionality to consume different sources, harmonizing and standardizing the information and transferring them to the OVP. But more about the framework later on in this article.
In the following example the chart and the list element with the title “Kontingentübersicht” are consuming the results of RPTQTA10 which is a standard ALV Report:
We figured out that creating annotations in the WebIDE (supported by the Annotation Modeler) is really straight forward and requires a minimum of “configuration work” in order to quickly consume data in charts, lists or stack cards within OVPs.
Let’s take a short look to the manifest “Kontingentübersicht” Chart of the OVP which will not be described more detailed because of the huge amount of already existing and great articles here in the SCN.
Further we must add some annotations to describe the chart as followed:
That’s all. The Chart is displayed and the framework is doing the rest of the work in the backend.
That’s possible because all chart components are sending the requests combining the “$select” parameter with the filters specified in the chart. Following that logic, it’s simple for the framework to aggregate the information as required by the chart completely without additional coding.
Additionally, we will create a list report which should consume the data of the report RPTQTA10 and display it in an analytical table. I will just describe the annotation file, which is build up really quickly to display the data in the table:
Done. We can deploy the applications to the On Premise System, configure the Tiles and Navigation Targets and run it in the Launchpad.
When starting development of the OVPs and List Reports we figured out that the interaction between the Apps is one of the most interesting features of the OVPs. The powerful navigation logic is passing filter values to other components without any line of code! When clicking on the chart column…
… the filters of the Chart, and the selected column entry are combined to a selection filter and passed to the table, which uses the filter to display the information filtered on the relevant data of the previous chart. In this example I have selected the Tariff Vacation Quota (Tarifurlaub) …
… and the quota typ “10” and “04” was added because the chart is consuming only “relevant” quotas for the vacation overview chart using the “SelectionVariant” Annotation:
Dear SAP Fiori Elements Team: Awesome work! This saves a lot of time for development of common features and allows the developer to focus on the business value! The Fiori Elements developers did an amazing job! It works so smooth!
Having that table, we can start playing around. First, let’s group the information by employee using the annotation files:
This grouping option changes the logic the list table is requesting the information and split the request into two calls. Again, only driven by the “$select” parameter, requesting the sum line first and than requesting the rest of the information, which of course need to be processed in the backend depending on the dimension or measure flag of each field.
As displayed in the above screen, the table creates a summed line for all measures configured in the LineItem Annotations automatically and switches the table design depending on the semantic “aggregate” annotation to analytical table.
List Repot components allow to navigate to detailed pages, which enables the manager to get information for a specific employee. In that case we enabled the navigation option to further reports, which can be setup via customizing. The following screen shows the detail page navigated from an OADP Report to
Due to the fact, that our framework allows to add several data sources and time selections, the possibilities of the visualization are unlimited!
The sMaRT (simple Manager Reporting Tool ;-)) framework was developed in a project to replace the Managers Dashboard (MDT) including old ALV based Reports with a new state of the art technology but keeping the business logic of the old reports in place. We decided to make use of the power of Fiori Elements and developed additional logic for Fiori Elements allowing to add several connectors to the framework, automatically applied sorting, filtering, paging and aggregation.
Meanwhile we can consume and visualize:
We are now working on a connector to:
We will keep investigating 😉 and hopefully we’ll make use of the Analytical Page soon.
I will try to post a separate blog entry describing some details of the framework and customizing abilities in the next future.
The displayed OVP Charts and Tables of the screenshots were created without any additional line of code, just supported by the logic and the customizing of the sMaRT Framework.
The work of the UI5 and Fiori Elements Team is awesome. The possibility to “develop” application only by describing the behavior using annotations allows to focus on the business relevant values and saves a lot of development effort. I am impressed of the interaction between the components.
The developed framework supports the Fiori Element Components and integrates different data sources in one intuitive and innovative User Interface.
Thank you! Please keep working on the Fiori Elements Functionalities.
Intro & Reporting Setup
First of all I would like to take a look at the great interaction between OVPs, List Reports and Split Pages and all the features that come up using Fiori Elements which allow to concentrate on the most important point in the data driven, statistic, management summary world: the business information!
Let’s pick a simple example in the HR World: Time Off or Vacation! Every employee should have an entitlement to take a time off. But how to report outstanding time off entitlements which will expire soon in order to instruct the employee to take the time? Indeed, mostly it’s done via SAP Report Export to Excel which are send via Email or using the MDT in a Portal.
Our aim was to create a standard Overview Page consuming different results of standard ALV Reports, OADP Views and Infotype Information in One Page. Therefore, we’ve created a framework having the functionality to consume different sources, harmonizing and standardizing the information and transferring them to the OVP. But more about the framework later on in this article.
In the following example the chart and the list element with the title “Kontingentübersicht” are consuming the results of RPTQTA10 which is a standard ALV Report:
We figured out that creating annotations in the WebIDE (supported by the Annotation Modeler) is really straight forward and requires a minimum of “configuration work” in order to quickly consume data in charts, lists or stack cards within OVPs.
Let’s take a short look to the manifest “Kontingentübersicht” Chart of the OVP which will not be described more detailed because of the huge amount of already existing and great articles here in the SCN.
Further we must add some annotations to describe the chart as followed:
That’s all. The Chart is displayed and the framework is doing the rest of the work in the backend.
That’s possible because all chart components are sending the requests combining the “$select” parameter with the filters specified in the chart. Following that logic, it’s simple for the framework to aggregate the information as required by the chart completely without additional coding.
Additionally, we will create a list report which should consume the data of the report RPTQTA10 and display it in an analytical table. I will just describe the annotation file, which is build up really quickly to display the data in the table:
Done. We can deploy the applications to the On Premise System, configure the Tiles and Navigation Targets and run it in the Launchpad.
Interaction between Fiori Elements OVPs and List Reports
When starting development of the OVPs and List Reports we figured out that the interaction between the Apps is one of the most interesting features of the OVPs. The powerful navigation logic is passing filter values to other components without any line of code! When clicking on the chart column…
… the filters of the Chart, and the selected column entry are combined to a selection filter and passed to the table, which uses the filter to display the information filtered on the relevant data of the previous chart. In this example I have selected the Tariff Vacation Quota (Tarifurlaub) …
… and the quota typ “10” and “04” was added because the chart is consuming only “relevant” quotas for the vacation overview chart using the “SelectionVariant” Annotation:
Dear SAP Fiori Elements Team: Awesome work! This saves a lot of time for development of common features and allows the developer to focus on the business value! The Fiori Elements developers did an amazing job! It works so smooth!
Having that table, we can start playing around. First, let’s group the information by employee using the annotation files:
This grouping option changes the logic the list table is requesting the information and split the request into two calls. Again, only driven by the “$select” parameter, requesting the sum line first and than requesting the rest of the information, which of course need to be processed in the backend depending on the dimension or measure flag of each field.
As displayed in the above screen, the table creates a summed line for all measures configured in the LineItem Annotations automatically and switches the table design depending on the semantic “aggregate” annotation to analytical table.
List Report and Detail Pages
List Repot components allow to navigate to detailed pages, which enables the manager to get information for a specific employee. In that case we enabled the navigation option to further reports, which can be setup via customizing. The following screen shows the detail page navigated from an OADP Report to
- OADP Based Employee Overview
- Infotype Data from IT 2, 6 and 1 as valid for now
- ALV based Quota Overview only for the selected employee
- B2 Cluster Planned and Productive Hours of the last year (starting in the previous month
Due to the fact, that our framework allows to add several data sources and time selections, the possibilities of the visualization are unlimited!
The Framework
The sMaRT (simple Manager Reporting Tool ;-)) framework was developed in a project to replace the Managers Dashboard (MDT) including old ALV based Reports with a new state of the art technology but keeping the business logic of the old reports in place. We decided to make use of the power of Fiori Elements and developed additional logic for Fiori Elements allowing to add several connectors to the framework, automatically applied sorting, filtering, paging and aggregation.
Meanwhile we can consume and visualize:
- OADP based Lists
- All ALV based Reports
- Infoset Query Reports
- Data from the time evaluation cluster (B2)
- Enriched Infotype data from HRPAD
- Any SAP Table or CDS View in the System like CATSDB
We are now working on a connector to:
- Successfactors
- BW Queries
We will keep investigating 😉 and hopefully we’ll make use of the Analytical Page soon.
I will try to post a separate blog entry describing some details of the framework and customizing abilities in the next future.
The displayed OVP Charts and Tables of the screenshots were created without any additional line of code, just supported by the logic and the customizing of the sMaRT Framework.
Summary
The work of the UI5 and Fiori Elements Team is awesome. The possibility to “develop” application only by describing the behavior using annotations allows to focus on the business relevant values and saves a lot of development effort. I am impressed of the interaction between the components.
The developed framework supports the Fiori Element Components and integrates different data sources in one intuitive and innovative User Interface.
Thank you! Please keep working on the Fiori Elements Functionalities.
- SAP Managed Tags:
9 Comments
