Primer on sap.m.Table

[vobu]

There's sap.m.Table and sap.ui.table.Table - two UI5 controls rendering a Table, but with substantial differences.

While sap.ui.table.Table holds all the bells and whistles for display on desktop devices, sap.m.Table (as the namespace suggests) is geared toward mobile devices. It inherits most of its functionality from the sap.m.List control, adding the "classic" columns and rows expected from a table.

For the purpose of this article and for better differentiation, sap.m.Table is referred to as m-table and sap.ui.table.Table as ui-table.

Building an m-table typically means defining cells (a.k.a any kind of controls) with corresponding columns, adding the cells to a row template:

// "cells"

var oName = new sap.m.Text({text: "{ProductName}"});

var oQty = new sap.m.Text({text: "{QuantityPerUnit}"});

var oPrice = new sap.m.Text({text: "{UnitPrice}"});

// corresponding columns

var oColName = new sap.m.Column({header: new sap.m.Text({text:"Product Name"}) });

var oColDesc = new sap.m.Column({header: new sap.m.Text({text:"Quantity per Unit"}) });

var oColPrice = new sap.m.Column({header: new sap.m.Text({text:"Unit Price"}) });

// row template

var oRow = new sap.m.ColumnListItem();

oRow.addCell(oName).addCell(oQty).addCell(oPrice);

Then, the m-table is instantiated together, along with adding the previously defined colums:

// table

var oTab = new sap.m.Table("oTab");

oTab.addColumn(oColName).addColumn(oColDesc).addColumn(oColPrice);

Binding data to the table can be done by using m-table's bindItems(), a convenience function for setting an aggregation binding to a UI5 control:

oTab.bindItems("/Products", oRow);

A substantial difference between ui-table and m-table is the fact, that m-table provides some predefined User Interaction modes that can be utilized to achieve three typical UX tasks of table design: selecting a single row, selecting multiple rows and deleting a row.

For that purpose, m-table offers the setMode() function that takes the sap.m.ListMode Enumeration as values:

oTab.setMode(sap.m.ListMode.Delete); // delete mode

oTab.setMode(sap.m.ListMode.MultiSelect); // multi-selection of rows

oTab.setMode(sap.m.ListMode.SingleSelectLeft); // left checkbox per row for singe selection of a row

(FTR: there's a couple more options to sap.m.ListMode)

Visually, this is what the different m-table-modes look like in the above mentioned sequence:

Note that the multi-select option also shows a checkbox in the column header to select/deselect all rows of the m-table.

Additionally, there's also dedicated events in order to react on user interation:

.attachSelectionChange() provides access to the selection/deselection of a row

.attachDelete() provides access to the deleted row

Utilizing core UI5-functionality, you can then access the selected/deselected/deleted row and/or items:

oTab.attachSelectionChange( function(oEvent) {

    var oSelectedItem = oEvent.getParameter("listItem");

    var sItemName = oSelectedItem.getBindingContext().getProperty("ProductName"); // access item via bound data

});

In summary, UI5's m-table provides both Visual Design Patterns and Interaction handlers for Tables on mobile devices.

No need for classic Design Patterns à la

any more that haul along a bunch of icons in every row of a table for the sole purpose of indicating interaction possibilities to the user.

Mask them with UI5's m-table Table Mode for cleaner and more simple UIs!

Here's a single-page-app on GitHub showcasing sap.m.table modes.