Skip to Content
0
Former Member
Jul 28, 2016 at 02:07 PM

StandardListItem icon color change in SAP UI5

2036 Views

Hi, I have a master-detail split app and displays the list of values in the master page. The following is the code snippet.

<List id="list" mode="{device>/listMode}" select="onSelect"

items="{

path: '/XYZSet',

sorter: [{

path: 'No',

descending: true

}]

}" >

<StandardListItem press="onSelect" type="{device>/listItemType}"

title="{No}"

description="{ShortText}"

icon="{path:'SysStatus', formatter:'.getIconFlag'}" />

I have the controller method in the Master.controller called, getIconFlag() as shown below. My requirement is to return the same flag icon with different color based on the status value.

getIconFlag:function(status)

{

if (status === "New") {

//this.addStyleClass("newstyleopen");

return "sap-icon://flag"; }

if (status === "Progress" || status ==="Pending") {

//this.addStyleClass("newstyleprogress");

return "sap-icon://flag"; }

},

I have a style.css inside the css folder and defined the style classes as shown below.

.newstyleopen div span { color: red !important; }

.newstyleprogress div span { color: yellow !important; }

Kindly let me know how i can set the CSS style for the icons so that it will display in different color based on the status value.

Appreciate your help.

Thanks,