bindProperty to Single OData Entity

Question

In UI5, is it possible to bind a single attribute of a single entity to a control property if your model is an OData? Binding works ok if you bind an aggregation to an entity set but does not seem to work with properties to entities. Say I have an entity set called TestSet. Each "Test" has attribute Key and Name. I'd like to bind the title of a table to the Name of one of the entities on that set.

What's wrong with the following code?

createContent: function(oController) {
    jQuery.sap.require("sap.ui.table.Table");
    var oTable = new sap.ui.table.Table({title: "{/TestSet('01')/Name}"});
    oTable.setModel(new sap.ui.model.odata.ODataModel("/path/to/root/of/odata/"));
    oTable.bindProperty("title", "/TestSet('01')/Name");
    return oTable;
},

OData works ok when tested in isolation. /TestSet returns set of Test entities and /TestSet('01') returns one of those entities.

I've tested binding to /Name, /TestSet('01')/Name, etc. Nothing seems to work.

Answer 1

According to the developer guide ...

Requests to the back end are triggered by list bindings, element bindings, and CRUD functions provided by the ODataModel. Property bindings do not trigger requests.

Thus, instead of trying to bind data directly on the properties of the target control absolutely, we can leverage ContextBinding / "Element Binding" on a container control or on the target control itself, and bind the data on the properties of the target control or even further on child controls relatively (> instead of >/ in path).

We can bind a single entity by using..

• bindElement/ bindObject in JS:

  const oTable = new Table({ // required from "sap/ui/table/Table"
    title: "{Name}",
  }).bindElement("/TestSet('01')"); // returns the control instance
  

• Or binding in an XMLView like this

  <Table
    binding="{/TestSet('01')}"
    title="{Name}"
  > ...
  

  In declarative views (such as XML) however, there is currently no way to supply the entity path dynamically via .createKey. So use binding with caution.

---

Worth mentioning are also the binding events where we can have a better control over the data being requested, received, etc.. The following events apply to all kinds of bindings (not only element binding)

binding="{
  path: '/TestSet(\'01\')',
  events: {
    dataRequested: '.onTableDataRequested',
    dataReceived: '.onTableDataReceived',
    change: '.onTableDataChange'
  }
}"

Answer 2

You can effect a property binding like this by binding the control to the specific element (hierarchy, as it were, is aggregation->element->property). So taking your example, you could do this:

var oTable = new sap.ui.table.Table({
  title : "{Name}"
});

and then when you do this:

oTable.bindElement("/Products(0)");

the HTTP call is made by the OData model mechanism and the value appears in the table's title property.

Here's a running example, using Northwind.