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:

/wp-content/uploads/2014/07/m_table_delete_492187.png

/wp-content/uploads/2014/07/m_table_multi_492192.png

/wp-content/uploads/2014/07/m_table_single_492191.png

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

/wp-content/uploads/2014/07/ui_meh_table_492202.png

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.

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Ranjit Rao

    Hi Buzek,

    Grt Blog. Has been helpful.

    But I m stuck in 2 problems. Hoping you could help.

    1. I want to get all the data into an array from a sap.m.Table. I have read that getItems() does that. But I could not get the result. I used oTable.getItems();

    2. As shown above in your blog I have implemented SingleSelect in my table. But in my table the last column holds a button “Save” in each row which initially is disabled. Now I want that whenever I select a radiobutton, then that button which corresponds to that row should be enabled.

    Please Help

    (0) 
  2. Kotesh Adabala

    Hi all,

    i am using this delete option in table using following code;

    that = this;

    oTable.setMode(sap.m.ListMode.Delete);

    oTable.attachDelete(function(oEvent){that.deleteRow(oEvent)})

    here i am getting event to my controller but if i am having 5 records

    if i am clicking on 4th record then it will call delete function fo both 4th record and then 5th record as well

    if i am clicking any record remaining records which are followed by clicked record are deleted i am unable to find why it is happening.

    can please share your answer.

    Thanks,

    Kotesh.

    (0) 

Leave a Reply