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,