Skip to Content

sapui5 binding rows of table doesn't work

Hi,

I found a lot of pages concerning my issue. but despite trying every single solution I found,

it doesn't work. since I'm locked for several days, I ask your advice.

here is a part of my View :

	<App id="mainApp">
		<pages>
			<Page id="detail" title="Contrats" class="sapUiStdPage">
				<content>
					<Table id="table1" noDataText="Vous n'avez aucun Compte." alternateRowColors="true" items="{/oDataAccount}">
						<items>
							<ColumnListItem type="Active" id="item1">
								<cells>
									<Text text="{Vkont}" id="text3"/>
									<Text text="{Gpart}" id="text4"/>
									<Text text="{Formkey}" id="text5"/>
								</cells>
							</ColumnListItem>
						</items>

I'm trying to use aggregation to have one line of table for one record in oData service.

here is my controller View :

		onInit: function () {
			// Get the Router Info
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			if (oRouter) {
				oRouter.getRoute("Main").attachMatched(this._onRouteFound, this);
			}
		},
		_onRouteFound: function (oEvent) {
			var oArgument = oEvent.getParameter("arguments");
			oPartnerProd = oArgument.G_PartnerProd;
			oPartnerResp = oArgument.G_PartnerResp;
			var sPath = "/InfoProdSet(PartnerResp='" + oPartnerResp + "',PartnerProd='" + oPartnerProd + "')/ACCOUNTSet";
			this.oModel = this.getOwnerComponent().getModel("tableData");
var testTable = this.byId("table1");

			this.oModel.read(sPath, {
				success: function (oData) {
					debugger;
					var oDataAccount = new sap.ui.model.json.JSONModel(oData);
					oDataAccount.setData(oData);
					testTable.setModel(oDataAccount);
					testTable.bindAggregation("items", {
						path: "/d/results",
						template: testTable.getBindingInfo("items").template
							//filters: []    if you have filters set them here !!!
					});
});
}

oData works fine. here is corresponding json format anwer :

{
  "d" : {
    "results" : [
      {
        "__metadata" : {
          "id" : "<Serveur>/sap/ZOA_SOLAIRE_PROJ_SRV/ACCOUNTSet(Vkont='210000008',Gpart='3000064')",
          "uri" : "<Serveur>/sap/opu/odata/sap/ZOA_SOLAIRE_PROJ_SRV/ACCOUNTSet(Vkont='210000008',Gpart='3000064')",
          "type" : "ZOA_SOLAIRE_PROJ_SRV.ACCOUNT"
        },
        "Vkont" : "210000008",
        "Gpart" : "3000064",
etc...

I tried a lot of combinations (when I say a lot, it's a lot) and nothing works.

a little precision because I think it's worth saying, i'm working with a model "tableData" and not with default one :

here is an extract from manifest :

		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "Oa_solaire_port.Oa_solaire_port.i18n.i18n"
				}
			},
			"tableData": {
				"uri": "/sap/opu/odata/sap/ZOA_SOLAIRE_PROJ_SRV/",
				"type": "sap.ui.model.odata.v2.ODataModel",
				"settings": {
					"defaultOperationMode": "Server",
					"defaultBindingMode": "OneWay",
					"defaultCountMode": "Request"
				},
				"dataSource": "ZOA_SOLAIRE_PROJ_SRV",
				"preload": true
			}
		},

what path should I use in binding aggregation ?

what path in View for fields ?

thanks in advance.

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

3 Answers

  • Best Answer
    Feb 12 at 03:59 PM

    Hi,

    here what i have done. I test it and it works on my system.

    For information I simulate the result of the read request.

    The view:

    <mvc:View
        controllerName="test.controller.Help1"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns="sap.m">
    
    <App id="mainApp">
    <pages>
    <Page id="detail" title="Contrats">
    <content>
    <Table id="table1" noDataText="Vous n'avez aucun Compte." alternateRowColors="true" items="{/aAccounts}">
    <columns>
    <Column>
    <Text text="Vkont" />
    </Column>
    <Column>
    <Text text="Gpart" />
    </Column>
    <Column>
    <Text text="Formkey" />
    </Column>
    </columns>
    
    <items>
    <ColumnListItem type="Active">
    <cells>
    <Text text="{Vkont}"/>
    <Text text="{Gpart}" />
    <Text text="{Formkey}"/>
    </cells>
    </ColumnListItem>
    </items>
    </Table>
    </content>
    </Page>
    </pages>
    </App>
    
    </mvc:View>
    

    with items="{/aAccounts}" the binding is already done and you do not have to bind the aggregation again in the controller.

    The controller:

    sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller) {
    "use strict";
    return Controller.extend("test.controller.Help1", {
    
    onInit: function () {
    // Get the Router Info
    var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
    if (oRouter) {
    oRouter.getRoute("help1").attachMatched(this._onRouteFound, this);
    }
    
    var oAccountModel = new sap.ui.model.json.JSONModel({
      aAccounts : []
    });
    this.getView().setModel(oAccountModel); // i set here a default json model
    },
    
    _onRouteFound: function (oEvent) {
    var oDataSimulatedResponse = {
      "d" : {
        "results" : [
          {
            "__metadata" : {
              "id" : "<Serveur>/sap/ZOA_SOLAIRE_PROJ_SRV/ACCOUNTSet(Vkont='210000008',Gpart='3000064')",
              "uri" : "<Serveur>/sap/opu/odata/sap/ZOA_SOLAIRE_PROJ_SRV/ACCOUNTSet(Vkont='210000008',Gpart='3000064')",
              "type" : "ZOA_SOLAIRE_PROJ_SRV.ACCOUNT"
            },
            "Vkont" : "210000008",
            "Gpart" : "3000064",
            "Formkey" : "xyz"
          }
        ]
      }
    };
    
    var oAccountModel = this.getView().getModel();
    oAccountModel.setProperty("/aAccounts",oDataSimulatedResponse.d.results); 
    }
    });
    });

    But, the JSON model is not necessary because of the OData model.

    I think the best way is to use this OData model directly.

    I assume that you have a navigation property (toAccountSet for example) between InfoProdSet and ACCOUNTSet

    In the view, you bind the informations with the OData model (tableData):

    <Table id="table1" noDataText="Vous n'avez aucun Compte." alternateRowColors="true" items="{tableData>toAccountSet}">
    <columns>
    <Column>
    <Text text="Vkont" />
    </Column>
    <Column>
    <Text text="Gpart" />
    </Column>
    <Column>
    <Text text="Formkey" />
    </Column>
    </columns>
    
    <items>
    <ColumnListItem type="Active">
    <cells>
    <Text text="{tableData>Vkont}"/>
    <Text text="{tableData>Gpart}" />
    <Text text="{tableData>Formkey}"/>
    </cells>
    </ColumnListItem>
    </items>
    </Table>

    and in the controller you bind the table with the correct InfoProd:

    _onRouteFound:function(oEvent){
    			var oArgument = oEvent.getParameter("arguments");
    			oPartnerProd = oArgument.G_PartnerProd;
    			oPartnerResp = oArgument.G_PartnerResp;
    			var sPath ="/InfoProdSet(PartnerResp='" + oPartnerResp + "',PartnerProd='" + oPartnerProd + "')";
    			var testTable = this.byId("table1");
                            testTable.bindElement({
                                path : sPath,
                                model : "tableData"
                            });
    
    
    };

    Note : i did not test the OData version. But i already did something like that and that works.

    I hode it's help

    Regards

    Fabrice

    Add comment
    10|10000 characters needed characters exceeded

    • Dear Fabrice,

      thanks a lot for your answer. it works.

      for first solution, I had to user jquery to make it works. with asynchrone query, the setProperty couldn't work since oData data aren't already retrieved when binded.

      code that works is like this :

      		onInit: function () {
      			// Get the Router Info
      			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
      			if (oRouter) {
      				oRouter.getRoute("Main").attachMatched(this._onRouteFound, this);
      			}
      		},
                     _onRouteFound: function (oEvent) {
      			var oArgument = oEvent.getParameter("arguments");
      			oPartnerProd = oArgument.G_PartnerProd;
      			oPartnerResp = oArgument.G_PartnerResp;
      			var sPath = "/InfoProdSet(PartnerResp='" + oPartnerResp + "',PartnerProd='" + oPartnerProd + "')/ACCOUNTSet";
      
                              this.oModel = this.getOwnerComponent().getModel("tableData");
      			var testTable = this.byId("table1");
      			//var oDataAccount = new sap.ui.model.json.JSONModel();
      			var oAccountModel = new sap.ui.model.json.JSONModel({
      				aAccounts: []
      			});
      			this.getView().setModel(oAccountModel); // i set here a default json model
      			var oDataSimulatedResponse = [];
      
      
      			var gatewayUri = this.getOwnerComponent().getManifestEntry("sap.ui5").models["tableData"].uri;
      			$.ajaxSetup({
      				async: false
      			});
      			$.getJSON(gatewayUri + sPath).done(function (data) {
      				oDataSimulatedResponse = data;
      			});
      
      
      			var oAccountModel = this.getView().getModel();
      			oAccountModel.setProperty("/aAccounts", oDataSimulatedResponse.d.results);
      
      }
  • Feb 12 at 03:54 PM

    there are so many working example from sap, did you take a look?

    not just doing meaningless try

    you should stop and try to learn and understand how table works , how ui5 binding works....

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 12 at 04:35 PM

    Hello,

    You can check this in browser debug mode. If the model set to the table (oDataAccount), has the oData set like:

    oData:
       results: Array(1)
           0:
               Vkont:"value1",
               Gpart:"value2",
               Formkey:"value3",
               .
               .
               .

    then in the View, you can bind the table as such

    <Table id="table1" noDataText="Vous n'avez aucun Compte." alternateRowColors="true" items="{path: '/results'}">

    where results is the name of the array inside oData.

    Thanks & Kind Regards,

    Bopanna

    Add comment
    10|10000 characters needed characters exceeded