UI5 StandardListItem DetailAndActive change Icon

Question

I would like to change the standard "pen" icon of the

StandardListItem of type DetailAndActive

. Is there a way to do so?

my XML so far:

            <List
                id="master1List"
                items="{/path}"
                mode="{device>/listMode}"
                select="onSelect"
                itemPress="showDetail"
                growing="true"
                growingScrollToLoad="true">
                <items>
                    <StandardListItem 
                        type="DetailAndActive" 
                        activeIcon="sap-icon://message-information"
                        id="master1ListItem"
                        press="onSelect" 
                        title="{title}">
                    </StandardListItem>
                </items> 
</List>

As far as I know there are only properties "icon" (which I do not need) and "activeIcon" (which I set but which is also not shown on itemPress/tab). I thought I might change it via css, but it is set in a data-attribute (Icon font, not a uri I could overwrite) and then applied:

    .sapUiIcon:before {
  content: attr(data-sap-ui-icon-content);
...

Thanks..

[EDIT:] I accepted the below answer as correct because it works. BUT as you can read in my comment, I'd like to make it possible to accept Controls by using the aggregations metadata like described here:

    metadata: {
    aggregations: {
        "Button" : {type : "sap.m.Button", multiple : false, visibility: "public"}
    },
    defaultAggregation: "Button"
},

This works so far that that I am now allowed to add a Button control to the ListItem in my XML view, but it is not rendered :-) Any ideas what I miss here additionally?

Graham Robbo · Accepted Answer · 2015-08-06T07:38:32.230

The icon is hardcoded deep in the control. I found I can extend the StandardListItem to get the result you want like this.

sap.m.StandardListItem.extend('my.StandardListItem', {
    renderer: {},
    constructor: function(sId, mProperties) {
        sap.m.StandardListItem.prototype.constructor.apply(this, arguments);
    var sURI = sap.ui.core.IconPool.getIconURI("action");
    this._detailIcon =
        new sap.ui.core.Icon({
            src:sURI})
        .setParent(this, null, true)
        .addStyleClass("sapMLIBIconDet");            
    }
});

There is a working example at http://jsbin.com/tuqufe/1/edit?js,output

The bad news is that in the next release (1.28.?) the way that this is done changes significantly so you will need to redo the extended control.

[EDIT:] Sorry I forgot about this one. I just built a quick sample with the OpenUI5 V1.30 beta library. Now the key code looks like this...

sap.m.StandardListItem.extend('my.StandardListItem', {
    metadata: {
        properties: {
            "detailIcon": "string"
        }
    },
    renderer: {},
    setDetailIcon: function(icon) {
        this.DetailIconURI = sap.ui.core.IconPool.getIconURI(icon);
    }
});

There is a sample at http://jsbin.com/bayeje/1/edit?js,output

thanks @Graham, I got this working to use in my XML view! I need this very often. I thought about adding a _default aggregation_ allowed to be added to the Control. Because if I tried to add an Icon to the ListItem before, I got an error: `cannot add direct child without default aggregation defined for control StandardListItem`. So it has to be possible, but I did not find out how. I tried to set the metadata aggregation and in the constructor make use of the `addAggregation()` method, but did not work.. — ho.s, Apr 11 '15 at 16:46
Updated answer with version that works with latest OpenUI5 libraries — Graham Robbo, Aug 06 '15 at 07:41
@GrahamRobbo is it also possible to bind items from JSON? I added therefore also a CustomList in the codem binding itself works but it dosn't show the custom icon. http://jsbin.com/kijisanepa/edit?js,output — Matthias, Dec 11 '17 at 15:31

UI5 StandardListItem DetailAndActive change Icon

1 Answers1

Linked