sapui5 - How to handle the itemPress of sap.m.Table?

Question

I've written an XML view. Inside it there is a table:

<Table xmlns="sap.m"
  id="myTable"
  select=""
  selectionChange=""
  swipe=""
  growingStarted=""
  growingFinished=""
  updateStarted=""
  updateFinished=""
  itemPress="console.log('clicked on item')"
>
  <columns>
    <!-- sap.m.Column -->
  </columns>
  <items>
    <!-- sap.m.ListItemBase -->
  </items>
</Table>

I insert the row to the table using the onInit of the controller, but when I click on a row, the message is not shown.

If I use console.log(tablePippo.getProperty("itemPress")); inside the controller, it throws

Uncaught Error: Property "itemPress" does not exist in Element sap.m.Table#operationDetail--myTable

Answer 1

This really seems to be a frequent issue people face when they use sap.m.ListBase related controls. Let me give you an overview on how to manage the events (and particularly activate them at all):

The confusion could be related to the sap.m.ListMode of controls inheriting from sap.m.ListBase and the sap.m.ListType of items inheriting from sap.m.ListItemBase.

Let's assume the following sample List:

<List
  selectionChange=".onSelectionChange"
  itemPress=".onItemPress"
  delete=".onDelete"
>
  <items>
    <ObjectListItem
      title="Hello ListItem"
      press=".onObjectListItemPress"
    />
  </items>
</List>

sap.m.ListMode (Sample)

If you're using sap.m.List or sap.m.Table, event firing depends on the mode you're using. Unfortunately, a List / Table without a mode property will not fire any event from its side! If you want the List / Table to fire those events, you have to assign to it a mode. For example:

<List
  mode="SingleSelect"
  ...
>

These are the possible modes from the sap.m.ListMode documentation:

None (default)

Since no mode property is assigned, none of the events will be fired!

SingleSelect | SingleSelectLeft

A list control with mode="SingleSelect" shows a radiobutton on the right side of each item and will fire the onSelectionChange event as soon as the user clicks on the given radio button control. Using "SingleSelectLeft" just moves the radio button to the left side of the item.

SingleSelectMaster

A list control with mode="SingleSelectMaster" will show you the hand on mouseover and fires the onSelectionChange in case of a click on an item.

MultiSelect

A list control in mode="MultiSelect" offers a checkbox and fires the onSelectionChange event on every check and uncheck of an item.

Delete

Using the list in mode="Delete" gives you a nice delete button and fires onDelete.

---

sap.m.ListType (Sample)

There's one more property you should have a look at: The type property of your items.

Every item inherits from sap.m.ListItemBase and thus has an attribute called type. Let's see how it looks like:

<items>
  <ObjectListItem
    type="Active"
    press=".onObjectListItemPress"
    detailPress=".onDetailPress"
    ...
  />
</items>

There are these types listed in the sap.m.ListMode documentation:

Active

Depending on the mode, the itemPress of the list and press of the list item can be fired. The selected item gets highlighted so the user can see what's selected.

Detail

A detail button (with icon sap-icon://edit) is offered which fires the detailPress event.

DetailAndActive

As the name says, this is a combination of Detail and Active type. So you have the detail button firing detailPress on button click, and the item itself firing the list event itemPress.

Navigation

The items have a navigation like look, and itemPress and item's press are called.

Inactive

No item event gets called from the item itself.

---

Now let's take a look at your problem. You should either assign your Table control a mode or assign your items a type. After that change the events should get fired.

Generally I would avoid using a ListMode and a ListType at the same time since there can be unexpected behavior but check it by yourself.