Discussions

Expand all | Collapse all

Total Field or Column Header Colorization in a Summary Report

  • 1.  Total Field or Column Header Colorization in a Summary Report

    Posted 06-22-2018 13:48
    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. 

    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1736853/RackMultipart20180622-122496-fv1hts-Summary_inline.png?1529674917">
    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! 
     


  • 2.  RE: Total Field or Column Header Colorization in a Summary Report

    Posted 06-22-2018 14:00
    You can use any Formula Rich text fields as row and column headers.


  • 3.  RE: Total Field or Column Header Colorization in a Summary Report

    Posted 06-22-2018 14:19
    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?


  • 4.  RE: Total Field or Column Header Colorization in a Summary Report

    Top
    Contributor
    Posted 06-22-2018 14:20
    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"})


  • 5.  RE: Total Field or Column Header Colorization in a Summary Report

    Posted 06-22-2018 14:35
    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? 


  • 6.  RE: Total Field or Column Header Colorization in a Summary Report

    Posted 06-22-2018 14:43
    My solution is simple.

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

    There are also formulas to color the background.


  • 7.  RE: Total Field or Column Header Colorization in a Summary Report

    Top
    Contributor
    Posted 06-22-2018 15:01
    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.$;


  • 8.  RE: Total Field or Column Header Colorization in a Summary Report

    Posted 06-22-2018 15:01
    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.


  • 9.  RE: Total Field or Column Header Colorization in a Summary Report

    Top
    Contributor
    Posted 06-22-2018 15:05
    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?


  • 10.  RE: Total Field or Column Header Colorization in a Summary Report

    Top
    Contributor
    Posted 06-22-2018 15:28
    >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.