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.

 

 

Conclusion:- Using above code changes we can change the row color of SAP m.Table in SAP ui5. Once we are done with the above code changes, Our table look like below:-

 



 

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.

 

Happy Coding !!!! ? ? ?

 

Vikas Garg

 

[former_member158144]

Very helpful document Vikas.

Thank you.. 

 

Regards

Apurv

[former_member688555]

Very helpful... thank you vikas

 

Regards,

Yashika

[former_member689459]

Such a informative Article. Keep up the good work.