Well, this one caused me some headaches for a while. When I initially started playing around with the dynamic table, I did everything with sap.ui.table. It looked fine, but not nearly as nice as the template very looked. I wasn’t paying attention that the template created me a sap.m.table, the newer version. let me start by telling you my goal. I wanted to create a worklist, with a set of dynamic columns. So, based on a configuration table that gets sent into the application, it will define what columns, and in what sequence the table will display them. In addition, it needed to be multiple selection, be responsive, and be scrolling horizontal, since it could have many more columns than will fit even on a desktop window.
sap.ui.table was able to accomplish all of this. The problem came in when I started to add a toolbar to the table. Things just never worked out quite the way I wanted. This table type allowed me to manually set the width of each column, and when looking at it, I could double click the column to auto set the correct width. This was a pain in my butt, but not the end of the world. Here’s the outline of making a table dynamic with sap.ui.table
if you want a toolbar, you need to make some buttons,
var oButtSettings = new sap.ui.commons.Button({… });
then make the toolbar itself:
var oTool = new sap.ui.commons.Toolbar({ … });
next, make the table:
var oNotTab = new sap.ui.table.Table({ … });
assign the toolbar to the table:
oNotTab.setToolbar(oTool);
create the columns for the table and assign the cell:
oNotTab.addColumn(new sap.ui.table.Column({
autoResizable: true,
width: “auto”,
label: new sap.ui.commons.Label({
text: oModel[i].ShortDescr
}),
template: new sap.ui.commons.TextView({
text: val
})
}));
Assign the model with the data to the table (make sure it’s a JSON model) and then bind the rows.
oNotTab.setModel(oModelNot);
oNotTab.bindRows(“/”);
I started to go down the path of finding a way to do this in the background, when I noticed that sap.m.table. So, I commented out everything I did with sap.ui.table, and replicated it with sap.m.table. The results were instantly nicer looking, but this version of the table does not have a horizantal scrolling feature. (I’ll talk about how to overcome that tomorrow). What I liked about the sap.m.table was the ability to click a line and go directly into the detail, while still allowing me to select multiple lines for other button presses. The coding is completely different in terms of the elements needed to make a table.
again, make some buttons, but be sure to use sap.m…
var oButtRefresh = new sap.m.Button({…});
make the toolbar
var oTool = new sap.m.Toolbar({…});
make the table, if you have a lot of columns, you may consider fixedLayout: false, but that will open up some new challenges… I’ll talk about how to handle this soon.
var oNotTab = new sap.m.Table({…});
make the column item list:
var colItems = new sap.m.ColumnListItem(“colItems”, {…});
set the toolbar:
oNotTab.setHeaderToolbar(oTool);
bind the items tot he col item list
oNotTab.bindAggregation(“items”, “/”, colItems);
add columns and cells to the list
oNotTab.addColumn(new sap.m.Column({
autoResizable: true,
width: “auto”,
demandPopin: true,
header: new sap.m.Label({
text: oModel[i].ShortDescr
}),
}));
var txtNAME = new sap.m.Text(oModel[i].GwField, {
text: {
path: oModel[i].GwField,
formatter: formatter.leadZero
}
});
colItems.addCell(txtNAME);
}
set the model to display in your table.
oNotTab.setModel(oModelNot);
As always, thanks for reading and don't forget to check out our SAP Service Management Products at my other company JaveLLin Solutions,Mike