Technical Articles
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.
Nice Srini..
Thanks Vignesh..
Very Informative
Thanks Nirmal..
Nice Srinivas
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
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.