sap.m.ObjectListItem : Press event not working inside a Horizontal Layout

[Former Member]

HI Guys,

I am trying to create a Left aligned vertical menu bar, similar to what we see on google playstore. So I am using an image + Object List Item control.

It looks well but the "press" event is not working on the ObjectListItem, though it works fine for the image. Here is what I am doing:

getMenuItems : function(){

  var oImg1 = new sap.ui.commons.Image({

  width : "65px",

  height : "57px",

  tooltip : "All Data Marts",

  src : "WebContent/img/AllMarts.png",

  press : function(oEvent){

            alert("Hello");   ----------------------> This works

       }

  });

  var oMenuItem1 = new sap.m.ObjectListItem({

       title : "All Marts",

       press : function(oEvent){

            alert("Hello"); ------------------------> This does not

       }

  });

  var oMenuLayout = new sap.ui.layout.HorizontalLayout();

  oMenuLayout.addContent(oImg1);

  oMenuLayout.addContent(oMenuItem1);

  var oView = this.getView();

  oView.oMenu.addContent(oMenuLayout);

}

Any thoughts how I can make it work? or any other ideas how I can create a menu like we see on playstore?

[Qualiture · Accepted solution]

You should set the ObjectListItem's "type" property to "Active" (the default value is undefined or Inactive)

Furthermore, you should not mix sap.ui.commons and sap.m libraries; better use sap.m.Image instead

But to get back to your topic, why go through all the hassle and create a horizontal layout with separate image and list items? Why not simply add an icon to your ObjectListItem, and add it to a List instead of directly into a view?

(And if you don't need all the extra goodies an ObjectListItem offers, why not simply use a StandardListItem instead?)

For instance:

  <List>
    <StandardListItem
      title="All Marts"
      icon="WebContent/img/AllMarts.png"
      press="handlePress" />
  </List>

[Former Member · Accepted solution]

Thank you Robin.

I tried using the icon property but then the image was too small. I wanted the menu bar to look more like what you see on playstore and found this was the quickest way to prototype for 4-5 items

[Qualiture · Accepted solution]

By far the quickest way to style and size your image would be to use CSS

[former_member182372]

sap.m.ObjectListItem is for items aggregation of sap.m.List, no surprise press doesnt work

don't mix desktop and mobile API!

[Former Member]

I see. So how can I achieve the following style without mixing up the control. This is what my menu looks like using the above code, only issue is ObjectListItem is not clickable.. Image is.

So what alternative do I have in order to preserve the same UI and get the functionality?

[Former Member]

Thanks for the advice Maksim..