Summary and Background
There are quite a lot of discussions within SCN about conditionally coloring of table-rows in SAP UI5. Kiran Kumar Valluru posted a very good blog about table coloring with addStyleClass() function:
Step1: OData Service
The OData Service with the Entity “PLSTRUCList” has the following properties (unused properties are hidden):
“Rfarea” and “KslCurrStr” will be used for table binding. The property “Style” declares, which Stylesheet should be used for the table row.
If we take a look to the SAP Gateway Client, we will get the following result for this Entityset:
Step2: Consuming oData Service in XML-View
This is how the table is declared in the XML-view:
In order to render the rows in different styles we need to add Custom Data to DOM. In this example we use the key “mydata”:
This will generate the HTML with “data-mydata” tag (screenshot from chrome debugging):
Step 3: Custom Style-Sheet
Finally, we have to add a custom Style Sheet to the workspace:
…and add the following line to index.html:
The myCSS.class File has only one code-line in this example:
It ensures, that every UI-Element with “data-mydata = emphcolor1” should be rendered with the appropriate background-color.
The screenshot below shows the final result: