Search code examples
sapui5

Data binding with data binding in sap.m.Table using XML views

As I am new to SAPUI5,facing an issue while doing items aggregation to sap.m.Table.I am not getting the data on the output while doing aggregation binding on items of sap.m.Table,please help me out if I did something wrong.

Thanks in advance!

index.html

My XML view:

<Page title="Title">
    <content>
        <Table id="id1"
            items="{
            path:'/'
          }">
            <columns>
                <Column>
                    <header>
                        <Label text="Name"/>
                    </header>
                </Column>
                <Column>
                    <header>
                        <Label text="Color"/>
                    </header>
                </Column>
                <Column>
                    <header>
                        <Label text="Price"/>
                    </header>
                </Column>
            </columns>
            <items>
                <ColumnListItem>
                    <cells>
                        <Text text="{/Name}" />
                    </cells>
                    <cells>
                        <Text text="{/color}" />
                    </cells>
                    <cells>
                        <Text text="{/price}" />
                    </cells>
                </ColumnListItem>
            </items>
        </Table>
    </content>
</Page>

My Model

Solution

  • Remove the "/" from your binding syntax.

    <Text text="{Name}" />
...
<Text text="{color}" />
...
<Text text="{price}" />

    The path sets the collection root. From here you just need to specify the field name (or if a named model then the model name and then the field name).

    run snippet below (you may have to click on the full page link to see the results. Mine was obscured by the info messages?!)

    <!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>BLT Example</title>
      <script
        	src=" https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async">
      </script>

      <!-- XMLView -->
      <script id="myXmlView" type="ui5/xmlview">
         <mvc:View controllerName="MyController"
                xmlns="sap.m"
                xmlns:core="sap.ui.core"
                xmlns:mvc="sap.ui.core.mvc">
            <Table id="id1"
                  items="{path:'/'}">
               <columns>
                   <Column>
                       <header>
                          <Label text="Name"/>
                       </header>
                   </Column>
                   <Column>
                       <header>
                          <Label text="Color"/>
                        </header>
                   </Column>
                   <Column>
                       <header>
                          <Label text="Price"/>
                       </header>
                    </Column>
                 </columns>
                 <items>
                    <ColumnListItem>
                       <cells>
                          <Text text="{Name}" />
                       </cells>
                       <cells>
                          <Text text="{color}" />
                        </cells>
                         <cells>
                           <Text text="{price}" />
                         </cells>
                     </ColumnListItem>
                  </items>
               </Table>
            </mvc:View>
        </script>

        <script>
            sap.ui.getCore().attachInit(function () {
                "use strict";
                sap.ui.define([
                    "sap/ui/core/mvc/Controller",
                    "sap/ui/model/json/JSONModel"
                ], function (Controller, JSONModel) {
                    "use strict";

                    return Controller.extend("MyController", {
                        onInit : function () {

                            var fruit = [
                                {"Name":"Apple", "color": "Red", "price": 702},
                                {"Name":"Orange", "color": "Orange", "price": 55}
                            ];
                            this.getView().setModel(new JSONModel(fruit));
                        }
                    });
                });
                sap.ui.xmlview({
                    viewContent : jQuery("#myXmlView").html()
                }).placeAt("content");

            });
        </script>

    </head>

    <body class="sapUiBody">
        <div id="content"></div>
    </body>
</html>