$(function () { pageContext.i18n.modTalk = 'moderation talk'; pageContext.i18n.replyToComment = 'Reply'; pageContext.i18n.modTalkEmpty = 'moderation talk is empty'; pageContext.url.getModTalk = "/comments/%25ID%25/listModTalk.json"; pageContext.url.possibleCommentRecipients = "/comments/%ID%/possibleRecipients.json"; pageContext.url.commentEdit = '/comments/%25ID%25/edit.html'; pageContext.url.commentView = '/comments/%ID%/view.html'; pageContext.i18n.commentVisibility = { 'full': 'Viewable by all users', 'op': 'Viewable by the original poster', 'mod': 'Viewable by moderators', 'opAndMod': 'Viewable by moderators and the original poster', 'other': 'Advanced visibility', 'dialogTitle': 'Comment visibility', 'selectGroups': 'Visible to groups', 'selectOther': 'Other recipients', 'selectOriginalPoster': 'Original poster', 'selectModerators': 'Moderators', 'selectAssignees': 'Asked to answer users' }; pageContext.i18n.commentMenuLabels = { 'comment-edit': 'comments.menu.edit', 'comment-delete': 'comments.menu.delete', 'comment-convert': 'comments.menu.convert' };pageContext.i18n.answer= { bestAnswer: 'Best Answer', controlBar : { accept: 'Accept', unaccept: 'Unaccept', acceptCommand: 'Accept this answer as correct', cancelAcceptedCommand: 'Remove this answers accepted status' } }; window.croles = { u: false, op: false, m: false, og: false, as: false, ag: false, dc: false, doc: false, eo: false, ea: false }; tools.init({ q: { e: false, ew: false, eo: false, r: false, ro: false, d: false, dow: false, fv: false, c: false, co: false, p: false, tm: false , ms: false, mos: false }, n: { f: false, vf: false, vfo: false, vr: false, vro: false, c: false, co: false, vu: false, vd: false, w: false, wo: false, l: false }, c: { e: false, eo: false, d: false, dow: false, ta: false, tao: false, l: false }, a: { e: false, ew: false, eo: false, d: false, dow: false, a: false, aoq: false, ao: false, tc: false, tco: false, p: false, tm: false }, pc: croles }, { tc: true, nsc: true }); commandUtils.initializeLabels(); }); Skip to Content

SAPUI5 - StandardListItem icon color

Hello, I am trying to change color of an icon of a StandardListItem.

On press function, I want to create a new icon and set it to the StandardListItem object.

detailPressed: function(oEvent) {
var oIcon = new sap.ui.core.Icon({
src : "sap-icon://alert",
color: "#333333"
});

oEvent.getSource().setIcon(oIcon.getSrc());
}

But since setIcon method of StandardListItem takes only URI of the icon, color is not taken into account. Could you please tell me how to change color icon?

Thank you.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Apr 10, 2017 at 07:30 AM

    Two options:

    1)

    Use expression binding for the src and color https://help.sap.com/saphelp_uiaddon10/helpdata/en/da/f6852a04b44d118963968a1239d2c0/content.htm and update the model. Once the model is updated onPress, the icon and color will be updated

    <core:Icon
        src="{= ${pressed} === '0' ? 'sap-icon://sys-enter' : 'sap-icon://alert' }"
        color="{= ${pressed} === '0' ? 'green' : 'red' }"
        tooltip="{= ${pressed} === '0' ? ${i18n>unpressed} : ${i18n>pressed} }"
    />
    

    2)

    Use a string for color like "red" with the previous code but instead of adding a new Icon, reconfigure the existing one.

    Add comment
    10|10000 characters needed characters exceeded

  • Apr 12, 2017 at 02:07 PM

    you approach is wrong, check the link below may help you:

    https://jsfiddle.net/Akhilesh_U/yu919sw3/

    Add comment
    10|10000 characters needed characters exceeded