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.
