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)