We are currently using the gantt charting functionality within Quickbase to highlight the workload of our current developers. We are creating tasks that has vacation in order to put vacations on the same task level. There is an outstanding request to make the blue bar purple so you can differentiate between the two. Currently we have created a Calulated field with the HTML added but can't quite get the jquery working correctly. This is what we have at the moment.
If([Task Name]="Vacation","<script type=\"text/javascript\">$(document).ready(function() { $('#timeline img').attr('src',('https://images.quickbase.com/si/16/821-check_purple.png')); });</script>","")
This should replace the image in the div of the current row with the image in the script. Any help would be awesome
thank
It looks like there are a couple issues causing your code to not work. First, let me make a distinction between "Calculated Fields" and "Formula Fields" in Quickbase. Calculated fields are defined in the report view (meaning they are viewable only in that report and no other) and do not allow HTML. Formula fields, on the other hand, are created like traditional fields and allow you to select a checkbox allowing some HTML. You'll need to use a formula field to get code to run in a form or report. You'll also need to make sure you make the field visible in your report otherwise the code won't be executed.
Once that is resolved, your script probably won't run because Quickbase limits the HTML tags allowed. Instead of changing the images, you'll just see the text of your script displayed in the field. You can get around this by putting your script in the onload tag of an IMG element. This will have the added effect of no longer requiring document.ready(function(){}); to properly execute.
Finally, the last problem is the selector. Even though you are using a formula field attached to a specific record, the script itself executes for the entire page. In order to select only the img elements for the records where Task Name is "Vacation", you'll need a way to distinguish between rows. Fortunately, the timeline report wraps each row in a div giving it an ID of "rid" + the record id.
So, if you put that all together you should end up with a formula text field with "Allow some HTML tags to be inserted in the field" checked and this as the formula:
If([Task Name]="Vacation", "<img qbu=\"module\" src=\"/i/clear2x2.gif\" onload=\"javascript:$('#rid" & [Record ID#] & " > td:has(div.timeline) > div.timeline > img').attr('src',('https://images.quickbase.com/si/16/821-check_purple.png'));\">", "")
I tested the above formula in my own timeline report and it worked as expected.
EDIT:
To exclude the clear2x2.gif image that Quickbase places for spacing automatically when editing the source:
If([Task Name]="Vacation", "<img qbu=\"module\" src=\"/i/clear2x2.gif\" onload=\"javascript:$('#rid" & [Record ID#] & " > td:has(div.timeline) > div.timeline > img:not([src^="/i/clear2x2.gif"])').attr('src',('https://images.quickbase.com/si/16/821-check_purple.png'));\">", "")