Having trouble in routing with parameters in SAPUI5 - sapui5

Question

I am trying to show the data of a particular item in a list when ,clicked upon , on the next page (view)
Here Overview.view.xml is the default view with a clickable list connected to an oData model.
Next is the controller for Overview navigating to the next page i.e. Overview.controller.js.
The next page is Detail.view.xml
I want to show details of clicked item in this page.
#Overview.view.xml
<mvc:View controllerName="root.demo.controller.Overview" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m">
<App >
<pages>
<Page title="{i18n>title}">
<content>
<List headerText="list" class="sapUiResponsiveMargin" width="auto" items="{HANA>/person}">
<items>
<ObjectListItem title="{HANA>ID} x {HANA>FIRSTNAME}" type="Navigation" press="onPress"/>
</items>
</List>
</content>
</Page>
</pages>
</App>
</mvc:View>
#Overview.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("root.demo.controller.App", {
onPress: function (oEvent) {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("detail");
}
});
});
#Detail.view.xml
<mvc:View xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page title="{i18n>detailPageTitle}">
<ObjectStatus title="PAGE 1"
/>
</Page>
</mvc:View>

Answer 1

If you have different Entity Sets with association you need to send the key of the association to the second view and there create the binding towards the assocaited entity set
If not you need to send the object to the second view
Either way you need to navigate with parameters
In the manifest file you need to specify the routing
"routes": [
{
"name": "TargetMaster",
"pattern": "RouteMaster",
"target": [
"TargetMaster"
]
},
{
"pattern": "Detail/{storePath}",
"name": "Detail",
"target": "Detail"
}
],
"targets": {
"TargetMaster": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewName": "Master"
},
"Detail": {
"viewType": "XML",
"viewName": "Detail"
}
}
In the Overview Controller you need to create the navigation similarly to
onListItemPress: function(oEvent){
var oItem = oEvent.getSource();
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("Detail",{
storePath: oItem.getBindingContext().getProperty("Store")
});
}
you can find more information on the official documentation here