Skip to Content

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

3 Comments
You must be Logged on to comment or reply to a post.
  • 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.