Search code examples
data-bindingsapui5

Bind "one to many" OData association to aggregation in UI5

I'm reading some data from a OData service. Within the controller, I do the following:

this.getView().bindElement({
  path: "/HeaderData(key1='key1',key2='key2')",
  parameters: { expand: 'toItems' }
});

The data is read correctly and the model within the console looks like:

HeaderData(key1='key1',key2='key2'): {
  HeaderField1: "value1"
  HeaderField2: "value2"
  toItems: {__list: Array(2)}
}

Now, I want to bind the entries within the "toItems" collection to a table. I've tried the following but it's not working because "toItems" is a collection.

<Table items="{
  path: '/HeaderData',
  parameters: { expand: 'toItems' }
}">

This one is also not working:

<Table items="{
  path: '/HeaderData/toItems'
}">

How to bind the items correctly? The table could not be accessed via ID, so the binding must be within the XML view.

Solution

  • Simply bind the navigation property to the aggregation:

    <Table items="{toItems}">

    Make sure to omit / at the beginning of the binding path since it's supposed to be resolved relative to the bound entity / context (that was given by bindElement). To learn more, see topic Binding Path.

    The ODataListBinding will then send a request to the items accordingly if they're not available already.