web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities
Season of Giving Solutions is Here!
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Portals - Conditional ...
Power Pages
Answered

Portals - Conditional Formatting a View

(0) ShareShare
ReportReport
Posted on by pternouth 28

Good Morning Portals Community,

 

I am trying to build a client portal with a entity (table) 'view' for status reports.  In this view, I have a RAG status of "Red", "Amber" or "Green", based on a Choice attribute in the entity column.

 

I have been trying to adapt the Microsoft sample custom javascript to colour code the "Red" "Amber" or "Green" field in the webpage view.  I can get it to colour everything one colour based on the first sample Javascript here - https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/entity-lists

 

When I try to adapt the code with a conditional statement based on the values in the tsam_ragstatus field, I can't get it to apply.  Can anyone with a working knowledge of javascript in Portals assist please?  Here is the code I am currently using.  I suspect is has something to do with an incorrect identification of the tsam_ragstatus attribute?

 

Thanks in advance for any assistance

$(document).ready(function (){
$(".entitylist.entity-grid").on("loaded", function () {
$(this).children(".view-grid").find("td[data-attribute='tsam_ragstatus']").each(function (){
// do something with each row
 if('tsam_ragstatus'==('Red')){$(this).css("background-color", "red")};
 if('tsam_ragstatus'==('Amber')){$(this).css("background-color", "amber")};
 if('tsam_ragstatus'==('Green')){$(this).css("background-color", "green")};
});
});
});
 

 

Categories:
Power Apps portals
I have the same question (0)
  • pternouth Profile Picture
    pternouth 28 on at

    Great idea.  I was thinking of that.  Now that I am able to identify the specific grid element to adjust the css on (thanks to you), I can do a number of things to it.  Making the text white was one of them.  My other thought was to make the text the same colour as the RAG, essentially making the text invisible.  

     

    Thanks again

  • H V Profile Picture
    H V 1,510 on at

    Hi @pternouth 

     

    Glad to hear that your issue has been resolved.

     

    For better user experience, If you are change the bacground-color of field, then I would suggest you to change the color of text as white. Please check below code.

     

    $(document).ready(function (){
	var entityList = $(".entitylist.entity-grid").eq(0);
	entityList.on("loaded", function () {
		entityList.find("table tbody > tr").each(function (index, tr) {
			var td = $(tr).find('td[data-attribute="tsam_ragstatus"]');
 var primaryColumn = $(tr).find('td[data-attribute="tsam_ragstatus"]').text();
			if(primaryColumn == "Red")
			{
				$(td).css("background-color", "red");
				$(td).css("color", "white");
			}
			if(primaryColumn == "Amber")
			{
				$(td).css("background-color", "amber");
				$(td).css("color", "white");
			}
			if(primaryColumn == "Green")
			{
				$(td).css("background-color", "green");
				$(td).css("color", "white");
			}
 });
	});
});

     

     

    hardikv_0-1632634487823.png

     

    --------------------------
    If you like this post, give a Thumbs up. Where it solved your query, Mark as a Solution so it can help other people!

  • pternouth Profile Picture
    pternouth 28 on at

    Hi Hardikv

    This has worked well.  Thanks so much for your help

    Kind Regards

    Peter

  • Verified answer
    H V Profile Picture
    H V 1,510 on at

    Hi @pternouth 

     

    Please use below code to change background color of tsam_ratstatus field only.

    $(document).ready(function (){
	var entityList = $(".entitylist.entity-grid").eq(0);
	entityList.on("loaded", function () {
		entityList.find("table tbody > tr").each(function (index, tr) {
			var td = $(tr).find('td[data-attribute="tsam_ragstatus"]');
 var primaryColumn = $(tr).find('td[data-attribute="tsam_ragstatus"]').text();
			if(primaryColumn == "Red")
			{
				$(td).css("background-color", "red");
			}
			if(primaryColumn == "Amber")
			{
				$(td).css("background-color", "amber");
			}
			if(primaryColumn == "Green")
			{
				$(td).css("background-color", "green");
			}
 });
	});
});

     

    If you want to change the text color, then use below code:

    $(document).ready(function (){
	var entityList = $(".entitylist.entity-grid").eq(0);
	entityList.on("loaded", function () {
		entityList.find("table tbody > tr").each(function (index, tr) {
			var td = $(tr).find('td[data-attribute="tsam_ragstatus"]');
 var primaryColumn = $(tr).find('td[data-attribute="tsam_ragstatus"]').text();
			if(primaryColumn == "Red")
			{
				$(td).css("color", "red");
			}
			if(primaryColumn == "Amber")
			{
				$(td).css("color", "amber");
			}
			if(primaryColumn == "Green")
			{
				$(td).css("color", "green");
			}
 });
	});
});

     

    Let me know if there is any issue.

     

    --------------------------
    If you like this post, give a Thumbs up. Where it solved your query, Mark as a Solution so it can help other people!

  • pternouth Profile Picture
    pternouth 28 on at

    Hi Hardikv,

     

    thankyou so much for your suggestion.  It is a big step in the right direction.  the use of 'var' makes sense.  In my ignorance, I was thinking of this like an excel formula. 

     

    The solution you provided is colour coding the whole row correctly, but I was hoping to get to the point of colour coding just the column containing the rag status data (i.e. the tsam_ratstatus attribute).

     

    Is this a small tweak to the code from here?  I tried substituting 'tr' for 'this' in the 'if' statements, but that didn't.  I assume this is simply about passing the right attribute to the if statement?

     

    Thanks again

     

    Peter

  • H V Profile Picture
    H V 1,510 on at

    Hi @pternouth 

     

    • Go to Your List Form
    • Click on Options Tab
    • Add below code in Custom JavaScript
    $(document).ready(function (){
	var entityList = $(".entitylist.entity-grid").eq(0);
	entityList.on("loaded", function () {
		entityList.find("table tbody > tr").each(function (index, tr) {
 var primaryColumn = $(tr).find('td[data-attribute="tsam_ragstatus"]').text();
			if(primaryColumn == "Red")
			{
				$(tr).css("background-color", "red")
			}
			if(primaryColumn == "Amber")
			{
				$(tr).css("background-color", "amber")
			}
			if(primaryColumn == "Green")
			{
				$(tr).css("background-color", "green")
			}
 });
	});
});

     

    Let me know if there is any issue.

     

    --------------------------
    If you like this post, give a Thumbs up. Where it solved your query, Mark as a Solution so it can help other people!

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities
Season of Giving Solutions is Here!

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Congratulations to the December Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Pages

#1
Fubar Profile Picture

Fubar 55 Super User 2025 Season 2

#2
Lucas001 Profile Picture

Lucas001 25 Super User 2025 Season 2

#3
Jerald Felix Profile Picture

Jerald Felix 23

Last 30 days Overall leaderboard

Featured topics

Solution to LinkedIn Authentication in Power Apps Portals
Welcome to the Power Pages forum!

Product updates

Microsoft Power Platform Community release plans