SAPUI5 odata binding for deep structure to vbox items - sapui5

Question

JSON data:
{
"QuestionID": 1,
"Question": "Question One",
"Note": "Note: There are 2 correct answers to this question.",
"Type": "C",
"Answers": [
{
"Id": 1,
"Text": "Choice 1"
}, {
"Id": 2,
"Text": "Choice 2"
}, {
"Id": 3,
"Text": "Choice 3"
}, {
"Id": 4,
"Text": "Choice 4"
}
]
}
In my view I get the correct number of checkboxes for the answers but the "Text" does not show.
`<VBox id='checkBoxes' items="{Answers}">
<items>
<CheckBox text='{Text}' selected='{selected}' />
</items>
</VBox>`
Any assistance in how to bind the properties for the Answers will be appreciated.

Answer 1

In your VBox view code, ensure you have templateShareable:false. Then your nested binding will work like a charm.
Here's an example:
View
<CustomListItem>
<VBox class="sapUiSmallMargin">
<HBox justifyContent="SpaceBetween" class="sapUiTinyMarginBottom sapUiTinyMarginEnd">
<Title text="{noteAttach>CreatorName}" />
<Text text="{parts:[{path:'noteAttach>NotesType'},{path:'noteAttach>CreatedOn'}], formatter:'.formatter.formattedDate'}" />
</HBox>
<Text class="sapUiTinyMarginBottom" text="{noteAttach>NotesData}" />
<VBox items="{path:'noteAttach>Files', templateShareable:false}">
<HBox>
<core:Icon class="sapUiTinyMarginEnd" src="{path:'noteAttach>DocType', formatter:'.formatter.customFileIcon'}" />
<Link href="{parts:[{path:'noteAttach>ObjectId'},{path:'noteAttach>Viewname'},{path:'noteAttach>Title'}], formatter:'.formatter.fileDownloadHref'}" target="_blank" text="{path:'noteAttach>Title'}" />
</HBox>
</VBox>
</VBox>
</CustomListItem>
Controller (for those who also have to modify the OData they receive from backend, like I had to)
this.getOwnerComponent().getModel('noteAttach').read("/NotesandattachmentSet", {
filters: aFilters,
success: function(oData) {
/*
the reason why we create a new object property called Files and in it store an unnumbered Title is bc of the need to do binding with deep/nested structures
if we dont do this, we end up with up to 10 slots of white space for each entry. this is the only way to do this. all other methods mess up search, sort, and filter functionalities
*/
var aODataResults = oData.results;
var iODataResultsLength = aODataResults.length;
for (var j = 0; j < iODataResultsLength; j++) { //sift through each DataEntry in the model
var aObjectFiles = aODataResults[j].Files = []; //create 'Files' property in each object entry
for (var i = 1; i < 11; i++) { //in each DataEntry, find ppty Title1,Title2...up to Title10 & remove the ppties thatre empty. if not empty, create a downloadLink & icon for it
var sObjectFileTitle = aODataResults[j]["Title" + i];
if (sObjectFileTitle.length !== 0) aObjectFiles.push({
Title: sObjectFileTitle,
DocType: aODataResults[j]["DocType" + i],
ObjectId: aODataResults[j]["ObjectId"],
Viewname: aODataResults[j]["Viewname"],
});
}
}
that.getView().setModel(new JSONModel(aODataResults), "noteAttach");
that.getView().setBusy(false);
},
error: function(oError) {
that.parseErrorMessage(oError);
that.getView().setBusy(false);
}
How My Model Looks Like:
How She Looks: