sapui5 binding rows of table doesn't work

[former_member202213]

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.

[Fabrice · Accepted solution]

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

[former_member202213 · Accepted solution]

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);

}

[former_member467961]

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

[junwu]

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....