SAPUI5 Data Binding on SimpleForm - data-binding

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

Answer 2

binding should be like this
<Label text="Name" />
<Input value="{mock>Name}" />
<Label text="Surname" />
<Input value="{mock>Surname}"/>
if its only one object in the mock. if not working put the controller code where you setting model to the view