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.


Procedure

Step1: OData Service


The OData Service with the Entity “PLSTRUCList” has the following properties (unused properties are hidden):

/wp-content/uploads/2016/05/1_954431.png

“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:

/wp-content/uploads/2016/05/2_954432.png

Step2: Consuming oData Service in XML-View


This is how the table is declared in the XML-view:

/wp-content/uploads/2016/05/3_954433.png

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”:

/wp-content/uploads/2016/05/4_954437.png

This will generate the HTML with “data-mydata” tag (screenshot from chrome debugging):

/wp-content/uploads/2016/05/5_954438.png

Step 3: Custom Style-Sheet


Finally, we have to add a custom Style Sheet to the workspace:

/wp-content/uploads/2016/05/6_954439.png

…and add the following line to index.html:

/wp-content/uploads/2016/05/7_954443.png

The myCSS.class File has only one code-line in this example:

/wp-content/uploads/2016/05/8_954444.png

It ensures, that every UI-Element with “data-mydata = emphcolor1” should be rendered with the appropriate background-color.

Result

The screenshot below shows the final result:

/wp-content/uploads/2016/05/9_954445.png

Related information

http://help.sap.com/saphelp_hanaplatform/helpdata/en/1e/f9fefa2a574735957dcf52502ab8d0/content.htm

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply