3 Replies Latest reply on Jan 9, 2014 9:43 PM by keywee

    Tooltips for PCT_GRAPH formatted columns

    keywee

      Hi,

       

      The PCT_GRAPH column formatting under Column Attributes is a very cool feature, e.g. PCT_GRAPH:cccccc:777777:100

      Does anyone know how to add Tooltips to the column (preferably dynamic ones) once it is set to this format?

       

      cheers,

      k

        • 2. Re: Tooltips for PCT_GRAPH formatted columns
          keywee

          Hi Joni,

           

          Thanks for your suggestion.  This plugin is really good and I have used it in the past, unfortunately I couldn't get it to work for PCT_GRAPH columns as they are rendered quite differently when it comes to the html.

          I have also tried Dynamic Actions in order to add a "Title" attribute to the existing html tag that is generated, but my jquery/javascript skills are obviously not good enough as I can't make it work.

           

          cheers,

          k

          • 3. Re: Tooltips for PCT_GRAPH formatted columns
            keywee

            Okay, I have found a way to achieve this but it is not pretty.

             

            There must be a much more elegant way to do this so if anyone has a better solution then please let me know, but here we go:

            • Create your report as normal and set the desired column to a graphical format, e.g. PCT_GRAPH:cccccc:777777:150
            • For the purpose of this example we will call the column "salary_percentage"
            • Make sure that the "Display as" type is set to  "Display as text(escape special characters, does not save state)".  - Normally to make this render properly on the page you would choose "Standard Report Column"
            • Run the report.  You will get the full div tag printed on the screen in the report column.  Copy the <div> ... </div> entries for one record and paste it somewhere or keep it in your clipboard e.g.
            <div style="width:150px;height:14px;background:#cccccc;border-top:1px solid #aaaaaa;border-left:1px solid #aaaaaa;border-bottom:1px solid #ffffff;border-right:1px solid #ffffff;">
            <img src="/i/1px_trans.gif" width="61" alt="61" height="14" border="0" style="background:#777777;">
            </div>
            
            

            Obviously this will vary depending on your specifics, but the key tag is the width as this is specifying the value for each record

            • Now return to the APEX builder, go into the column and remove the PCT_GRAPH formatting.  Copy the div tag html that you saved previously above into the HTML Expression field.  Make sure the column is set to "Standard Report Column"
            • If you ran the report now you should see your column displayed as a percentage bar but all values will be the same
            • Make sure that your report value (normally by definition as a percentage it will be between 0 and 100) is rounded to 0 decimal places in the SQL query e.g.   select round(salary_percentage)...
            • Edit the div tag text in the HTML Expression field. Replace the following text width="61" alt="61" (in the example above) with width="#SALARY_PERCENTAGE#" alt="#SALARY_PERCENTAGE#%" title="#SALARY_PERCENTAGE#%"
            • Now run the report.  You should see the same result as if you had used a standard PCT_GRAPH column format but hovering your mouse over the bar should now show a standard title tooltip with the value for each record.

            I haven't tested this for every eventuality and like I said, it's not pretty, but in the absence of a better solution it does seem to work.


            cheers,

            k