Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
2 years ago
Solved

How to make a Card Text Blink

Hello All,

I am trying to create a card that uses a measure and if negative it blinks Red if positive its just normal black text.

 

All my reading says to HTML or CSS but not entirely sure how to do this.


Can any one help me please?

Thank you!

  • OwenAuger's avatar
    OwenAuger
    2 years ago

    HI Anonymous

    For flashing text, you could construct HTML or SVG and use the HTML Content (Lite) custom visual.

     

    I have attached a small example where I defined the content for the "card" as an SVG.

    The measure is as follows:

    Profit $ SVG = 
VAR MeasureValue = [Profit $]
VAR MeasureSign = SIGN ( MeasureValue )
VAR MeasureFormatted =
    FORMAT ( MeasureValue, "#,##0;(#,##);-" )
VAR TextColour =
    SWITCH (
        MeasureSign,
        -1,
        "red",
        "black"
    )
VAR AnimationTag =
    SWITCH (
        MeasureSign,
        -1,
        "<animate attributeName='opacity' values='1;0;1' dur='1s' repeatCount='indefinite' />",
        ""
    )
VAR SVG_String = 
        "<svg viewBox='0 0 300 80' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet'>
        <text x='50%' y='50%' font-family='DIN' font-size='50' fill='" & TextColour & "' dominant-baseline='middle' text-anchor='middle'>"
        & AnimationTag & MeasureFormatted & "</text></svg>"
RETURN
    SVG_String

     

    The formatting would likely need to be adjusted to meet your needs but this should be a start at least 🙂

     

    Regards

     

5 Replies

  • Anonymous's avatar
    Anonymous
    Not applicable
    2 years ago

    Hi Anonymous 

    Power Bi's visualizations don't support embedding custom HTML or CSS code, so card visuals can't be set directly with CSS or HTML.
    Irwan's reply can be used as a workaround for your reference.

     

     

     

     

     

     

    Best Regards,

    Jayleny

     

    If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

  • Irwan's avatar
    Irwan
    Icon for Super User rankSuper User
    2 years ago

    hello Anonymous 

     

    first, create the measure for color conditional formating.

    Color Palette = 
    IF(
        'Table'[Nom]<0,
        "#FF0000",
        "#000000"
    )

    next, in your card visual option, go to "Callout value" option. then choose conditional formating.

    choose Field Value in Format Style.

    then, select the measure in field.

    press OK

     

    here is the result.

    negative

    positive

     

    Hope this will help you.

    Thank you.

     

    • Anonymous's avatar
      Anonymous
      Not applicable
      2 years ago

      Do you know how to get it to blink or flash, please?

      • Irwan's avatar
        Irwan
        Icon for Super User rankSuper User
        2 years ago

        hello Anonymous 

         

        i have never seen a blinking or flashing color in conditional formating since it is color or icon selections.

        But the others might know.

         

        Thank you.