In this part of blog series, i will share my experience of design and implementation of Outbound Navigations in Custom List Report Floor plan Fiori app during our S/4HANA UX Journey.

For a Custom Report of our Customer Existing ECC Landscape, Apart from the Toggle Functionality between Orders and Items which i have shared in the previous blog, there were lot of other functionalities like performing Mass Update, Creating a Delivery, Editing the Sales Order, Displaying a Sales Order etc. We have to revisit the backend existing  solution for Further design in Fiori side in the custom app.

Again i have effectively utilised Design Thinking Methodology by following Discover>Design>Deliver phases. During the Design phase, we actually analysed the Standard SAP apps which were being delivered by SAP so that we can leverage the existing repositories as much as possible in our Custom List Report. By utilising the Fiori Launchpad Shell Navigation, we tried to connect the dots from Custom app to Standard apps.

During the Deliver Phase, we finalised the following apps with the below touch points considered. The result was seamless with great performance and simple clicks to navigate. Our intent here was to eliminate Customisation as much as possible. In every case, i.e., be it SAPGUI app, Factsheet App, List report App parameters are dynamically passed.

Following are the details of the software used for developing 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.

• Developing apps with Fiori Elements
• ABAP Programming Model for Fiori

Functionality 2: Outbound Navigations to SAPGUI App, Factsheet App, List report App etc

For implementing Outbound Navigation in Custom Fiori List Report App, We have used below three scenarios to fulfil the existing requirement in backend ECC system.

Navigation to Sales Order (Factsheet App)

Solution: This navigation is enabled for the Custom List Report App Table Navigation to a Particular Sales Order. In-order to achieve the functionality, i have overridden the standard Inbound Object Page Navigation  with Sales Order Factsheet app.

Navigation to Change Sales Order (SAPGUI App)

Solution: In order to achieve this functionality as per the requirement, I have used  multi selection feature of the Table & Custom Action in the Custom List Report App for navigating  to Change Sales Order SAPGUI App.

Navigation to Create Outbound Delivery (List Report App)

Solution: In order to achieve this functionality as per the requirement, I have used  multi selection feature of the Table & Custom Action in the Custom List Report App for navigating  to  Create Outbound Delivery  List Report App.

In all the above 3 cases, our intent was to leverage the Standard SAP apps in the Custom List Report App Solution by just passing the key parameter (Eg: Sales Order Number) for the respective action.I will share my experience below regarding the development and challenges we faced while implementing the functionality.

The following code has been added to manifest.json for initiating all outbound navigations

manifest.json–>

The following code has been added to manifest.json for linking those navigations with a Custom Action in a Custom Controller of the App.

manifest.json–>

Navigation to Sales Order Factsheet FIORI App

As per the solution design, In order to open a Sales Order Factsheet from the Custom app, we have overridden the Standard object page Navigation of List report with the Custom Navigation to Factsheet app.

If any one of the Sales Order is accessed using Standard List navigation of the table as shown above, Sales Order  Factsheet Standard App will be opened by passing the selected Sales Order number as a parameter dynamically.

I have added the following code in the Custom Controller defined in manifest file. As shown in the code, i have actually overridden the Standard Object page Navigation with my own design (here it is Factsheet object page). Hence onListNavigationExtension method of the List report has been overridden with the respective outbound navigation and parameter is passed as shown below.

Navigation to Change Sales Order SAPGUI App

As per our analysis during the design phase of this UX Journey, for editing a Sales order we found there is no Standard Fiori app available with our S/4HANA 1709 Release. Hence we decided to reuse the Standard SAPGUI App through the navigation.

As shown below, Custom action for Editing Sales order has been defined in the List Report floorplan.

Once the Action is performed, Change Sales Order SAPGUI app will be opened by passing the Sales Order number as a parameter dynamically.

I have added the following code in the Custom action of the Custom Controller defined in the manifest file.

During this journey unlike the actual Fiori apps, we are not able to open the Change sales order SAPGUI even though dynamically passed the Key parameter through code as shown above.

After some analysis, we found that for SAPGUI app (Unlike Fiori app) we need to specially handle few parameters at Target Mapping of the Respective Catalog. I have added the following parameter in SAPGUI app target mapping for bringing the dynamic behaviour.

Navigation to Create Outbound Delivery List Report FIORI App

As shown below, one more Custom action for Creating Delivery has been defined in the List Report floorplan.

Once the Action is performed, Create Outbound Delivery  List report Fiori app will be opened with the key parameter passed as shown below into the Smart Filter of that app.

I have added the following code in the Custom Controller to navigate and to dynamically pass the parameter.

With the above functionality, we have demonstrated to our customer on how well we can use S/4HANA UX  – “By Connecting Dots ” – to cater a requirement like this by reusing the Existing Repositories to maximum extent instead of Customising everything as per the existing ECC backend Report. Also the effort to develop these kind of navigation are less. By connecting all the dots together have achieved a great user experience with simple clicks.

With this experience, I will concentrate majorly on designing a solution with Fiori elements like List Report, Overview Page, Object Page, Analytical List Page by connecting them together for giving a Great User Experience to the end-users.

Functionality 3: Populating Custom Default Values to a Smart Filter of List Report.

Find out more details on developments using Fiori Elements in the Fiori elements wiki