Hello,
I have a summary report shown below, 1 of 9 that I'm building. Each of these summary reports takes a particular set of Statuses and totals them. Each total OR column headers will need to be colorized (red, yellow or green) and placed on our Homepage Dash. These status totals are not related to any dates or timelines. They are used for showing the total $ amount of insurance policies that were entered for the previous month, current month and next month by status.
For example, the report above shows policies from the previous month. It would be amazing if I could make the Status and Annual TP column header red, given these totals represent policies that were Declined, Surrendered, Withdrawn etc.
My next report would then be colorized yellow for policies that have a different set of statuses, then green column headers for policies for example that have been paid.
Hope this makes sense! I'm open to any suggestions.
Thanks for any help!
Question
Total Field or Column Header Colorization in a Summary Report
+5This topic has been closed for replies.
+7I'm intrigued! How would you do this?
We are not talking about row colorization or even field colorization here, right? How would you color the actual header in a report as opposed to the field or row being populated in the report?
We are not talking about row colorization or even field colorization here, right? How would you color the actual header in a report as opposed to the field or row being populated in the report?
I think this is what you want and you can do it with the script shown below:
$("td[id=anchorCell]:eq(0)").nextAll().andSelf().css({backgroundColor: "red"})
$("td[id=anchorCell]:eq(1)").nextAll().andSelf().css({backgroundColor: "blue"})
$("td[id=anchorCell]:eq(2)").nextAll().andSelf().css({backgroundColor: "green"})+5Thanks Mark / Dan,
Appreciate the quick response! So Dan, this solution looks good to me. Can you elaborate on the process for a beginner code writer for my sake and those that are in my position? Steps for implementing this code?
Appreciate the quick response! So Dan, this solution looks good to me. Can you elaborate on the process for a beginner code writer for my sake and those that are in my position? Steps for implementing this code?
My solution is simple.
IF([Status]="Urgent", "<font color=red<b>" & [Status], [Status])
There are also formulas to color the background.
IF([Status]="Urgent", "<font color=red<b>" & [Status], [Status])
There are also formulas to color the background.
Just create a code page named script.html (it is a HTML page not a JS page) and place the code in the pastie below in it. Then place the code page on your dashboard (at the bottom so it is not very visible). There is nothing visible in script.html but when it loads it will modify the headers of the summary reports to the colors specified.
Color Summary Report Headers
https://haversineconsulting.quickbase.com/db/bnsv6rm74
Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=668
Notes:
(1) I named a new technique with the demo and called it "Dashboard Widget Script". It is worth of a name as it basically runs the script in the context of the parent and even uses the jQuery object in the parent so you don't have to seperately load jQuery in the <iframe>ed web page widget. See this line of code:
Color Summary Report Headers
https://haversineconsulting.quickbase.com/db/bnsv6rm74
Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=668
Notes:
(1) I named a new technique with the demo and called it "Dashboard Widget Script". It is worth of a name as it basically runs the script in the context of the parent and even uses the jQuery object in the parent so you don't have to seperately load jQuery in the <iframe>ed web page widget. See this line of code:
var $ = window.parent.$;
+7Just to round this out, then, to format the actual values in a report (font and background) is relatively easy since it can be done "natively" via a rich text field. There is a solution to modify headers, but that would involve Dan's famous Image Onload Technique to execute some javascript on the page.
Now that Quick Base is starting to introduce flexibility in adding color to apps, a sensible feature request may be to extend that to other UI elements like report headers.
Now that Quick Base is starting to introduce flexibility in adding color to apps, a sensible feature request may be to extend that to other UI elements like report headers.
This is a new technique introduced here called "Dashboard Widget Script". It basically injects script into the dashboard through a web page widget and runs then script in the context of the dashboard using the dashboard's copy of jQuery. Why didn't I think of this earlier?
>Now that Quick Base is starting to introduce flexibility in adding color to apps, a sensible feature request may be to extend that to other UI elements like report headers.
Since this is a No Code platform we will need pages of checkbox options and color pickers for every UI element that can be colorized by builders. Probably need to hire a new Product Manager for Checkbox Options and Color Pickers too.
Since this is a No Code platform we will need pages of checkbox options and color pickers for every UI element that can be colorized by builders. Probably need to hire a new Product Manager for Checkbox Options and Color Pickers too.
I know this is a really old post lol but it worked for changing the background color on my home page for reports. I'm trying to figure out how to change the font color too but I'm not sure how. I haven't been able to find any resources to help me understand the code that posted above. I actually couldn't find any other help articles at all on this.
Any ideas?
+24Sorry, but I can't really help with that code.
I do have some code from Kirk Trachey magic buttons app.
var text redbox = "https://i.imgur.com/yJEyaf7.png"; // red
var text yellowbox = "https://i.imgur.com/5DhaU3e.png"; // yellow
var text greenbox = "https://i.imgur.com/gR9BVs6.png"; // green
var text graybox = "https://i.imgur.com/h3f203O.jpg"; // gray
var text orangebox = "https://i.imgur.com/ogUnxiE.png"; // orange
var text box = If([Performance]<0.6,$greenbox, If([Performance]<0.9,$yellowbox,$redbox));
var text widthval ="\"" &Min(Max([Performance]*200,0),200)&"\"";
var text widthvalbalance ="\"" &ToText(Max(0,Min(200,200-([Performance]*200))))&"\"";
"<div style='position:relative;color:white;'>" &
"<div style=\"width: 200px; \"><img height = 18 width="&$widthval & "src=\""&$box&"\" title='Performance: " & Round([Performance]*100) & "%' />" &"<img height = 18 width="&$widthvalbalance&"src=\""&$graybox&"\" title='Remaining: " & Round((1-[Performance])*100) & "%'/></div>"
& "<div style='position:absolute;top:2px;left:2px;'>"&Round(([Performance])*100)&"%</div>"
& "<div style='position:absolute;top:2px;left:171px;'>"&Round((1-[Performance])*100)&"%</div>"
// TO REMOVE THE DISPLAYED NUMBERS SIMPLY PUT // INFRONT OF LINE 11 AND 12 ABOVE
// This is referencing a [Performance] formula field that is measuring "Performance" against an "SLA Max".
// There are 2500 other graphics available for your QuickBase application at: https://www.quickbase.com/db/9kaw8phg?a=ShowPage&pageid=134. This bar changes color when a threshold has been met.
// This formula was built upon the original code of Sam Jones and subsequent refinements by Avinash Sikenpore
Sign up
Already have an account? Login
Login to the community
Login with Quickbase US – quickbase.com Login with Quickbase EU – quickbase.eu
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.