Search code examples
sapui5

SAP UI5 Object List item with "title" as hyperlink


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>

Solution

  • 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