Good Day!!
After having heard a lot on flexible UIs these days and with the fact that a lot of clients are now demanding dynamic and configurable one. Sharing a solution that would help you derive quick solution in times when there's nothing relevant available that takes you through it.
My team was working on a similar solution when I found out that they are struggling with creating a dynamic table and when we say dynamic table, it's like depending on back end data, you need to render different controls for each row in same column.
My solution follows below steps:
1. Create a table
2. Define columns : The ones you intent to keep dynamic should contain empty layouts. In my case I was using a simple MatrixLayout as template to dynamic column. Let's say it was column 4 for my table i.e. index 3.
3. Bind table to model path: "/sampleRowData"
Say my data is {"sampleRowData":[
{"a":"val11","b":"val12","c":"val13","d":"Dropdown","e":"val5"}
,{"a":"val21","b":"val22","c":"val23","d":"TextField","e":"val25"}
]
};
4. Now I iterate through table rows, and get the cell using index 3 that belongs to dynamic column. oTable.getRows()[i].getCells()[]
5. I compare the value coming from sampleRowData and assign the controls to layout as shown below:
var bindedData = sap.ui.getCore().getModel().getProperty("/sampleRowData");
$.each(oTable.getRows, function(i. obj){
if(bindedData[i] == "Dropdown"){ //Index would be same for tableRow and BindedData as table is binded to same data
obj.getCells()[3].createRow(new sap.ui.commons.Dropdown({
items:[
new sap.ui.core.ListItem({key:"1", text:"a"}),
new sap.ui.core.ListItem({key:"2", text:"b"})
]
})
);
}
else if (bindedData[i]=="TextField"){
obj.getCells()[3].createRow(new sap.ui.commons.TextField({value:"sample dyn field"});
}
and so on....
});
6. You need one condition for each type of control to be rendered or created dynamically.
7. Tada....your dynamic table is ready.
Hope it helps you find a solution to problems.
Thanks and Good luck!!
Best Regards,
Swaroop
