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
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>
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:
Since no mode
property is assigned, none of the events will be fired!
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.
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.
A list control in mode="MultiSelect"
offers a checkbox and fires the onSelectionChange
event on every check and uncheck of an item.
Using the list in mode="Delete"
gives you a nice delete button and fires onDelete
.
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:
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.
A detail button (with icon sap-icon://edit
) is offered which fires the detailPress
event.
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
.
The items have a navigation like look, and itemPress
and item's press
are called.
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.