Portals - Conditional Formatting a View

[pternouth]

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

[hardikv]

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!

[pternouth]

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 · Accepted solution]

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]

Hi Hardikv

This has worked well.  Thanks so much for your help

Kind Regards

Peter

[hardikv]

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

--------------------------
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]

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