SAPUI5 odata binding for deep structure to vbox items

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.

You have missed the forward slash in binding <VBox id='checkBoxes' items="{/Answers}"> — inizio
Hi inizio. Thank you for the reply. I have tried this before and again now. Changing it to "{/Answers}" doesn't even display the checkboxes. At least without the "/" it displays the correct number of check boxes but without the text. So I'm thinking it's the '{Text}' binding that is incorrect. — Faaiez Sallie
Does this answer your question? How to make use of navigation property? — Boghyon Hoffmann

Eldwin Eldwin · Accepted Answer · 2021-03-22T09:06:34

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:

SAPUI5 odata binding for deep structure to vbox items

1 Answers