Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
rpatra
Explorer
21,639
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)

 
10 Comments
Labels in this area