In this blog series, I will be explaining about my experience and the functionalities which I have implemented for our Customer using FIORI 2.0 List Report Floorplan during S/4HANA UX Journey.
My Customer Requirement: Apart from analysing the end to end Fiori UX Capabilities of SAP S/4HANA, Most importantly If they migrate the Existing ECC to S/4HANA Landscape, how well the existing Custom Reports which were being used for Day to Day activities will fit into S/4HANA Landscape. Also it was about how the solution will fit into New User Experience of SAP S/4HANA.
For this assignment, we have not only just concentrated on setting up Business Processes but also on User and the Experience.
We tried to touch the boundaries of FIORI Capabilities during this assignment and assessed the Tangible and Intangible benefits of what SAP has Claimed. I will be explaining about few functionalities in Custom Apps which we implemented in this blog series.
We started this assignment with couple of Custom reports of existing ECC landscape and then started our journey for implementing Custom List Report FIORI apps in S/4HANA Landscape from Scratch.
We followed Discover>Design>Deliver UxaaS methodology for efficiently designing the solution by following a Mobile First Approach.By using SAP BUILD tool, lot of gaps in terms of UI design has been finalised before starting the actual development. It also helped us to Pre-set the expectations of the Customer for the new custom apps. During Deliver Phase, we have used SAP Cloud Platform Web IDE for developing the finalised design of Custom apps.
Following are the details of the software used for building this solution.
- SAPUI5 :1.48.9
- SAP NetWeaver AS ABAP 7.52
- SAP S/4HANA 1709
- SAP Cloud Platform Web IDE Full Stack version 180104
Following documentation has helped me in designing the Solution by assesing the Key Features of List Report Fiori Element.
During this Journey, I have finalised List Report Fiori Element as a best fit for the Scoped-in Custom Reports by considering its Sleek design, Performance, Adaptability across all landscapes. Also due to the fact of working on Large Data-sets in the report. As a UX Consultant, i am not able to find anything apart from List report of what SAP has offered. Hence we finalised it as a best fit to move forward. I personally liked its performance and adaptability across the devices, be it mobile, desktop or Tablet. We are now even looking forward for its Road map of Visual Filtering in Future.
I have used UI Annotations which will only exclusively run on Smart Controls or Smart Fiori Elements like List Report, Analytical List Page, Overview Page and Object Page to render the UI Efficiently – "The modern way of Coding UI for linking Smart Controls to the Data-sets Dynamically."
With the outcome of this assignment, as a UX Consultant i look forward to maximise the usage of Smart Fiori Elements like List Report, Analytical List Page, Overview Page, Object Page for designing a solution as it offers a Seamless User Experience with simple clicks.
I have implemented many functionalities in the Custom List Report Fiori Apps as per the existing functionalities in backend system. Apart from the common features like Variant Management, Grouping of Filters, Hidding Filters, Drop-downs, Value Helps enabled, below are the major functionalities implemented during the assignment.
Functionality 1: Enabling Toggle Functionality in List Report (this blog)
Functionality 2: Outbound Navigations to SAPGUI App, List report App, Factsheet App
Functionality 3: Populating Custom Default Values to a Smart Filter of a Custom List Report App
Functionality 1: Enabling Toggle Functionality in List Report:
In the existing backend custom report, we have a toggle view between Orders and Items of a Custom Report.
Toggle functionality in the List report has been enabled as shown below.
I have added the following code in the Custom App UI Project repository as shown below.
manifest.json
UI Annotations (annotations.xml) for rendering Multi tab/Toggle Functionality in List Report -->
Orders View:
Items View:
Note: We can use ABAP CDS Annotations for dynamic binding, Implementing key functionalities of the Smart Controls. However for the current project scope, we migrated the technical objects of Custom Code to S/4HANA system.So we have used those technical objects to build a native way of ODATA Service. In the upcoming phases, we will replace the entire objects with Custom CDS views and annotations.
By using the Toggle Functionality, we have introduced our customer to use Key User Extensibility of S/4HANA UX for this custom application. By using the Variant management functionality of the app, a user can personalise their Filters/Table according to the needs. Variants can be shared to other users as well.
Functionality 2: Outbound Navigations to SAPGUI App, List report App, Factsheet App
Functionality 3: Populating Custom Default Values to a Smart Filter of List Report.
Look out for more details on developments using Fiori Elements in the Fiori elements wiki.
- SAP Managed Tags:
1 Comment
