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")};
});
});
});
Solved! Go to 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!
Hi @pternouth
$(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
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!
Hi Hardikv
This has worked well. Thanks so much for your help
Kind Regards
Peter
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!
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
Episode Seven of Power Platform Connections sees David Warner and Hugo Bernier talk to Dian Taylor, alongside the latest news, product reviews, and community blogs. Use the hashtag #PowerPlatformConnects on social media for a chance to have your work featured on the show.
Super Users – 2023 Season 1 We are excited to kick off the Power Users Super User Program for 2023 - Season 1. The Power Platform Super Users have done an amazing job in keeping the Power Platform communities helpful, accurate and responsive. We would like to send these amazing folks a big THANK YOU for their efforts. Super User Season 1 | Contributions July 1, 2022 – December 31, 2022 Super User Season 2 | Contributions January 1, 2023 – June 30, 2023 Curious what a Super User is? Super Users are especially active community members who are eager to help others with their community questions. There are 2 Super User seasons in a year, and we monitor the community for new potential Super Users at the end of each season. Super Users are recognized in the community with both a rank name and icon next to their username, and a seasonal badge on their profile. Power Apps Power Automate Power Virtual Agents Power Pages Pstork1* Pstork1* Pstork1* OliverRodrigues BCBuizer Expiscornovus* Expiscornovus* ragavanrajan AhmedSalih grantjenkins renatoromao Mira_Ghaly* Mira_Ghaly* Sundeep_Malik* Sundeep_Malik* SudeepGhatakNZ* SudeepGhatakNZ* StretchFredrik* StretchFredrik* 365-Assist* 365-Assist* cha_cha ekarim2020 timl Hardesh15 iAm_ManCat annajhaveri SebS Rhiassuring LaurensM abm TheRobRush Ankesh_49 WiZey lbendlin Nogueira1306 Kaif_Siddique victorcp RobElliott dpoggemann srduval SBax CFernandes Roverandom schwibach Akser CraigStewart PowerRanger MichaelAnnis subsguts David_MA EricRegnier edgonzales zmansuri GeorgiosG ChrisPiasecki ryule AmDev fchopo phipps0218 tom_riha theapurva takolota Akash17 momlo BCLS776 Shuvam-rpa rampprakash ScottShearer Rusk ChristianAbata cchannon Koen5 a33ik Heartholme AaronKnox okeks Matren David_MA Alex_10 Jeff_Thorpe poweractivate Ramole DianaBirkelbach DavidZoon AJ_Z PriyankaGeethik BrianS StalinPonnusamy HamidBee CNT Anonymous_Hippo Anchov KeithAtherton alaabitar Tolu_Victor KRider sperry1625 IPC_ahaas zuurg rubin_boer cwebb365 Dorrinda G1124 Gabibalaban Manan-Malhotra jcfDaniel WarrenBelz Waegemma drrickryp GuidoPreite If an * is at the end of a user's name this means they are a Multi Super User, in more than one community. Please note this is not the final list, as we are pending a few acceptances. Once they are received the list will be updated.
We are excited to share the ‘Power Platform Communities Front Door’ experience with you! Front Door brings together content from all the Power Platform communities into a single place for our community members, customers and low-code, no-code enthusiasts to learn, share and engage with peers, advocates, community program managers and our product team members. There are a host of features and new capabilities now available on Power Platform Communities Front Door to make content more discoverable for all power product community users which includes ForumsUser GroupsEventsCommunity highlightsCommunity by numbersLinks to all communities Users can see top discussions from across all the Power Platform communities and easily navigate to the latest or trending posts for further interaction. Additionally, they can filter to individual products as well. Users can filter and browse the user group events from all power platform products with feature parity to existing community user group experience and added filtering capabilities. Users can now explore user groups on the Power Platform Front Door landing page with capability to view all products in Power Platform. Explore Power Platform Communities Front Door today. Visit Power Platform Community Front door to easily navigate to the different product communities, view a roll up of user groups, events and forums.
We are so excited to see you for the Microsoft Power Platform Conference in Las Vegas October 3-5 2023! But first, let's take a look back at some fun moments and the best community in tech from MPPC 2022 in Orlando, Florida. Featuring guest speakers such as Charles Lamanna, Heather Cook, Julie Strauss, Nirav Shah, Ryan Cunningham, Sangya Singh, Stephen Siciliano, Hugo Bernier and many more. Register today: https://www.powerplatformconf.com/
Welcome to the Power Pages Community! You're now a part of a vibrant group of peers and industry experts who are here to network, share knowledge, and even have a little fun. Now that you're a member, you can enjoy the following resources: The Power Pages Community Forums The forums are also a great place to connect with other Power Pages community members. Check the News & Announcements section for community highlights, find out about the latest community news, and learn about the Community Team. Share your feedback, earn custom profile badges, enter challenges to win prizes, and more. Community Blog Our community members have learned some excellent tips and have keen insights on the future of business analysis. Head on over to the Community Blog to read the latest posts from around the world. Let us know if you'd like to become an author and contribute your own writing — everyone is welcome. And that’s not all, we have Galleries of additional information such as the Community Connections & How To Videos & Webinars & Video Gallery and more to motivate, educate and inspire you. Again, welcome to the Power Pages community family, we are so happy you have joined us! Whether you are brand new to the world of data or you are a seasoned veteran - our goal is to shape the community to be your ‘go to’ for support, networking, education, inspiration and encouragement as we enjoy this adventure together! Let us know in the Community Feedback forum if you have any questions or comments about your community experience, but for now – head on over to the forums Get Help with Power Pages and dive right in! To learn more about the community and your account be sure to visit our Community Support Area. We look forward to seeing you in the Power Pages Community! The Power Pages Community Team
User | Count |
---|---|
2 | |
2 | |
1 | |
1 | |
1 |