How to bind oData to table with parameter - odata

Question

I have oData by path Northwind Customers('ANATR')/Orders
I can't bind it to table Customer orders
Here I have /Customers('" + oArgs.customerId + "')/Orders like in oData link
OrderList.controller.js
sap.ui.define([
"sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
"use strict";
return BaseController.extend("sap.ui.demo.nav.controller.customer.OrderList", {
onInit: function () {
var oRouter = this.getRouter();
oRouter.getRoute("customer").attachMatched(this._onRouteMatched, this);
},
_onRouteMatched : function (oEvent) {
var oArgs, oView;
oArgs = oEvent.getParameter("arguments");
oView = this.getView();
oView.bindElement({
path : "/Customers('" + oArgs.customerId + "')/Orders",
events : {
change: this._onBindingChange.bind(this),
dataRequested: function (oEvent) {
oView.setBusy(true);
},
dataReceived: function (oEvent) {
oView.setBusy(false);
}
}
});
}
});
});
And here I link it to bind data {path : '/Orders'} how to insert {CustomerID} parameter?
OrderList.view.xml
<mvc:View
controllerName="sap.ui.demo.nav.controller.customer.OrderList"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<Page
id="orderListPage"
title="{i18n>OrderList}"
showNavButton="true"
navButtonPress=".onNavBack"
class="sapUiResponsiveContentPadding">
<Panel accessibleRole="Region">
<headerToolbar>
<Toolbar>
<Title text="{i18n>orderListTitle}"/>
<ToolbarSpacer/>
<SearchField
width="50%"
search=".onFilterOrders"/>
</Toolbar>
</headerToolbar>
<Table
id="orderList"
class="sapUiResponsiveMargin"
width="auto"
items="{
path : '/Orders'
}">
<columns>
<Column
hAlign="End"
minScreenWidth="Small"
demandPopin="true"
width="4em">
<Text text="{i18n>columnOrderID}"/>
</Column>
<Column>
<Text text="{i18n>columnCustomerID}"/>
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="false">
<Text text="{i18n>columnOrderDate}"/>
</Column>
<Column
hAlign="End">
<Text text="{i18n>columnPrice}"/>
</Column>
</columns>
<items>
<ColumnListItem
type="Navigation"
press=".onPress">
<cells>
<ObjectNumber number="{OrderID}" emphasized="false"/>
<ObjectIdentifier title="{CustomerID}"/>
<Text text="{OrderDate}"/>
<ObjectNumber
number="{
parts: [{path: 'Freight'}],
type: 'sap.ui.model.type.Currency',
formatOptions: {
showMeasure: false
}
}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</Panel>
</Page>
</mvc:View>

Answer 1

path : '/Orders' is an absolute binding (slash at the beginning). This means UI5 will try to fetch https://services.odata.org/V2/Northwind/Northwind.svc/Orders.
Also you bound your view to a list of things. In general, this is not what you want.
What you want is to bind your view against a single Customer entity
oView.bindElement({
path : "/Customers('" + oArgs.customerId + "')",
events: {
...
}
});
and then use relative binding (no slash at the beginning) for the Orders:
items="{
path : 'Orders'
}"