How can I color the background for the column headers in my report? I need 5 subtle colors across by 10 column headers.

  • 1
  • 2
  • Question
  • Updated 2 years ago
  • Answered
Photo of Tracy

Tracy

  • 10 Points

Posted 2 years ago

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

QuickBaseCoach App Dev./Training, Champion

  • 51,546 Points 50k badge 2x thumb
Can you tell us what kind of report this is (Table or Summary)  and what type of fields are in the columns.  (text or numbers)
Photo of Tracy

Tracy

  • 10 Points
It is a table report.  There are numbers in most of the columns but one column either has "yes" or "no" or it was recently changed to checkmarks.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,572 Points 20k badge 2x thumb
Use the image onload technique with script similar to this:

$("table.searchResults thead tr:eq(0) td:eq(1)").css("background-color", "#FFE173");
$("table.searchResults thead tr:eq(0) td:eq(2)").css("background-color", "#E84F3A");
$("table.searchResults thead tr:eq(0) td:eq(3)").css("background-color", "#8C4CFF");
$("table.searchResults thead tr:eq(0) td:eq(4)").css("background-color", "#3AE8E5");
$("table.searchResults thead tr:eq(0) td:eq(5)").css("background-color", "#B2FF40");

See screenshot of manually executing this code through the console. 

Colors selected through Adobe Kuler with these settings:

https://goo.gl/RnYbim
Photo of Gaurav Sharma

Gaurav Sharma

  • 5,758 Points 5k badge 2x thumb
Hi Dan,

In one of my scenario I tried to put the legend on the report but it shows only on the default report.

Is there any way where we can mention the report id?

Thanks,
Gaurav
Photo of Tracy

Tracy

  • 10 Points
That is exactly what I am looking to do, but I am not a "proficient" QB Administrator.  I am not sure where to insert the script and my screen does not look like that on the right hand side.
Photo of Tracy

Tracy

  • 10 Points
So I managed to get everything to work in the "console" while manually executing, but it disappears when I click off.  I assume that is because the script is not loaded where it should be to keep it every time the page reloads.  I am not sure how to use the IOL technique and where to put the script.  I have tried numerous things but nothing works and I really need some specifics.  Do you have screen shots of where to go within the table example you showed?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,572 Points 20k badge 2x thumb
Your are on the right track. The step-by-step instructions for implementing the image onload technique are documented here:

https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=294

I should mention that the image onload technique is cutting edge technology for customizing QuickBase. Why even employers are asking for engineers skilled in the art of image onload as exemplified by this recent job posting:
This position requires a high level of skills on the following:
o Proven proficiency and experience in the QuickBase platform including complex parent/child relationships, dynamic form rules, embedded form reports, pages and dashboards, and specially HTTP API calls, "Image onLoad" using BackboneJS and Exact Forms
o Proven proficiency in JavaScript, Ajax, well formed HTML5, CSS3 and XML
http://orlando.craigslist.org/sof/5963631940.html
If you need assistance implementing this solution fee free to contact me using the information in my profile:

https://quickbase-community.intuit.com/users/513/
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,572 Points 20k badge 2x thumb
I added the code to moduls.js pages and posted it here:

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=546

As you can see in this case I don't typically repeat whole IOL instructions and sometimes just post the essential code. This is just a shortcut for me to save time in the case it confuses anyone.
This is really cool, but how can you make a column header nowrap ?
(Edited)
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,546 Points 50k badge 2x thumb
In general, and nothing to do with changing the native behavior of QuickBase, if you want to force a column to not wrap you can either change the field name or the column header override name to one with no spaces.

So for example  Monthly Sales Forecast will wrap.
but
Monthly_Sales_Forecast 

will not wrap.
OH!   That was painless :)
Thanks Mark!