HTML in Summary Number

mbelmont
mbelmont Contributor
in Magic ETL

Hey all!

 

HTML is not enabled in summary numbers correct?

Best Answers

  • jaredpk
    jaredpk Domo Employee
    Answer ✓

    Actually, you can use HTML in summary numbers.  To do that you have to encapsulate the HTML tags in single quotes to make it beastmode/mysql friendly.  It's not always for the faint of heart, but if you are comfortable with beastmodes and html you can do some nice things.  I have used it to color-code numbers green or red, depending on if they are above or below a certain target.

    I work for Domo.
    **Say "Thanks" by clicking the thumbs up in the post that helped you.
    **Please mark the post that solves your problem as "Accepted Solution"
  • jaredpk
    jaredpk Domo Employee
    Answer ✓

    Here is one that changes the beastmode fonts as an example:

    CONCAT(
    '<div style="background-color:#bbe491; color:#000000; font-weight:bold; width: 100%; height:100%; margin:-20px; padding:20px">', '+$', `WoW Revenue Change`, ' (+', `WoW Percent Change, '%)','</div>'

    )

    I work for Domo.
    **Say "Thanks" by clicking the thumbs up in the post that helped you.
    **Please mark the post that solves your problem as "Accepted Solution"
  • mbelmont
    mbelmont Contributor
    Answer ✓

    Are you sure you are not changing anything?  I am getting a fine result and all I did was switch fields to those in my dataset (also a string field)

     

    CONCAT('<div class="big_number_option" style="color:#000000; line-height: 10px; padding:7px;font-weight:normal">',
    MAX(CASE
    When `19` = 'Purchase' then 'Regular'
    Else `19`
    End),'</div>')

     

     

  • mbelmont
    mbelmont Contributor
    Answer ✓

    CASE
    WHEN IS NULL `DATE.001`
    THEN CONCAT(AVG(`NUMBER.001`),<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'RESPONSE 1', '</a></div>')
    WHEN IS NULL `DATE.002` AND DATEDIFF(CURRENT_DATE(),`DATE.001`) > 2 AND `STATUS.001` = 'Alpha'
    THEN CONCAT(AVG(`NUMBER.001`),'<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'RESPONSE 2', '</a></div>')
    END

     

    Let me know if that doesn't make sense, I edited this for the thread.

«1

Answers

  • jaredpk
    jaredpk Domo Employee
    Answer ✓

    Actually, you can use HTML in summary numbers.  To do that you have to encapsulate the HTML tags in single quotes to make it beastmode/mysql friendly.  It's not always for the faint of heart, but if you are comfortable with beastmodes and html you can do some nice things.  I have used it to color-code numbers green or red, depending on if they are above or below a certain target.

    I work for Domo.
    **Say "Thanks" by clicking the thumbs up in the post that helped you.
    **Please mark the post that solves your problem as "Accepted Solution"
  • mbelmont
    mbelmont Contributor

    I see what I was doing, I was encapsulating only the portion I needed changed, not the whole string.

     

    Thanks

  • Hua
    Hua Member

    It is good to know.  I remmeber trying HTML tags in a beastmode field created for summary, but not working.  Can you please share a working example?

     

    Thanks.

  • jaredpk
    jaredpk Domo Employee
    Answer ✓

    Here is one that changes the beastmode fonts as an example:

    CONCAT(
    '<div style="background-color:#bbe491; color:#000000; font-weight:bold; width: 100%; height:100%; margin:-20px; padding:20px">', '+$', `WoW Revenue Change`, ' (+', `WoW Percent Change, '%)','</div>'

    )

    I work for Domo.
    **Say "Thanks" by clicking the thumbs up in the post that helped you.
    **Please mark the post that solves your problem as "Accepted Solution"
  • Hua
    Hua Member

    I tested this out, but it didn't work for me.  The summary shows with all the tags there.......

     

    Code:

    CONCAT(
    '<div style="background-color:#bbe491; color:#000000; font-weight:bold; width: 100%; height:100%; margin:-20px; padding:20px">', '+$',MAX(`ReleaseName`), '</div>')

     

    The output is as shown in the attached image.

     

    Thanks.

  • jaredpk
    jaredpk Domo Employee

    Hi -- one important thing to note is that sometimes the HTML will show up as tags until you actually save the card and it renders.  If you have gotten your beastmode to validate that's great.  So then save to see if it renders as expected.

     

    The other hint I would give you is to start simply, maybe just a section to color code a number.  Once that works correctly then try adding on other attributes.

    I work for Domo.
    **Say "Thanks" by clicking the thumbs up in the post that helped you.
    **Please mark the post that solves your problem as "Accepted Solution"
  • Hua
    Hua Member

    Great!  It indeed showed up with color and font size change after saving the card.  Thank you!

  • AshfordMH
    AshfordMH Contributor

    Has anyone had success using HTML on a Beast Mode that uses a Case statemtent? Could that work? An example:

     

    max((CASE
       When `XX` =  'No'  then 'Regular'
       Else `XX`
       End'))

     

     

  • mbelmont
    mbelmont Contributor

    Yes, you simply add the CONCAT() with the assocaited HTML code in the result of the associated WHEN statements.

  • AshfordMH
    AshfordMH Contributor

    @mbelmont Still not working for me, could you please advise? :

     

    max((CASE
    CONCAT('<div class="big_number_option" style="color:#000000; line-height: 10px; padding:7px;font-weight:normal">'
    When `XX` = 'No' then 'Regular'
    Else `XX`
    '</div>')
    End))

     

     

  • mbelmont
    mbelmont Contributor

    The HTML has to be in the result of the case statement, I am assuming in the below that you want the positive result of the case statement to edit the test using the HTML you provided:

     

    MAX(
    CASE
    WHEN `XX` = 'No' THEN CONCAT('<div class="big_number_option" style="color:#000000; line-height: 10px; padding:7px;font-weight:normal">','Regular','</div>')
    ELSE `XX`
    END
    )

     

    If you want both of the results to have the edited test simply copy the CONCAT() with the field reference.

  • mbelmont
    mbelmont Contributor

    Oh, and I was assuming that you would want different text formats for the two values; based on your reply it looks like you might want it to apply to the any result.  If that is the case then:

     

    CONCAT('<div class="big_number_option" style="color:#000000; line-height: 10px; padding:7px;font-weight:normal">',(CASE WHEN `XX` = 'No' THEN 'Regular' ELSE `XX` END),'</div>')

  • AshfordMH
    AshfordMH Contributor

    Thanks for your help - although i think the MAX function is throwing it off so that it doe not validate..

  • RGranada
    RGranada Contributor

    Beware of using concat's in summary numbers if you want them later to be imported by Powerpoint Plugin. It doesn't import summary numbers originated in concats.

    Ricardo Granada 

    MajorDomo@Lusiaves

    **If the post solves your problem, mark it by clicking on "Accept as Solution"
    **You can say "Thank you" by clicking the thumbs up in the post that helped you.
  • mbelmont
    mbelmont Contributor

    I only included that as it was in your original reply; however it is not needed if all of the results end in a CONCAT() statement or if you use the second version I sent you.  I am assuming you are using the MAX() to get it to show in a summary number, which CONCAT() will do as well.

     

     

  • AshfordMH
    AshfordMH Contributor

    Thanks - it is working, but showing this: (See attached)

  • mbelmont
    mbelmont Contributor

    Can you send me the exact code you are using?

  • AshfordMH
    AshfordMH Contributor

    Sure, thanks for your patience!

     

    CONCAT('<div class="big_number_option" style="color:#000000; line-height: 10px; padding:7px;font-weight:normal">',
    (CASE
    When `Collector/Reseller` = 'No' then 'Regular'
    Else `Collector/Reseller`
    End),'</div>')

  • mbelmont
    mbelmont Contributor

    It looks fine to me, are you looking at the summary number on the card or in the editor?  It will always appear as HTML in the editor but is fine on the card.

     

    If it still doesn't work try adding back your MAX() in front of the CASE() statement:

     

    CONCAT('<div class="big_number_option" style="color:#000000; line-height: 10px; padding:7px;font-weight:normal">',
    MAX(CASE
    When `Collector/Reseller` = 'No' then 'Regular'
    Else `Collector/Reseller`
    End),'</div>')

  • AshfordMH
    AshfordMH Contributor

    Yes, thats in the Summary number on the card... also, I added the Max as you mentioned,  Invalid Formula : This calculation contained a syntax error

  • mbelmont
    mbelmont Contributor
    Answer ✓

    Are you sure you are not changing anything?  I am getting a fine result and all I did was switch fields to those in my dataset (also a string field)

     

    CONCAT('<div class="big_number_option" style="color:#000000; line-height: 10px; padding:7px;font-weight:normal">',
    MAX(CASE
    When `19` = 'Purchase' then 'Regular'
    Else `19`
    End),'</div>')

     

     

  • AshfordMH
    AshfordMH Contributor

    Not sure what was different, but that worked! Thanks so much! 

  • mbelmont
    mbelmont Contributor

    Image result for programmer memes

     

    hahaha, no problem!  

     

     

  • [Deleted User]
    [Deleted User] Member

    Great collaboration @AshfordMH @mbelmont & @RGranada!!!

  • jkimmey23
    jkimmey23 Member

    When using html in a beast mode for the summary number, the formula shows as a text dimension and doesn't show up in the summary drop down. Do you have a solution for how to get the html formula to appear in the summary drop down?

  • jaredpk
    jaredpk Domo Employee

    Make sure you are using aggregate functions (Avg, Sum, Max) etc. around all numbers.  Summary numbers need those to correctly render.

    I work for Domo.
    **Say "Thanks" by clicking the thumbs up in the post that helped you.
    **Please mark the post that solves your problem as "Accepted Solution"
  • jkimmey23
    jkimmey23 Member

    Thanks!

  • Tatyana_K
    Tatyana_K Member

    Hello - Are you able to share the beast mode code that you've used for color coordinating results based on value? Thanks!

  • mbelmont
    mbelmont Contributor
    Answer ✓

    CASE
    WHEN IS NULL `DATE.001`
    THEN CONCAT(AVG(`NUMBER.001`),<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'RESPONSE 1', '</a></div>')
    WHEN IS NULL `DATE.002` AND DATEDIFF(CURRENT_DATE(),`DATE.001`) > 2 AND `STATUS.001` = 'Alpha'
    THEN CONCAT(AVG(`NUMBER.001`),'<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'RESPONSE 2', '</a></div>')
    END

     

    Let me know if that doesn't make sense, I edited this for the thread.

  • jwheeler_liveops
    jwheeler_liveops Member

    Could you provide a link to the reference material in the knowledgebase for this topic?

Categories