Change table row background color in SAP Table based on condition using CSS

[vikas_garg2]

Introduction:

This Blog helps how to color table row conditionally in SAP UI5.

 

1. Below Example is for SAP.m.Table


2. We are trying to do this using CSS Only.

 

Step by Step Process:

 

In the below example we are changing Table Row color based on the File Status.

Step 1 :- After creation of our project, We need to add below library first : 

 

xmlns:core="sap.ui.core"

xmlns="sap.m"

 

Step 2: - Once you are done with your table creation you need to add the Custom Data in the table for which you want to set the condition, In below code we are setting condition for "File status". After adding Custom Data in the table, Table look like below:

 

<Table    id="idTable114"   items="{path:'/modelData'}">

<columns>

<Column

minScreenWidth="Small"

width="10rem"

demandPopin="true">

<header>

<Text text=" File Name" class="text-white"/>

</header>

</Column>

<Column

minScreenWidth="Small"

demandPopin="true">

<header>

<Text text=" Date" class="text-white"/>

</header>

</Column>

 

<Column

minScreenWidth="Small"

demandPopin="true">

<header>

<Text text="File Status" class="text-white"/>

</header>

</Column>

 

 

</columns>

<items>

<ColumnListItem id="clm">

 

<customData>

<core:CustomData key="mydata" value="{File_Status}" writeToDom="true"></core:CustomData>

</customData>

 

<cells>

<Text text="{File_Name}"  />

<Text text="{Date}"  />

<Text text="{File_Status}"  />

 

</cells>

</ColumnListItem>

</items>

</Table>

 

Step 3:-  Add below code in your CSS File : 

 

tr[data-mydata="FAILED"]{
background: #e97070 !important;
}

tr[data-mydata="PROCESSED"]{
background: #7cdf5f !important;
}

tr[data-mydata="Pending"]{
background: #dcca3e !important;
}

 

Above CSS is used to set the color schema based on the different File status, We can change it as per our convenience.

 

Note:- No Need to make any changes in the Controller file. This conditional Table row color is based on the Custom data for the selected field and CSS.

 

Once We are done with above code changes, Our table should look like this :

 

 

 

Happy Coding !!!! 🙂 🙂 🙂

 

Vikas Garg

 

 

 

[Sanjanad01]

Is there any way we can do this for only the values in a single column(one cell of each row) instead of the whole row?