cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
pternouth
Regular Visitor

Portals - Conditional Formatting a View

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")};
});
});
});
 

 

1 ACCEPTED SOLUTION

Accepted Solutions
hardikv
Solution Sage
Solution Sage

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!

View solution in original post

6 REPLIES 6
hardikv
Solution Sage
Solution Sage

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!

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

hardikv
Solution Sage
Solution Sage

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!

View solution in original post

Hi Hardikv

This has worked well.  Thanks so much for your help

Kind Regards

Peter

hardikv
Solution Sage
Solution Sage

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!

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

Helpful resources

Announcements
User Group Leader Meeting January 768x460.png

Calling all User Group Leaders!

Don't miss the User Group Leader meetings on January, 24th & 25th, 2022.

Power Apps Community Call Jan. 2022 768x460.png

Power Apps Community Call

Please join us on Wednesday, January 19th, at 8a PDT. Come and learn from our amazing speakers!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Users online (2,215)