Power BI Tip of the Day: Creating a custom filters panel to hide those slicers

Being able to interactively filter data is an important part of most Power BI reports. However, there are more important things to display on your valuable report page real estate than slicers.

So, is there a way to get the benefits of slicers without them taking up half the space on your report page? Fortunately, the answer is yes, and I'll show you how below!

What will the end result look like?

Starting with the end product in mind, I propose adding a custom "Filters panel" that users can show on demand and hide after interacting with the slicers. This way, it won't take up any report page space.

I suggest adding a blurred background and a shadow on the side of the filters panel to guide the user's focus onto the slicers, giving an interactive pop-out feel to the filters panel.

Adding the Base Components

It’s a bit early to ruin the magic, but all we need for this part are two squares - that's it...

One will act as the background for the slicers, and the other will create the blurred background effect.

Both can be found under “Insert” and “Shapes” as seen in the image below.

After adding the filter shape, place it wherever you like.

• I stick with placing it on the left side of the screen, as most users expect this.

You should also change the colors to match your desired theme.

Lastly, add the slicers you want to include on top of the shape.

Add a shape that covers the entire page. To add the blurred effect, select the shape and, under "Style," set a transparency.

• In my example, I chose a dark gray color with 75% transparency, but any color would work.

Having a blurred background is not strictly required, but I think it adds a nice touch. Even if you don’t want a background at all, I suggest adding one anyway, as it provides some nice UX possibilities that I’ll explain later. In this case, just set the transparency to 100% - it's still there, but the users won’t notice.

Adding the Interactive Feel

Now, let's add some functionality.

Under "View" (1) in the menu bar, toggle "Selection" (2) to show the selection panel on the right side of the window.

In the selection panel on the right-hand side of the window (3), you can change the order by drag-and-drop or by selecting an item and using the arrows above the list. It's important that the Filters Panel is below all slicers and that the Background is below the Filters Panel.

After sorting the layer order, select all slicers, the filters panel, and the blurred background (hold Ctrl to select multiple). With all selected, right-click any ? Group ? Group.

• Bonus tip: I recommend renaming the created group to something like “Filters group” - you’ll thank me later ??

Bookmarks provide the states that we can switch between

Also under “View” and next to “Selection,” we can toggle “Bookmarks.”

Here we add two bookmarks and give them meaningful names. I like to include a reference to the page name and “Show/Hide Filters.”

Show Filters

First, make sure the eye (1) next to the created filters group shows that the filters panel is visible. Next, right-click on the “Show Filters” bookmark, remove the “Data” checkmark, and press “Update.”

Removing the checkmark next to “Data” is very important. If not removed, slicers reset after the user hides the filters panel again!

Hide Filters

Do the same for “Hide Filters,” but start by clicking the eye next to the filters group (2) to hide the filters panel.

Adding actions to UI elements lets users change the state

We now have a bookmark to show the filters panel and one to hide it. The next step is to assign these bookmarks to UI elements so users can easily interact with them.

This is where the UX possibility of the (blurred) background comes in. Even if we add a fully transparent background, it is still a UI object that we can assign actions to. Clicking outside of popups is a common way to close them, so we should take advantage of this in our design.

In any case, we need to add a Bookmark type action to both the Filters Panel and the Background. In both cases, we want to add the “Hide Filters” bookmark.

The resulting functionality is that if the user clicks anywhere on the filters panel or background, it will trigger the bookmark, hiding the filters panel.

Having dealt with how we want the users to be able to hide the filters panel, we now need to ensure that there is a way for them to show it in the first place.

To accomplish this, we need to first navigate to the menu once more. This time, we should select the “Buttons” section, as illustrated in the screenshot below.

After adding the button design you want, proceed by adding the “Show Filters” bookmark as an action to the button.

Just like with the "Hide Filters" bookmark, clicking this button now triggers the bookmark, showing the filters panel so the user can interact with the slicers.

In Conclusion

And there you have it. We've now created a dynamic and interactive filters panel that enhances the user experience of our Power BI report!

By implementing a filters panel, we can keep the report page clean while still giving users an easy way to filter data.

Hopefully, you've also gained some insights into using basic shapes to design a functional UI, creating and managing bookmarks, and assigning actions to elements to improve usability.

I believe that using small tricks like this offers a more engaging and intuitive way for users to interact with their data. I encourage you to try implementing a filters panel in your own reports!

?? Subscribe for More Tips: Get more practical Power BI tips and tricks by subscribing to the newsletter!