Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Former Member

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:

This step by step procedure shows how to solve this problem by using XML-Views, an oData Service and custom CSS File without any additional JavaScript coding.


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:

Related information

Labels in this area