I have created a table in the xml view, I would like to bind the table in the controller so it can be modified dynamically depending on who is loading the app.

XML VIEW

<Table inset="false"
            id="pTable">    
            <columns>
                <Column id="year" width="auto">
                    <Text text="Year" />
                </Column>
                <Column id="rating" width="auto">
                    <Text text="Performance Rating"/>
                </Column>
                <Column id="respect" width="auto">
                    <Text text="Managing with Respect" />
                </Column>
            </columns>
            <items>
                <ColumnListItem>
                    <cells>
                        <Text id="tYear" text="{Begda}" />
                        <Text id="tRating" text="{Rating}" />
                        <Text id="tRespect" text="{MwrRating}" />                        
                    </cells>
                </ColumnListItem>
             </items>
            </Table>     

JS Controller

var pHistory = this.byId("pTable");
var phURL = "/PMRPerformanceSet/?$filter=IvGuid eq '5438A43913276540E1008000A7E414BA'"
pHistory.setModel(oModel);
pHistory.bindRows(phURL);

It seems like the controller should look something like this, however, this does not work

Any suggestions?

I have created a table in the xml view, I would like to bind the table in the controller so it can be modified dynamically depending on who is loading the app.

XML VIEW

<Table inset="false"
            id="pTable">    
            <columns>
                <Column id="year" width="auto">
                    <Text text="Year" />
                </Column>
                <Column id="rating" width="auto">
                    <Text text="Performance Rating"/>
                </Column>
                <Column id="respect" width="auto">
                    <Text text="Managing with Respect" />
                </Column>
            </columns>
            <items>
                <ColumnListItem>
                    <cells>
                        <Text id="tYear" text="{Begda}" />
                        <Text id="tRating" text="{Rating}" />
                        <Text id="tRespect" text="{MwrRating}" />                        
                    </cells>
                </ColumnListItem>
             </items>
            </Table>     

JS Controller

var pHistory = this.byId("pTable");
var phURL = "/PMRPerformanceSet/?$filter=IvGuid eq '5438A43913276540E1008000A7E414BA'"
pHistory.setModel(oModel);
pHistory.bindRows(phURL);

It seems like the controller should look something like this, however, this does not work

Any suggestions?

• javascript
• odata
• sapui5

4 Answers 4

I guess you are using sap.m.Table:

<Table id="pTable" 
    inset="false" 
    items="{/PMRPerformanceSet}">  // add items Here for your oData  collection   
    <columns>
        <Column id="year" width="auto">
            <Text text="Year" />
         </Column>
         <Column id="rating" width="auto">
             <Text text="Performance Rating"/>
         </Column>
         <Column id="respect" width="auto">
             <Text text="Managing with Respect" />
         </Column>
     </columns>
     <items>
         <ColumnListItem>
             <cells>
                 <Text id="tYear" text="{Begda}" />
                 <Text id="tRating" text="{Rating}" />
                 <Text id="tRespect" text="{MwrRating}" />                        
             </cells>
         </ColumnListItem>
     </items>
</Table>

Then set Model in controller. check your odata service response in Network tab of developers tool then Bind items according to that in XML view.

I guess it should more look like this:

var oTable = this.getView().byId("pTable");
var phURL = "/PMRPerformanceSet/?$filter=IvGuid eq '5438A43913276540E1008000A7E414BA'"
var oModel = new sap.ui.model.odata.ODataModel(baseUrl + phURL);

oTable.setModel(oModel);
oTable.bindRows("/YourBindingRootPath");

See Example in the docs.

Please try this in controller

   var oModel = new sap.ui.model.odata.ODataModel("proxy/http/seasrv05.applexus.:8000/sap/opu/odata/sap/ZGET_MATERIALS",
              true, 'appdevelop', 'develop01');

    oModel.read("/zget_materialsCollection",null,["$filter=i_search eq 'R1' and i_werks eq '1000'"],true,
            function(data, response) 
        {
        var value=[];
        value = data.results;
        console.log(value);
        console.log(oModel);
        //sap.ui.getCore().getModel("getMaterialModel").fireRequestCompleted();
        var oModel1 = new sap.ui.model.json.JSONModel();
        oModel1.setData({ materials: value});
        oModel1.setSizeLimit(300);
        var oTable = sap.ui.getCore().byId("table");
        oTable.setModel(oModel1);
        oTable.bindRows("/materials");      
        },
        function()
        {
            jQuery.sap.require("sap.m.MessageToast");
            sap.m.MessageToast.show("No record fetched",{my : "center center",at : "center center"});
        }); 

Here is the solution I ending up using, this takes the table with the id "pTable" from an xml view and binds it with my JSON model jModel.

var pHistory = this.byId("pTable");
    pHistory.setModel(jModel);
    pHistory.bindAggregation("items", "/ratings/results", new sap.m.ColumnListItem({
        cells:[
               new sap.m.Label({
                   text:"{Begda}"
               }),
               new sap.m.Text({
                   text:"{Rating}"
               }),
               new sap.m.Text({
                   text:"{MwrRating}"
               })
               ]
    }));