Create a Power BI Slicer Panel

There is nothing worse than having a Power BI report that has 50% of the space taken up with slicers.  When this happens, you only get half the page to visualise the actual data.  But on the flip side, if you don’t have the slicers it can be harder for the report users to filter the data they want to see.  Many users don’t like using the built in filter pane on the right hand side.  All is not lost – there is a great way that you can have the best of both worlds by creating a collapsible Power BI slicer panel that you can show and hide on demand.

Now I didn’t invent this concept – I learnt it from looking at what others have done, such as Amanda Cofsky, Miguel Myers, Mike and Seth from http://powerbi.tips and also Adam and Patrick from GuyInACube.  There are lots of great resources out there to learn tricks like this, so you should check those out.

You can see one simple interpretation of this solution below. The user can hide and collapse the slicer panel by using the arrow keys (#1 and #2 below).

Creating a Power BI Slicer Panel

There are many ways to create a Slicer Panel to have the look and feel you want. In this article I will show you a basic version  without too much bling, just to cover the concept, but you can use your imagination to extend the concepts further as you prefer. I am using an Adventure Works database with a simply report for the illustrations.

Step 1: Create a Placeholder for Your Slicers

Place a text box as shown below. I used a text box rather than a square shape as I had more granular control over the border size and colour than the shape object.  I turned on the border for the text box and also added a shadow  effect.  To add a shadow, I duplicated the text box, offset the new text box to the right and below, turned off the border, positioned the new text box behind the original and set the colour to grey and the transparency to 80%.  I got this tip from Reid Havens.

Once I had the expanded slicer pane configured, I added the slicers and resized them to fit in the pane. I have placed slicers for Products[Category] and Calendar[Year].  Of course there is a lot more room and in reality you could add a lot more slicers to the pane.

You may have to reorder the visuals so that the text box and the slicers are all visible. You can reorder the list of visuals by navigating to the view menu (#1 below) and turning on the selection pane (#2).  In the selection pane itself (#3) you can move the visual objects up and down the list using drag and drop to to control which object sits on top of which other objects.

Step 2: Add a Navigation Button to Hide Slicer Panel

Add a left arrow button by selecting buttons (#1 below), left arrow (#2).  Position and size it (#3) and put it on top in selection pane (#4) by dragging it to the top of the list on the right.

Step 3: Add a Navigation Button to Show Slicer Pane

Before moving on to the next step, I needed to first hide the objects that make up the new slicer pane (the text box, slicers and left arrow button) from view in the selection pane (#1 below).  To do this, I just clicked on the eyeball next to each item that needed to be hidden.

Now that the slicer pane is not visible, I added a right arrow button and positioned and sized it as shown below. I turned on the border for the right arrow button as you can see in #2 below.

Step 4: Add Bookmarks

The next step is to add bookmarks that enable you to toggle between the views. Click on the bookmarks pane (#1 below) under the view tab.

First I configured the bookmark with the slicers pane hidden in the selection pane (#2 below).  I added a bookmark (#3 below) and renamed it as “Slicers Hidden” (#4 below). By default, bookmarks will save the slicer filters as a part of the bookmark.  This is not what is required in this case – I don’t want the bookmark to return the slicer filters back to where they were when the bookmark was created – instead I want the bookmark to ignore the slicer filter settings all together.  To fix this, I unchecked the Data option (#5 below) from the bookmark options (ellipsis…) and then clicked on Update (#6 below).

Next I had to set up the view that has the slicers visible in the selection pane (#1 below).  To do this I toggled the visibility of the items to show the ones needed.  I added a bookmark (#2 below) and renamed it as “Slicers Visible” (#3 below). Then as before, I unchecked Data (#4 below) under bookmark options for this bookmark, then I clicked on Update (#5 below).

You can test the bookmarks by clicking on them in the bookmarks pane on the right. If you click on “Slicers Visible” the slicers will be displayed and if you click on “Slicers Hidden” the slicers will not be visible.

Step 5: Assign Bookmarks to the Buttons

This is the last step. You need to assign the two bookmarks to the right arrow and left arrow buttons added.

Select the right arrow button (#1 below), turn action on (#2 below), select type (#3 below) as bookmark and select bookmark (#4 below) as slicers visible.

Next select the left arrow button (#1 below), turn action on (#2 below), select type (#3 below) as bookmark and select bookmark (#4 below) as slicers hidden.

With these changes, the slicer panel is ready and you can test it using the arrow buttons. Remember that you need to use Ctrl+click to use the new buttons when using Power BI Desktop. After publishing to powerbi.com you can simply click the buttons without holding Ctrl.

You can view the Slicer Pane deployed in a real world scenario here.

Watch the Video

Here is the YouTube video where I have shown how to create a Slicer Panel in Power BI. If you want to learn more about creating Power BI reports learn more in our Power BI Online Course.