Adding a report legend using report description

  • 0
  • 2
  • Question
  • Updated 4 months ago
  • In Progress
I want to add colored icons to my report description. How would I put something like this on top of my report, where I could maybe change the colors by specifying a hex value?
Photo of Pedro Rocha

Pedro Rocha

  • 218 Points 100 badge 2x thumb

Posted 1 year ago

  • 0
  • 2
Photo of Pedro Rocha

Pedro Rocha

  • 218 Points 100 badge 2x thumb
Is this possible? Anybody?
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 52,786 Points 50k badge 2x thumb
This is not possible natively.
Photo of Gaurav Sharma

Gaurav Sharma

  • 5,758 Points 5k badge 2x thumb
This is possible with some code and can do with Dan's famous IOL technique.

Are you familiar with IOL technique? If not?

Please go through this link and read it because Dan had described it in a very simple way.

https://community.quickbase.com/quickbase/topics/how-do-i-setup-the-image-onload-technique-iol

Please apply the same in your application and change the code of module.js to this:

$("#descriptionInFacets").html("Legend  <img src= 'https://images.quickbase.com/si/16/221-point_red.png'> Project Overdue<img src='https://images.quickbase.com/si/16/223-point_yellow.png'> Task Overdue <img src='https://images.quickbase.com/si/16/228-rect_green.png On Time <img src='https://images.quickbase.com/si/16/220-point_gray.png'> Inactive");

Please let me know if you have any query or need any help in this.

Thanks,
Gaurav 
(Edited)
Photo of Pedro Rocha

Pedro Rocha

  • 218 Points 100 badge 2x thumb
Thank you! I'll give it a try.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
Just put your raw HTML in the description section of the report and use IOL with this single statement:

$("#descriptionInFacets").html($("#descriptionInFacets").text());
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
Working demo:

HTML Report Description ~ List All
https://haversineconsulting.quickbase.com/db/bmwtjd4pk?a=q&qid=1

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

Notes:

(1) The HTML decoding was not applied to the table homepage where the raw HTML markup appears unrendered:

https://haversineconsulting.quickbase.com/db/bmwtjd4pk?a=td

(2) There is an unlikely scenario where this might be abused. Although an admin is the only person that could implement this script, once implemented it might be possible for a user to add script to his own report description and then lure others to visit that report.

<script>alert("xss");</script>

As a general rule an administrator should have a sufficient level of trust of all users with rights to create reports if they intent to implement this feature.
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
UPDATE:

I put a crude <script> blocker into the code:

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=588
Photo of Giuseppe macri

Giuseppe macri

  • 544 Points 500 badge 2x thumb
can this method be used to inject application wide variables like start and close dates into the description?
Photo of Eric Sagong

Eric Sagong

  • 204 Points 100 badge 2x thumb
I have tried using this and have followed all the steps for the IOL.  I can get the "I now own your page" alert to appear in the browser but I cannot get the legend/images to render.  This is what I'm getting:  



Any idea what I might be doing wrong?  I saw the link to the page where the legend is unrendered.  Making me wonder if I need to do something else - yet it's the exact same formula as the page that shows the legend rendered.  Can anyone point me in the right direction?
Photo of Giuseppe macri

Giuseppe macri

  • 494 Points 250 badge 2x thumb
Can't see the whole report but the IOL field (typically noted as [-]) isnt there. You sure you set up IOL correctly?
Photo of Eric Sagong

Eric Sagong

  • 204 Points 100 badge 2x thumb
Thank you for your reply.  I'll double check!