Give users the ability to change a slicer on a pub...

Watsky · ‎01-06-2022

Introduction

It is so nice that we, the report developers, have the ability to pick from multiple slicers.

Slicer menu

It is not so nice that our end users do not have that luxury. They are simply out of luck.

Slicer menu missing once published

What if there was a fairly easy way to give them the power? This article will show you how you can build menus for your slicer so that it looks and functions just like the real deal. This tutorial assumes you already have a slicer built with information loaded into the slicer. So, you will only see the slicer in the example.

Assumption

Before we begin, I am making the assumption that you already have a slicer on a report and it is located in the positon on your report where you no longer are moving it around. If this is not the case you want to start preparing by loading a report with a slicer you want to build this for or create a new report with a slicer.

The setup

First we will turn on the Bookmarks and Selection Panes. To do this simply click on View and select the Bookmarks and Selection Panes. Since I only have one (1) visual all that is shown in the Selection pane is Slicer. If you have multiple slicers on your report then you will want to rename them to more descriptive names in order to find the slicer easier.

Changed Name Original Name

Here is the list of operations to perform:

Create the menu icon;
Create the slicer menu base;
Create the fields;
Group the objects;
Setup the actions;
Adjust the bookmarks; and
Test and Publish

Original menu

If you're looking to create a menu which is identical from the original take a moment to view the original. Also make note of all of the options you are looking to recreate.

Creating the Menu icon

Looking at the original you will see that icon is a V. We cannot get the exact icon so for this I used a Cheveron Arrow (feel free to use what you would like and skip the rest of the Menu Icon formatting steps below).

On the top Power BI ribbon click on Insert;
Click Shapes then select the shape you want to use;

On the Selection panel rename the shape to Slicer Icon;

On the Format Shape pane under Shape click Rotation;
Change the All rotation to 90°;
Next, shrink the size of the icon by clicking on one (1) of the corners of the shape and dragging it inward; then
Move the shape so that it closely aligns with the original slicer menu.

Creating the slicer menu base

To create the Slicer Menu:

Start by inserting a rectangle shape;
Click the rectangle;
Move the rectangle to right beneath your menu icon; then
Click on the original menu button.

Rectangle before resizing

The menu will open in front of your rectangle. Use this as a guide to get the rectangle down to the exact height and width as the original. It does not have to be perfect.

Rectangle behind original menu. Notice the blue in the left bottom corner.

Without the original menu opened.

With everything lined up and sized we can remove the background color.

Click on the rectangle;
On the Format shape pane navigate to Shape, Style, and then to Fill;
Change the color to white;

Beneath the fill section is the border section.

Click on this and change the color to the lightest gray;

#E6E6E6

Still within the border section.

Change the width to 0.5 px; then

Click on the shadow section, which is found beneath the border and text sections.
Set the transparency to 95%.

Create the fields

It is time to create the fields. The fields are created using the blank button element.

On the top ribbon click Insert, then Buttons, lastly Blank;

For now, just create one (1).

On the Selection pane, find your newly created button and double click on it;
Name the button the name of the field it will represent. For instance Between;

Click on the button;
On the Format button pane and under the Button section, navigate to Style then Text;

Turn on Text;

Give the field a name;
Set the Horizontal alignment to left;
Set the left Padding to 7 px;

The other padding should remain 4 px.

Navigate to the Border section, which is found beneath Text, Icon, and Fill;
Turn the border Off;

At the top of the Style section you will see the option Apply settings to.

Change the state from Default to On hover;

In the Text section change the font color to white;
Find the Fill section beneath Text and Icon sections; and
Turn Fill on then change the color to blue.

#118DFF

This emulates the same action we see when we hover over the fields of the original (the field background turns blue and the text font turns white).

Copy the button for as many fields as you need;
Change the name for each in two sections:
- In the Selection Pane; and
- the field's text section of the Format button pane.

Now, select all of the fields and move them into the menu base. Organize them however you would like. Make sure that the size of the field is not longer than the menu base. If the field is longer then shorter the width so that it fits inside the base.

All fields inside the base

Grouping the menu base objects

Now that we have our menu completed our next step is to group all the menu base objects. Select all the objects that make up the slicer menu. The only exception is we do not want to select the menu icon. Just the items the make up the menu. There are a bunch of different ways to select all the items. One (1) way is by navigating to the Selection Pane then click on the first object needed. Find the next object needed and hover your mouse cursor over it. On your keyboard, hold down the Shift key then left click on the object. Repeat this for the remaining objects.

There are also multiple ways to group the objects. One (1) way is to click on Format on the top ribbon, click Group, then click Group (in the submenu).

Now our objects are grouped together. You can change the name of the group in the Selection pane if you want to have everything labeled properly. However, it is not requiried.

Caret next to Slicer Menu shows you that the objects are grouped.

Setup the bookmarks

To begin setting up the bookmark we need to add actions to each field so that when the field is clicked it changes the view of the slicer. Currently the menu is opened so we will begin by creating that view. Start by selecting the Slicer menu group and the Slicer icon from the Selection pane.

Why did we change the selection from all visuals to selected? This is done so that when the user clicks the icon the only change we will see is the menu appearing. If we left it with all visuals any time we are on a slicer view that isn't the default view and we click the icon it will revert the view back to default. For instance if I have the slicer set to List but my default view is Between, click the menu icon, then the menu will load and revert the slicer to the Between view.

Without changing the selection this results in the entire view change back to the default view.

To create the next bookmark:

Simply hide the menu group on the Selection pane;
Click Add on the Bookmark pane;
Rename this on the Bookmark pane as the name of the field. My first one is called Between;

Using the original controls of the slicer select your next field from your list;

Make sure you are not clicking on the icon we created but the original menu button.

Click Add on the Bookmarks pane;
Right click on the bookmark then click Rename;
Rename this to the same name as the field it represents; and
Repeat these steps for any additional fields you may have.

Setup the actions

Once you've added all your bookmarks to your Bookmarks pane we can move forward to loading the actions. The order of which

you load first does not matter. I am starting with the Slicer icon.

On the Selection pane click the Slicer icon;
On the Format shape pane in the Shape group find the Action sub-group;
Click the on/off button to the right of Action. Then expand the Action sub-group; then
Set the type to Bookmark then select the Slicer Drop Down bookmark.

Follow these steps to set the action for each of your field objects till all are complete.

Test and publish

The entire setup is complete. Now it is time to test out the slicer.

Start by making sure nothing is selected on your slicer'
Hover your mouse over the menu icon. You should see a message which reads CTRL+click here to follow link;
As the instructions say hold down CTRL on your keyboard then left click on the icon. It should load your menu; and

Inside the menu you will still need to hold down CTRL+click to open it. Once you're satisfied with the product, save and publish the report. Now, test out your finished product.

Wrap-up

With this tutorial you learned how you can create a slicer selector to allow your users the freedom to select what type of slicer is available. Hopefully this is something that can be implemented in the future but until then I hope this helps. Here are some ideas posted you can vote up so we can get this added.

Microsoft Idea · Allow Users to Change Date Slicer Type (powerbi.com)

Microsoft Idea · Allow date slicer type change without edit permission (powerbi.com)