cancel
Showing results for 
Search instead for 
Did you mean: 

How to dinamically populate SAP UI Table From oData Results

Francesco
Explorer
0 Kudos

Hello Experts!

I have a requirement which expects to populate a UI table from controller(since the number of columns and rows is always different), starting from an oData response.

What I have so far are the column names for the headers and the rows which I have to bind.

Array of objects containing column names:

Array of objects containing rows which will go inside the table cells:

As of now the table looks like this:

It's displaying columns correctly and what seems to be empty rows(probably related to data in rows). Also UI5 diagnostics show the binding path is not correct.

What am I doing wrong in my code?

_buildUITableContent : function (table, pathInModel) {
			var oController = this;
			var crtView = oController.getView();
			var oModel = crtView.getModel("overviewTableModel");
			var tableData = oModel.getData(); 
			var aRows = tableData.rows;
			var aColumns = tableData.cols;
			
			table.bindAggregation("columns", pathInModel + ">/cols", function (index, context) {
			var columnInfo = context.getProperty(context.getPath());
			var textFromBundle = columnInfo.columnName;
			var rowProperty = "{" + textFromBundle + "}";

			var column = new sap.ui.table.Column({
				width:"15rem",
				sortProperty:textFromBundle,
				label: new sap.ui.commons.Label({text: textFromBundle}), 
				template:new sap.ui.commons.TextField({value: rowProperty})
			});

			return column;

		});
		
		table.setModel(oModel);

		table.bindAggregation("rows", pathInModel + ">/rows", function (sId, context) {
			var itemData = context.getProperty(context.getPath());
			var colsData = table.getModel(pathInModel).getProperty('/cols');

			return new sap.ui.table.Row({
				cells: colsData.map(function (colItem) {
					var labelText;
						labelText = itemData[colItem.columnName];
					

					var UIControl = new sap.m.Label({
						text: labelText
					});

					return UIControl;
				})
			});
		});
		
		//
		//;
		
		},
View Entire Topic
former_member5334
Participant
0 Kudos

Hi Francesco.

Try to debug callback function in method this.bindAggregation()