Search code examples
sapui5

How to bind data from controller to Xml View table

I am having a table with columns as below:

<Table id="table2" visibleRowCount="5" rows="{
        path: '/ProductCollection',
        sorter: {path: 'serialId', descending: false}}">
        <columns>
          <Column width="50px">
            <m:Text text="Employee ID" />
            <template>
              <m:Text text="{employeeId}" wrapping="false"  />
            </template>
          </Column>
          <Column width="200px">
            <m:Text text="EmployeeName" />
            <template>
              <m:Text text="{employeeName}" wrapping="false" />
            </template>
          </Column>
        </columns>
</Table>

And JSON Data is :

var oData = {
            ProductCollection: [
                  {
                   employeeId: "1"
                   employeeName:"xyz"
                   },
                   {
                   employeeId: "1"
                   employeeName:"xyz"
                   },
                   {                 
                   employeeId: "1"
                   employeeName:"xyz"
                   }

               ]
          };

And i have tried binding as :

var oModel = new sap.ui.model.json.JSONModel();
      oModel.setData(ProductCollection);
      this.getView().setModel(oModel);

I am getting the data but into model but unable to display values in table getting empty rows.I am facing problem in binding(xml view)any guiding links or a solution would be much helpful , TIA

Solution 
  • <mvc:View controllerName="reg.cmdd.Consumer.controller.Home" xmlns="sap.ui.table" xmlns:mvc="sap.ui.core.mvc" xmlns:u="sap.ui.unified"
    xmlns:c="sap.ui.core" xmlns:m="sap.m" height="100%">
    <m:Page showHeader="false" enableScrolling="false" class="sapUiContentPadding">
        <m:content>
            <Table id="table2" visibleRowCount="5" rows="{ path: '/ProductCollection', sorter: {path: 'serialId', descending: false}}">
                <columns>
                    <Column width="50px">
                        <m:Text text="Employee ID"/>
                        <template>
                            <m:Text text="{employeeId}" wrapping="false"/>
                        </template>
                    </Column>
                    <Column width="200px">
                        <m:Text text="EmployeeName"/>
                        <template>
                            <m:Text text="{employeeName}" wrapping="false"/>
                        </template>
                    </Column>
                </columns>
            </Table>
        </m:content>
    </m:Page>
</mvc:View>

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";

    return Controller.extend("reg.cmdd.Consumer.controller.Home", {
        onInit: function () {
            var oData = {
                ProductCollection: [{
                        employeeId: "1",
                        employeeName: "xyz"
                    }, {
                        employeeId: "1",
                        employeeName: "xyz"
                    }, {
                        employeeId: "1",
                        employeeName: "xyz"
                    }

                ]
            };
            var oModel = new sap.ui.model.json.JSONModel();
            oModel.setData(oData);
            this.getView().setModel(oModel);
        }
    });
});

    output

    Your code is fine, the problem must be elsewhere

    EDIT: check this line:

    oModel.setData(ProductCollection);

    it should be

    oModel.setData(oData);