Saturday, April 23, 2016

UI5 JS view and xml view binding format with sap.m.list

When binding sap.m.list to json data, the path format is different between xml view and js view.

For xml view, the item is specified with curly bracket as below
<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <List
      headerText="{i18n>invoiceListTitle}"
      class="sapUiResponsiveMargin"
      width="auto"
      items="{invoice>/Invoices}" >
      <items>
         <ObjectListItem
            title="{invoice>Quantity} x {invoice>ProductName}"/>
      </items>
   </List>
</mvc:View>

But in jsview, the item path is specified without the bracket as below. Note inside the ObjectListItem, the binding to title property still need the curly bracket.

   var list = new sap.m.List("test_list", {
       headerText: "{i18n>invoiceListTitle}",
       width : "auto",
       items :{
           path:"invoice>/Invoices", 
           template: new sap.m.ObjectListItem({
                                 title : "{invoice>Quantity} x {invoice>ProductName}"

                        }) 
       }
            });

No comments:

Post a Comment