Skip to Content
Author's profile photo Former Member

Coloring Table rows conditionally in SAP UI5 XML Views, based on oData Service

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

Assigned tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Melwyn Monis
      Melwyn Monis

      Nice Solution Max ! Surely a different way to color rows with less coding.

      Author's profile photo Firoz Ashraf
      Firoz Ashraf

      Hi,

      We have extended PO Approval App and we are trying to achieve the same result.

      In a table, we want to color the row based on some condition.

      My OData Service with the Entity “Approver_List” has the following properties:

      The property “Name1” declares, which Stylesheet should be used for the table row.

      In order to render the rows in different styles we have added Custom Data to DOM.

      This also generates the the HTML with “data-mydata” tag (which can be seen in chrome debugging)

      In the next step, we have added custom Style Sheet to the workspace

      And added the highlighted linen to index.html

      Even after following your excellent step by step blog, we are not able to get the result.

      Please note again that we are using extension app of PO Approval.

      Could you please help us identify what is missing?

       

      Many Thanks,

      Firoz.

       

      Author's profile photo Firoz Ashraf
      Firoz Ashraf

      Hi,

      Solved the issue.

      We removed the standard class and included custom class.

      Referred to the following blog.

      https://blogs.sap.com/2017/11/13/extend-sap-fiori-cloud-application/

      With changes in StyleSheet myCSS.css as follows:

       

      Regards,

      Firoz.