SAP UI5 Table row color change based on status

[rpatra]

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)

 

[former_member268137]

Hi Rahul,

thanks for the blog.

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

BR, Klaus

 

[AlexandreFossat]

that was really helpful, thank you Rahul Patra

[former_member130529]

Thank you !

[naseemvp007]

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.

[rpatra]

Thanks Naseem.. Will check and revert.

[rpatra]

Yes, it remains the same.

[former_member597472]

Amazing blog with neat explanation.

Keep up the good work 🙂

[jakub_pl]

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

[former_member682014]

Thanks you so much for such a nice blog.

[RaminS]

OMG, this is one of the best tricks in SAPUI5 I've ever found. Can't believe SAP doesn't provide this as default feature.

Thanks