Home

Adding a dynamic and animated Clear Slicers SVG button

Adding a dynamic and animated Clear Slicers SVG button

Written by

James Mounsey-Moran

in

In Power BI it’s not always obvious when slicers are still applied. Sure, you can clear them with a button but wouldn’t it be better if you had a HUD that told you at a glance and worked in a more dynamic fashion? That’s what we’ll build in this post, a dynamic and animated Clear Slicers SVG button!

Why a HUD and why this?

One of the main reasons for a HUD (heads up display) is to be able to quickly view the state of play. Now naturally as part of PowerBI we have multiple reports that utilise all sorts of filters and slicers applied to our data, and often have additional slicers on reports to change the data or filter on something specific.

When using reports though, it can sometimes be difficult to know if a slicer is still applied and of course PowerBI has built in functionality to clear all slicers. This then became an ideal thing to display on a HUD.

Step 1 – Detect When Slicers Are Applied

The ability to clear all applied is the easy part as I mentioned earlier, this is already part of PowerBI as button functionality. What we need is a measure to be able to detect when slicers are applied so we can use it as part of our SVG code (similar to when we are building cards and all the other fancy things built using SVG)

The measure I’ve put together looks like this and how it works is pretty simple!

FilterStateMonitor = 
VAR TABLE_1 = IF(COUNTROWS(ALLSELECTED(table1)) < COUNTROWS(ALL('table1')), 1, 0)
VAR TABLE_2 = IF(COUNTROWS(ALLSELECTED('table2')) < COUNTROWS(ALL('table2')), 1, 0)
RETURN
IF(TABLE_1 + TABLE_2 > 0, 1, 0)

In this example I have just loaded in a couple of tables. If you have more you want to monitor then just add as additional VARs and add to the final IF statement.

But essentially it:

  • Checks how many rows are currently selected out of the table
  • Compares this to the total rows in the table

If this doesn’t match then it will set the variable to 1, or effectively flagging that a table is filtered.

Step 2 – Create the SVG Icon

What we can do next is then use this as part of a SVG measure to control the icon on the HUD

Here is my SVG (the layout may look similar to my base code in other blogs)

HTML_FilterIcon = 

VAR sizeWidth = 100
VAR sizeHeight = 48

-- Colors
VAR baseColor = "#373737"
VAR textColor = "#f5f5f5"

-- SVG generation
VAR svg = "
<svg xmlns='http://www.w3.org/2000/svg' width='" & sizeWidth & "' height='" & sizeHeight & "' viewBox='0 0 " & sizeWidth & " " & sizeHeight & "'>
  <style>
      .pulse-stroke {
        stroke: #f5f5f5;
        animation: pulseStrokeAnim 2s infinite alternate;
      }
      @keyframes pulseStrokeAnim {
        0% { stroke: #f5f5f5; }
        100% { stroke: #B5F5F3; }
      }
  </style>


    <g transform='translate(34, 9) scale(2)'>
      <path class='pulse-stroke' d='M2 3h12l-4 4v4l-4 2V7L2 3z' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/>
    </g>

    <g class='x-icon' transform='translate(60, 30) scale(0.8)'>
      <line x1='0' y1='0' x2='10' y2='10' stroke='#f5f5f5' stroke-width='3' stroke-linecap='round'/>
      <line x1='10' y1='0' x2='0' y2='10' stroke='#f5f5f5' stroke-width='3' stroke-linecap='round'/>
    </g>

</svg>
"

RETURN 
IF(
    [FilterStateMonitor] = 1,
    "data:image/svg+xml;utf8," & svg,
    BLANK()
)

This will draw an animated filter icon and as you can see at the bottom of the code only when our filter monitor is 1 (filter applied) will it then render the SVG.

The SVG when drawn will look like the below and pulse between light blue and white (of course feel free to change these colours)

Now we have a slicer monitor in a measure, and an SVG that is drawn only when our slicers are applied. This means the icon only appears when it’s actually needed

Step 3 – Add the SVG to a Card

Next we need to add the SVG to a card and if you follow my blog you should be used to this one by now

As with my other examples I have been using the new card visual.

Firstly, on the card, apply the measure under the image section.

  • Select Image URL
  • Select the measure
  • Add a column / value to the card to the Data parameter (any is fine we are going to remove this from view)

Then resize the card to the size within our measure (in my example I have a width of 100px and height of 48px) and then disable the values / labels under the Callout values section:

  • Disable Values
  • Disable Label

Next, remove all padding from the card and clear any existing backgrounds or style effects

Under Visual / Cards:

  • Disable Background
  • Disable Border
  • Change Padding to custom and set all to 0px

Under Visual / Images

  • Change Space between Image and callout to 0px

Under General / Effects

  • Disable Background
  • Under General / Properties
  • Set all Padding to 0px

At this point, the SVG is rendering in a card with no extra styling

Step 4 – Add the Button Action

We have the SVG rendering on the screen, but its just a card, it can’t actually perform any actions. So now we need to layer an invisible button on top.

Insert a new button and set the sizing to exactly match the size of our card containing the SVG. Place the button exactly on top of the card.

Next, remove all the styling, so text, icons, fill, border, everything. It should be completely invisible.

And lastly in the action section set the type to clear all slicers!

Finally we have our button that not only looks good and shows up when needed but also clears all slicers in one click

There we have it, a dynamic and animated clear all slicers button that looks great on our HUD, next let’s cover those buttons you may have seen on my LinkedIn!

More posts