SAP UI5 Table row color change based on status

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: