SAPUI5 Data Binding on SimpleForm

Question

I am having issues trying to bind data on a simple form. I am using a mock server and have successfully bind data to a list/table

My manifest.json looks like this

"mock": {
    "dataSource": "mainService"
}

My mockdata(UserDetailsSet.json) looks like this

[{
    "ID_PassNum": "cu001",
    "Title": "Mr",
    "Name": "Don",
    "Surname": "Ownery",
    "ResType": "SA",
    "Country": "South Africa"
}]

My SimpleForm fields looks like this

<Label text="Name" />
<Input value="{mock>/UserDetailsSet/0/Name}" />
<Label text="Surname" />
<Input value="{mock>/UserDetailsSet/0/Surname}"/>

What am I missing?

Answer 1

You seem to be using an ODataModel. In ODataModels binding against collections/aggregations is not as easy as it is with a JSONModel. You can't access/bind properties with the collection/index/property syntax.

How ODataModels store data

If you load an entity set like your UserDetailSet the data stored in you ODataModel like look somewhat like this:

{
  UserDetailSet('00001'): { ... },
  UserDetailSet('00002'): { ... },
  UserDetailSet('00003'): { ... },
  UserDetailSet('00004'): { ... }
}

Whereas '00001' and so forth is the entities key. If you create an aggregation binding on UserDetailSet the ODataListBinding will handle translating the above data into a context per item.

Property Binding on ODataModel

Your binding would have to look like this:

<Label text="Name" />
<Input value="{mock>/UserDetailSet('00001')/Name}" />
<Label text="Surname" />
<Input value="{mock>/UserDetailSet('00001')/Surname}"/>

Dynamic Property Binding on ODataModel

Or - to be a little more dynamic - bind like this (Note: the bindings are relative now, no leading /):

<SimpleForm id="MyForm">
  <Label text="Name" />
  <Input value="{mock>Name}" />
  <Label text="Surname" />
  <Input value="{mock>Surname}"/>
</SimpleForm>

and dynamically use bindElement on the SimpleForm itself:

this.getView().byId("MyForm").bindElement({
  path: "/UserDetailSet('"+ sUserID +"')",
  model: "MyOdataModelID",
  // use OData parameters here if needed
  parameters: {
    "expand": "UserAdress"
  },
  // react on binding events here
  events: {
    change: function (oEv) { },
    dataRequested: function (oEv) { },
    dataReceived: function (oEv) {}
  }
});

BR Chris