Skip to Content
Author's profile photo Phanipoorna Avula

SAP S/4HANA UX: Custom List Report FIORI Functionalities – Part 2 – Outbound Navigation

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.

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


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


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

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Vishnu Pankajakshan Panicker
      Vishnu Pankajakshan Panicker

      Great Blog Phani!!!!

      I guess we can also achieve intent based outbound navigation via annotation in ME View.

      @UI:{selectionField: [{position: 10}],
      lineItem: [{label: 'View Change Requests',
      semanticObjectAction: '<action>' }]}
      @Consumption.semanticObject: '<sem object>'


      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Hi to how to send URL parameters for outbound navigation>?

      Author's profile photo Jay Malla
      Jay Malla

      Thank Phanipoorna Avula - Excellent blog!  This really helped us as we had to create a similar app.  We have a dashboard app that goes into a drilldown app.  We went with an analytical list template instead of a List report because we also wanted the Grouping capability.  We tried to this with the annotations to the SalesOrder displayFactSheet but this is not working:


      <Record Type="UI.DataFieldWithIntentBasedNavigation">
      <PropertyValue Property="Label" String="SalesOrder"/>
      <PropertyValue Property="SemanticObject" String="SalesOrder"/>
      <PropertyValue Property="Value" Path="SalesOrder"/>
      <PropertyValue Property="Action" String="displayFactSheet"/>
      <PropertyValue Property="Inline" Bool="true"/>


      "crossNavigation": {
      "inbounds": {},
      "outbounds": {
      "SalesOrder-displayFactSheet": {
      "semanticObject": "SalesOrder",
      "action": "displayFactSheet"

      But with your code, it works great in the controller extension.  Just curious, can you do the same with the annotation for UI.DataFieldWithIntentBasedNavigation?


      Either way - thanks for the excellent blog!






      Author's profile photo Sipra Kumari
      Sipra Kumari

      Hi Phani,


      Where onListNavigationExtension has been defined in manifest? How onListNavigationExtension will get trigger?


      Thank you,