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

Juggernaut

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.

Balata

Answer 2

Add type="Active" to ColumnListItem

...
<items>
    <ColumnListItem type="Active">
        <cells>
            <Text text="{Name}"/>
        </cells>
    </ColumnListItem>
</items>
...

Yang Wang: https://scn.sap.com/thread/3697995

Tripodic

Answer 3

Simple Solution using sap.m.CustomListItem

Use set the properties of the ListItem to

type="Active" press="listPress"

<List items="{/results}"> 
<items>
<CustomListItem type="Active" press="listPress">
<content>
<VBox>
    <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="Start">
        <items>
            <Text text="{PernrName}" />
            <Text textDirection="RTL" text="{Document Status}" class='subtext'/>
        </items>
    </FlexBox>
    <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="End">
        <items>
            <Text text="{Date}" class='subtext'/>
            <Text textDirection="RTL" text="{Current Processor}" class='subtext'/>
        </items>
    </FlexBox>
</VBox> 
</content>
</CustomListItem>

Aeriel

Answer 4

Define myItemPress member function in the controller for the XML view and reference it as

itemPress = "myItemPress"

See example

Raama

:-/ not work...#24325322 – Juggernaut

Answer 5

Another problem in OP's code is that itemPress is used on the level of Table instead of the level of ListItemBase. This will indeed fire click events (if type="Active" is set for the ListItemBase element, as explained in other answers here). BUT: The context of the events will not allow to derive the clicked row in the list! So you get an event, but you will not be able to tell from which item it came.

Here is what needs to be changed to identify the clicked row in OP's example, using ColumnListItem as an example for ListItemBase:

Instead of...

<Table
    ...
    itemPress="onItemPressed"
>
    <items> 
        <!-- sap.m.ListItemBase -->
    </items>
    <columns>
        <!-- sap.m.Column -->
    </columns>
</Table>

... use this:

<Table
    ...
>
    <items>
        <ColumnListItem 
            type="Active"
            press="onItemPressed"
        >
        ...
        </ColumnListItem>
    </items>
    <columns>
        <!-- sap.m.Column -->
    </columns>
</Table>

To derive the model path of the clicked row you can now use code like this:

onItemPressed: function (oEvt) {
    var sModelPath = oEvt.getSource().getBindingContext('myModelName').getPath();
    var sDiD = this.getView().getModel("myModelName").getProperty(sModelPath + "/myModelFieldName");
}

You can also add a customData node within the CustomListItem that holds row specific information and access it's key value pairs in the event handler through something like this:

var aCustomData = oEvt.getSource().getCustomData();

But again:
Both approaches will only work if onItemPressed is called on ListItemBase / ColumnListItem level!

Maneating