Skip to Content
Technical Articles
Author's profile photo Rahul Patra

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.

	fnGetLeaveHistoryData:function(){
			var oData={
					LeaveHistory : [ {
						"leaveFrom" : "8 Oct, 2016",
						"leaveTo" : "11 Oct, 2016",
						"leaveSubject" : "Casual Leave",
						"Remarks" : "Casual Leave taken",
						"status":"Pending"
					},
					{
						"leaveFrom" : "1 Dec, 2016",
						"leaveTo" : "2 Apr, 2016",
						"leaveSubject" : "Sick Leave",
						"Remarks" : "Sick Leave taken",
						"status":"Approved"
					},
					{
						"leaveFrom" : "12 Feb, 2017",
						"leaveTo" : "14 Feb, 2017",
						"leaveSubject" : "Casual Leave",
						"Remarks" : "Casual Leave taken",
						"status":"Rejected"
					},
					{
						"leaveFrom" : "7 March, 2017",
						"leaveTo" : "10 March, 2017",
						"leaveSubject" : "LWP Leave",
						"Remarks" : "LWP Leave taken",
						"status":"Approved"
					},
					{
						"leaveFrom" : "16 Apr, 2017",
						"leaveTo" : "18 Apr, 2017",
						"leaveSubject" : "Annual Leave",
						"Remarks" : "Annual Leave taken",
						"status":"Pending"
					}]
				};
			var oLeaveHistoryJsonModel = new JSONModel(oData);
			this.getView().setModel(oLeaveHistoryJsonModel,"LeaveModel");
		},

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>
 <Column width="7em" minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
  <Text text="Leave Up To" />
 </Column>
 <Column width="8em" minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
  <Text text="Leave Type"/>	   
 </Column>
 <Column width="12em" minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
  <Text text="Description"/>	
 </Column>
 <Column width="7em" minScreenWidth="Tablet" demandPopin="true"	hAlign="Center">
  <Text text="Status"/>
 </Column>
</columns>
<ColumnListItem id="clm" >
   <customData>
     <core:CustomData key="mydata" value="{LeaveModel>status}" writeToDom="true"></core:CustomData>
   </customData>
   <cells >
	<Text text="{LeaveModel>leaveFrom}"  />
	<Text text="{LeaveModel>leaveTo}" />
	<Text text="{LeaveModel>leaveSubject}"/>
	<Text text="{LeaveModel>Remarks}" />
	<Text text="{LeaveModel>status}"/>
  </cells>
</ColumnListItem>
</Table>

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

tr[data-mydata="Pending"]{	
  backgr
ound:   #ff9933!important;
}
		
tr[data-mydata="Rejected"]{
  background: #ff3333!important;
}

tr[data-mydata="Approved"]{
  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.

 

Regards,

Rahul Patra

SAP UI5 Consultant (Technical)

 

Assigned tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Klaus Kronawetter
      Klaus Kronawetter

      Hi Rahul,

      thanks for the blog.

      Do the cells keep the right colors when you sort or filter the table?

      BR, Klaus

       

      Author's profile photo Rahul Patra
      Rahul Patra
      Blog Post Author

      Yes, it remains the same.

      Author's profile photo Alexandre Fossati Filho
      Alexandre Fossati Filho

      that was really helpful, thank you Rahul Patra

      Author's profile photo Suha Kajouk
      Suha Kajouk

      Thank you !

      Author's profile photo Naseem VP
      Naseem VP

      Hi Rahul,

      Very nice blog. Thanks for explaining the details.

      I have a doubt regarding the demand popin case. When there is no deman popin columns, it is working as expected. However when some columns are going to deman popin, In the dom, it is written as an additional <tr> tag and the applied custom class 'my-data' is only reflecting on the first <tr> tag.

      Do you have any workaroung for the demandpopin case also?

      Thanks.

      Author's profile photo Rahul Patra
      Rahul Patra
      Blog Post Author

      Thanks Naseem.. Will check and revert.

      Author's profile photo Kshitija U Shetty
      Kshitija U Shetty

      Amazing blog with neat explanation.

      Keep up the good work 🙂

      Author's profile photo Jakub Plocki
      Jakub Plocki

      Simple solution, that covers 100% of expectations, thanks for sharing!

      Author's profile photo MdZaffar Iqbal
      MdZaffar Iqbal

      Thanks you so much for such a nice blog.