SAP UI5 Object List item with "title" as hyperlink

Question

Please suggest Object List Item "title" with hyperlink and on click of it, should navigate to some url in a new tab.

<List items="{ path: 'sonarReport>/measures' }"
        id="sonarRepId"
        mode="SingleSelectMaster" 
        selectionChange="onChange"
        updateFinished="onFinsihed">            
    <ObjectListItem icon="{sonarReport>imageL}"
            **title="{sonarReport>value}"**
            class="sonarCustom"
            type="Active">
        <attributes>
            <ObjectAttribute text="{sonarReport>metric}"></ObjectAttribute>
        </attributes>
        <firstStatus>
            <ObjectStatus title="{sonarReport>state}"
                icon="{sonarReport>image}"
                state="Success"></ObjectStatus>
        </firstStatus>
    </ObjectListItem>               
</List>

D. Seah D. Seah · Accepted Answer · 2020-05-30T16:54:09

you can opt to extend the ObjectListItem like this

  ObjectListItem.extend("ObjectListItemEx", {
    metadata: {
      events: {
        titlePress: {}
      }
    },
    renderer: {},
    onAfterRendering: function() {
      if (ObjectListItem.prototype.onAfterRendering) {
        ObjectListItem.prototype.onAfterRendering.apply(this, arguments);
      }
      var that = this;
      this.$().find(".sapMObjLTitle").each(function() {
        var $this = $(this);
        $this.click(function() {
          that.fireTitlePress();
        });
        $this.css("cursor", "pointer");
      });
    }
  });

demo: https://jsbin.com/hofumej/1/edit?js,output

SAP UI5 Object List item with "title" as hyperlink

2 Answers