SapUI5 - How can i bind an object Master-Detail page? - sapui5

Question

I'm trying to bind and present an element to a detail page, but no success about it.
the master page is displayed well and present the data.
but when i want to present the item on a detail page the data doesn't displayed.
*for fetching all the data i use an API request
I'm not sure what am i doing wrong.
Heres the code:
Controller.Overview.js
var data = {id: 19265, typeId: 5, foreignKeyId: 1, foreignKeyTextId: "316e2c71-d1d1-f73c-4696-70912d6cf240", value: 0, Name: "jim"}
,{id: 19268, typeId: 5, foreignKeyId: 1, foreignKeyTextId: "316e2c71-d1d1-f73c-4696-70912d6cf240", value: 0, Name: "john"}
var newArr2 = {"Overview" : data};
oModel.setData(newArr2);
oView.setModel(oModel);
onListItemPressed : function(oEvent){
var oItem, oCtx;
oItem = oEvent.getSource();
oCtx = oItem.getBindingContext();
this.getRouter().navTo("overviewItem",{
OverviewId : oCtx.getProperty("OverviewId")
});
}
Overview.xml
<List id="dataJS" headerText="dataJS" items="{/Overview}">
<items>
<StandardListItem
title="{foreignKeyTextId}"
iconDensityAware="false"
iconInset="false"
type="Navigation"
press="onListItemPressed"/>
</items>
</List>
controller.Overviewitem.js
return BaseController.extend("com.sap.it.cs.itsupportportaladmin.controller.feedbackanalytics.OverviewItem", {
_formFragments: {},
onInit: function () {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("overviewItem").attachMatched(this._onRouteMatched, this);
},
_onRouteMatched : function (oEvent) {
var oArgs, oView;
oArgs = oEvent.getParameter("arguments");
oView = this.getView();
oView.bindElement({
path : "/Overview(" + oArgs.OverviewId + ")",
events : {
change: this._onBindingChange.bind(this),
dataRequested: function (oEvent) {
oView.setBusy(true);
},
dataReceived: function (oEvent) {
oView.setBusy(false);
}
}
});
},
_onBindingChange : function (oEvent) {
// No data for the binding
if (!this.getView().getBindingContext()) {
this.getRouter().getTargets().display("notFound");
}
}
});
OverviewItem.xml
<mvc:View
controllerName="com.sap.it.cs.itsupportportaladmin.controller.feedbackanalytics.OverviewItem"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:f="sap.ui.layout.form"
busyIndicatorDelay="0">
<Page
id="overviewPage"
title="{Name}"
showNavButton="true"
navButtonPress="onNavBack"
class="sapUiResponsiveContentPadding">
<content>
<Panel
id="employeePanel"
width="auto"
class="sapUiResponsiveMargin sapUiNoContentPadding">
<headerToolbar>
<Toolbar>
<Title text="{OverviewId}" level="H2"/>
<ToolbarSpacer />
<Link text="{i18n>FlipToResume}" tooltip="{i18n>FlipToResume.tooltip}" press="onShowResume" />
</Toolbar>
</headerToolbar>
</Panel>
</content>
</Page>
</mvc:View>

Answer 1

I see two issues:
/Overview(" + oArgs.OverviewId + ")" will not work as your model an array and not object as per code in Controller.Overview.js:
var data = {id: 19265, typeId: 5, foreignKeyId: 1, foreignKeyTextId: "316e2c71-d1d1-f73c-4696-70912d6cf240", value: 0, Name: "jim"}
,{id: 19268, typeId: 5, foreignKeyId: 1, foreignKeyTextId: "316e2c71-d1d1-f73c-4696-70912d6cf240", value: 0, Name: "john"}
var newArr2 = {"Overview" : data};
oModel.setData(newArr2);
// this resolves to :
newArr2 = {"Overview" : [ {id: 19265...}, {id: 19268...} ]}
oView.setModel(oModel);
You will have to find index of Clicked item and do :
/Overview/" + oArgs.OverviewIndex resulting in somethin like: Overview/0 or Overview/1 etc.
Also, you have set the model only to your master list.
oView.setModel(oModel); where oView is in Controller.Overview.js.
Please set the model to your complete split-app for binding context to work correctly.
===========
Update after Discussion: Store you data as an Object:
// id as the key. SO, you can easily fetch person.
var data = {
"19265" : {id: 19265, typeId: 5, foreignKeyId: 1, foreignKeyTextId: "316e2c71-d1d1-f73c-4696-70912d6cf240", value: 0, Name: "jim"},
"19268" : {id: 19268, typeId: 5, foreignKeyId: 1, foreignKeyTextId: "316e2c71-d1d1-f73c-4696-70912d6cf240", value: 0, Name: "john"}
};
And Set binding on click as:
oView.bindElement({
path : "/Overview/" + oArgs.OverviewId + "",
events : {
change: this._onBindingChange.bind(this),
dataRequested: function (oEvent) {
oView.setBusy(true);
}, ... rest of code.