How to make a Card Text Blink

[Anonymous]

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!

[Anonymous]

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]

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]

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

[Irwan]

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.

[OwenAuger · Accepted solution]

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