Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member246153
Active Contributor
6,367
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.
7 Comments
Vigneswaran_Mathivanan
Product and Topic Expert
Product and Topic Expert
Nice Srini..
former_member246153
Active Contributor
0 Kudos
Thanks Vignesh..
former_member189320
Participant
Very Informative
former_member246153
Active Contributor
0 Kudos
Thanks Nirmal..
govardan_raj
Contributor
Nice Srinivas
RaminS
Active Participant
0 Kudos
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
BrendanFarthing
Participant
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");