CODEWITHSUNDEEP
jsonxmldata-bindingsapui5
polaris
polaris

Reputation: 339

how to bind data to a Grid Layout in sapui5 xml view

I have a list of StandardListItem elements under a Grid and would like to bind them to a json file using a json model. This is how I do the binding in my controller. I'm confident this part is correct as I'm doing it this way for a table.

var pricingModel = new JSONModel("./model/evaluation.json");

//set model(s) to current xml view
this.getView().setModel(pricingModel, "pricingModel");

This is a piece of my xml view where I'm trying to bind my data

<l:Grid class="sapUiSmallMarginTop"
    id="priceEvalGridContainer" visible="false"
    binding="{/PriceEstimate}">
<l:content>
<l:VerticalLayout id="priceEvalCol1" width="100%">
    <StandardListItem  title="NSN"
                       info="{NSNID}"/>
    <StandardListItem  title="DLA Price Estimate (DLA)"
                       info="{DLAPriceEstimate}"/>
    <StandardListItem  title="Proposed Price"
                       info="$20.00" />
</l:VerticalLayout>
<l:VerticalLayout id="priceEvalCol2" width="100%">
    <StandardListItem  title="$ Difference From DLA" info="$1.50" />
    <StandardListItem  title="Total Price Difference" info="$135.00" />
    <StandardListItem  title="PPI Price Adjusted For Inflation"    info="$18.59" />
</l:VerticalLayout>
</l:content>
</l:Grid>

I have hard-coded a lot of the values as I haven't been able to properly connect the data. The only items being tested for now are info="{NSNID}" and info="{DLAPriceEstimate}"

I've seen examples on how to bind a StandardListItem within a List or a Grid with other type of objects, but haven't seen it being done together.

I tried doing the binding in the following way but it didn't work for me.

<l:Grid class="sapUiSmallMarginTop"
    id="priceEvalGridContainer" visible="false"
    binding="{
             path: '/PriceEstimate'
              }">

The app runs with no problems and there are no errors being shown, however the data does not show up in the grid. It's just blank.

Upvotes: 0

Views: 2063

Answers (1)

Sunil B N
Sunil B N

Reputation: 4225

this.getView().setModel(pricingModel, "pricingModel");

Since you are using named model, use:

 binding="{pricingModel>/PriceEstimate}"

And if this data JSON is an array, you may have to give index in the content like:

info="{pricingModel>0/NSNID}"

else: info="{pricingModel>NSNID}" will do. (Similarly for others) Either way, it depends on the data. So add how pricingModel looks.

Upvotes: 1

Related Questions