UI5 StandardListItem DetailAndActive change Icon

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/29562588/ui5-standardlistitem-detailandactive-change-icon

标签

icons

listitem

sapui5

icon-fonts