Total Field or Column Header Colorization in a Summary Report

  • 0
  • 1
  • Question
  • Updated 5 months ago
  • In Progress
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! 
 
Photo of Todd

Todd

  • 150 Points 100 badge 2x thumb

Posted 5 months ago

  • 0
  • 1
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,266 Points 50k badge 2x thumb
You can use any Formula Rich text fields as row and column headers.
Photo of Tate Forgey

Tate Forgey

  • 276 Points 250 badge 2x thumb
I'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?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,372 Points 20k badge 2x thumb
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"})
Photo of Todd

Todd

  • 150 Points 100 badge 2x thumb
Thanks 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? 
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,266 Points 50k badge 2x thumb
My solution is simple.

IF([Status]="Urgent", "<font color=red<b>" & [Status], [Status])

There are also formulas to color the background.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,372 Points 20k badge 2x thumb
Just create a code page named script.html (it is a HTML page not a JS pageand 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:
  var $ = window.parent.$;
(Edited)
Photo of Tate Forgey

Tate Forgey

  • 276 Points 250 badge 2x thumb
Just 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.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,372 Points 20k badge 2x thumb
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?
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,372 Points 20k badge 2x thumb
>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.