HTML in Summary Number

Hey all!

 

HTML is not enabled in summary numbers correct?

Best Answers

  • jaredpk
    Accepted 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.

  • jaredpk
    Accepted 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>'

    )

  • mbelmont
    Accepted 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
    Accepted 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

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

     

    Thanks

  • Hua
    Hua 🟡

    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.

  • Hua
    Hua 🟡

    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.

  • 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.

  • Hua
    Hua 🟡

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

  • 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'))

     

     

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

  • @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))

     

     

  • 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.

  • 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>')

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

  • 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.

  • 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.

     

     

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

  • Can you send me the exact code you are using?

  • 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>')

  • 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>')

  • 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

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

  • Image result for programmer memes

     

    hahaha, no problem!  

     

     

  • DaniBoy
    DaniBoy

    domo

    💎

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

  • 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?

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

  • Thanks!

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

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