Skip to Content
Technical Articles

SAP UI5 Table row color change based on status

Hello Developers,

Here I am going to write about an interesting topic in SAP UI5. Changing the entire row color of a sap.m.Table based on Status. Generally we keep a text in Status field and change the color of the text according to the Status. But, nowadays customers are asking about this requirement for better user experience.

I am going describe you step by step to achieve this goal.

Step 1: Mock oData to display on the table

I am defining a method where I had created a mock data and take in a Name-model.

			var oData={
					LeaveHistory : [ {
						"leaveFrom" : "8 Oct, 2016",
						"leaveTo" : "11 Oct, 2016",
						"leaveSubject" : "Casual Leave",
						"Remarks" : "Casual Leave taken",
						"leaveFrom" : "1 Dec, 2016",
						"leaveTo" : "2 Apr, 2016",
						"leaveSubject" : "Sick Leave",
						"Remarks" : "Sick Leave taken",
						"leaveFrom" : "12 Feb, 2017",
						"leaveTo" : "14 Feb, 2017",
						"leaveSubject" : "Casual Leave",
						"Remarks" : "Casual Leave taken",
						"leaveFrom" : "7 March, 2017",
						"leaveTo" : "10 March, 2017",
						"leaveSubject" : "LWP Leave",
						"Remarks" : "LWP Leave taken",
						"leaveFrom" : "16 Apr, 2017",
						"leaveTo" : "18 Apr, 2017",
						"leaveSubject" : "Annual Leave",
						"Remarks" : "Annual Leave taken",
			var oLeaveHistoryJsonModel = new JSONModel(oData);

Now the above data I am going to bind with sap.m.Table. I am gone a change the color of the row based on the status. If status is Pending, row color should be Orange, if Rejected, row color should be Red, & if Approved, row color should be Green.


Step 2: sap.m.Table data binding

<Table id="LeaveDetailsTable" showSeparators="All" class="sapUiSizeCompact"     items="path:'LeaveModel>/LeaveHistory'}">								<columns>	
 <Column width="7em" minScreenWidth="Tablet" demandPopin="true" hAlign="Center"  >
   <Text text="Leave From" /> 	
 <Column width="7em" minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
  <Text text="Leave Up To" />
 <Column width="8em" minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
  <Text text="Leave Type"/>	   
 <Column width="12em" minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
  <Text text="Description"/>	
 <Column width="7em" minScreenWidth="Tablet" demandPopin="true"	hAlign="Center">
  <Text text="Status"/>
<ColumnListItem id="clm" >
     <core:CustomData key="mydata" value="{LeaveModel>status}" writeToDom="true"></core:CustomData>
   <cells >
	<Text text="{LeaveModel>leaveFrom}"  />
	<Text text="{LeaveModel>leaveTo}" />
	<Text text="{LeaveModel>leaveSubject}"/>
	<Text text="{LeaveModel>Remarks}" />
	<Text text="{LeaveModel>status}"/>

Here i have done the data binding. Inside ColumnListItem I had taken a Custom Data and bind the Status as value. So, on run time for each row one customdata will generate. I am attaching the screen shot bellow. Inside data-mydata  will have the Status of that particular row.

Then we need to write the css according to that to assign color.


Step 3: Need to add CSS to put color according to the status

ound:   #ff9933!important;
  background: #ff3333!important;

  background:  #33cc33!important;


Now all set.. here is the output:

Thank you for reading this blog.

Note: There might be different approaches to achieve this topic.



Rahul Patra

SAP UI5 Consultant (Technical)


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