Forum Discussion

JENNIFERPASCHAL's avatar
JENNIFERPASCHAL
Qrew Trainee
2 years ago

Help with Rich Text Elements on Dashboard

Hello -

On my dashboard I have several gauge reports showing as counters and the numbers are all different sizes (and appear bolded compared to other text on screen), so I would love to use a Rich Text element instead to have more control over formatting.

Is there a way to add field values (in this case a summary numeric value) to Rich Text elements using the code <> option? If so, are there any resources on syntax?



------------------------------
Thanks in advance,
Jennifer Paschal
------------------------------
  • Natively within a dashboard its not possible provided that you can't target a single table or records within the code option. That said the two methods I've seen work well are: 

    1. Create a code page and code your own dashboard. Essentially build your own web page with the tiles and presentation that you want so you have absolute control of the page, and then use the webpage/iframe element on the dashboard to display that page.
    2. This option is a little easier but funkier, and that is to create a 'Master' table or some kind of ultimate parent in your application where you can consolidate information and make a single Rich Text field and then put that rich text field on a report by itself to show on a dashboard. Its quirky but the idea is that you make a formula field that looks and feels how you want with whatever style is needed - then you make that the only field on a report where you hide the column labels and limit the report to only one record to show so that its only got the key info you want displayed. Then put that report on a dashboard. Here is an example:The top element in this example is the report/formula. You'll notice that the report header element still shows but the content is more controllable. 


    ------------------------------
    Chayce Duncan
    ------------------------------
    • EricaNorris's avatar
      EricaNorris
      Qrew Member

      How did you hide the column names in the header?



      ------------------------------
      Erica Norris
      ------------------------------

      • ChayceDuncan's avatar
        ChayceDuncan
        Qrew Captain

        In the example the element itself is just a single rich-text field in a report with one record - so I make the report and in the 'Column Properties' for that column I changed the column name to just a space character so that it picks up that there is content but nothing to actually show. You could also put a dash or make the field name something like Summary if you wanted something there. 



        ------------------------------
        Chayce Duncan
        ------------------------------
    • MikeTamoush's avatar
      MikeTamoush
      Qrew Commander

      Chayce, 

      I quite like that rich text field example. Would you be willing to post the code so I can see how you did that? I am not sure how to space things like that using rich text coding, but bet I could decipher and utilize bits and pieces!



      ------------------------------
      Mike Tamoush
      ------------------------------
      • ChayceDuncan's avatar
        ChayceDuncan
        Qrew Captain

        Mike - here is a trimmed down template. In the below - I also have our logo as an element so it feels like an actual dashboard as the very first icon - and then this one has 5 tiles as a reference example where each tile is actually setup as a hyperlink. This example was used from an app that would summarize KPIs and then hyperlink to a Quickbase report that would itemize the records that made up the counter. 

        var text tileStyle = "font-family: Cera Pro, \"Gibson-Regular\", Helvetica, Arial, Sans-Serif; font-weight: 500; font-size: 50pt; width: 20%;float:left;"

        "<div style='width: 100%; text-align:center;'><img src=''></div>" & 
        "<div style='width: 100%;margin:auto;text-align:center;'>" & 
            "<div style='" & $tileStyle & "'><a style='text-decoration:none' href='#'>" & [Tile Value 1]  & "<p style='border-top: 1px solid #222; width: 100%;font-size: 15pt; color:#8f6a2a;'>LABEL 1</p></a></div>" &     

            "<div style='" & $tileStyle & "'><a style='text-decoration:none' href='#'>" & [Tile Value 2]  & "<p style='border-top: 1px solid #222; width: 100%;font-size: 15pt; color:#8f6a2a;'>LABEL 2</p></a></div>" &     

            "<div style='" & $tileStyle & "'><a style='text-decoration:none' href='#'>" & [Tile Value 3]  & "<p style='border-top: 1px solid #222; width: 100%;font-size: 15pt; color:#8f6a2a;'>LABEL 3</p></a></div>" &     

            "<div style='" & $tileStyle & "'><a style='text-decoration:none' href='#'>" & [Tile Value 4]  & "<p style='border-top: 1px solid #222; width: 100%;font-size: 15pt; color:#8f6a2a;'>LABEL 4</p></a></div>" &     

            "<div style='" & $tileStyle & "'><a style='text-decoration:none' href='#'>" & [Tile Value 5]  & "<p style='border-top: 1px solid #222; width: 100%;font-size: 15pt; color:#8f6a2a;'>LABEL 5</p></a></div>" &     
        "</div>"



        ------------------------------
        Chayce Duncan
        ------------------------------