Skip to Content
Technical Articles
Author's profile photo Srinivasan Velumani
Srinivasan Velumani
June 24, 2021 1 minute read

Handling Startup Parameters dynamically in SAP Fiori

Background

In my scenario, I have two Fiori app’s which are configured in the FLP.  On click of the Customer id link from App1 it should navigate to the App2 with the URL parameters holding the Customer id , Division etc. These URL parameters has to be consumed and used inside the App2.

Approach

Handling of Startup parameters that are encoded in the URL.

This blog is the working version of this article.

Passing Startup Parameters from App1

I am getting the parameters which i need to pass to App2 on the press event of Customer ID. And i am using the Cross Application Navigation service to navigate to the App2 with its semantic object and action.

App1.Controller.js:

onCustomerIdPress: function (oEvent){
let selCustomer=oEvent.getSource().getText(), // This gives me the ID of the Customer.
division= this._viewModel.getProperty("/division"); // This gives me the Division ID

let oCrossAppNav = sap.ushell.Container.getService("CrossApplicationNavigation");

oCrossAppNav.toExternal({
  target : { semanticObject : "XXXXX", action : "ZZZZZ" },
  params : { CustomerId : selCustomer , Division : division}
 });
}

So the URL on browser while navigation to App2 will be looking as below

https://domain.com#XXXXX-ZZZZZ?CustomerId=0000000&Division=00000

Consuming Startup Parameters in App2

Here i am getting the values which are passed from the App1 directly inside the App2 view’s Controller’s.

App2.Controller.js:

onInit: function(){

........
........

let oStartupParameters = this.getOwnerComponent().getComponentData().startupParameters;

if (oStartupParameters && oStartupParameters.CustomerId && oStartupParameters.Division) {

    let customerId=oStartupParameters.CustomerId[0],

     division=oStartupParameters.Division[0];

   }

}

If you want to test the Consuming logic in a stand-alone app inside the Local Environment you can use the below code in the index.html. This code will get the query parameters from the URL and set it to the startup parameters of the component.

Passing Query Parameters in a Stand-alone Index Page (optional)

<head>
.....
.....

<script>
  var oStartupParameters = jQuery.sap.getUriParameters().mParams;
  var oComponent = sap.ui.getCore().createComponent({
      name: "com.yyyy.componentname",
      settings: {
                componentData: { startupParameters: oStartupParameters }
            }
    });
  new sap.ui.core.ComponentContainer({
    component: oComponent
   }).placeAt("content");
</script>

</head>
<body class="sapUiBody">
<div id="content"></div>
...
...
</body>

So when you run the index.html file from WebIDE, we need to pass the query parameters manually in the URL to test the application.

Note: This Start-up parameters can also be consumed on the component file. For more information on Handling the Startup Parameters please refer this article.

 

Conclusion

Hope this blog will help you in handling the dynamic parameters between the Fiori apps.

Please feel free to ask your questions or post your comments.

Thanks.

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vigneswaran Mathivanan
      Vigneswaran Mathivanan

      Nice Srini..

      Author's profile photo Srinivasan Velumani
      Srinivasan Velumani
      Blog Post Author

      Thanks Vignesh..

      Author's profile photo Nirmal Sivakumar G
      Nirmal Sivakumar G

      Very Informative

      Author's profile photo Srinivasan Velumani
      Srinivasan Velumani
      Blog Post Author

      Thanks Nirmal..

      Author's profile photo GOVARDAN RAJ SHAMANNA
      GOVARDAN RAJ SHAMANNA

      Nice Srinivas

      Author's profile photo Ramin Shafai
      Ramin Shafai

      What if App B needs to route to a different page other that it's default page, based on a parameter passed?

      In that case, you have to handle startup parameters in the Component.js of App B (not any view).

      But how do you reroute to a different page in Component.js?

      As soon as you do this.getRouter().initialize()  it will route to the default page.

       

      Thanks

      Author's profile photo Brendan Farthing
      Brendan Farthing

      Hi Ramin,

      If you initialise your router with the 'ignore initial hash' parameter set to true the router will not try to action the initial hash or load the default view.

      Then you can do a navTo straight afterwards and it will only load the view you are navigating to, it will not load the default view.

      e.g.

      var oRouter = this.getRouter();
oRouter.initialize(true);
oRouter.navTo("routeToOtherView");