Tag: Grouping

Posted on

Power BI Buttons and Toggles, Multiple toggle panels on one page

This post uses Power BI Buttons and Toggles, Chaging toggles to grouped images as a starting point

And we have 3 toggles moving to 3 hidden visuals, with pie as the starting point

And we have a grouping of Toggles on and Toggles off with toggles hidden based on what bookmark we are on

But say we wanted to add another panel on the page with three other visuals.  First of all we need to update the page and our Bookmarks and selections

We need to make space for the 2nd panel. Move the grouped toggles, Text and make each visual smaller:

With Pie Bookmark selected, Move Toggle on group and Toggle Off group. Move the toggle text

You don’t need to update the bookmark because we haven’t yet amended anything in the selection

Click on Funnel . The toggles are already done so make the funnel visual smaller

Do the same with Map

Now we are ready to make some changes to the selections. Toggle On Rename to Panel 1 Toggles on. Toggle 2. Toggle off Rename to Panel 1 Toggles Off

Lets group the Visuals for Panel 1 also. With CTRL held down select the 3 visuals. Then right click on the pie chart and select group. Rename to panel 1 visuals

Open up this grouping and note that the correct visuals are still hidden when you select each bookmark

Finally lets rename the bookmarks we have to include Panel 1

We are now ready to implement panel 2

Ive added 3 new visuals. Line chart, Tree Map and a card. We will start with the line chart. Next Tree Map and Finally the Card

In Selection Order them and Renamed them Line Chart and Tree Map. Next put them on top of one another.

I have then selected all three by holding down the ctrl key. Clicked on the visual and chose Group, Ive renamed it Panel 2 visuals

Note if you move things in the selection pane with your groupings open, then seem to get added to the grouping above them. If you move objects, close the groupings first.

Next we want to add 3 more bookmarks. Call them Panel 2 Line Chart, Panel 2 Tree Map, Panel 2 Card

Within Bookmarks … Line Chart should have data ticked, the other 2 should have data unticked as per our previous bookmarks

Next we want the 6 toggles (3 On and 3 Off) Lets add the On ones first. The same images from part 1 of this post will be used

Call the 3 On buttons, Line On Img, Tree Map On Img, Card On Img

Again we can group then Panel 2 Toggles On

Next add the 3 Off buttons over the On buttons. At this point its really good to get the images in exactly the same place and size as the on buttons.

Call the 3 Off buttons, Line Off Img, Tree Map Off Img, Card Off Img

Select, Group and call them Panel 2 Toggles Off.

Finally add your panel 2 text box

You now have everything you need to get started to show and hide bookmarks.

However, you only want to show and hide visuals for panel against the panel 1 bookmarks. You don’t want any changes you make in panel 2 to affect panel 1.

We now need to change every single bookmark from All Visuals to Selected Visuals

Lets go through each bookmark and Ensure that the right information is set

Click on Panel 1 Pie bookmark. The only Selection groups that matter are Panel 1 Groupings. Close all the Panel 2 groupings in the selection pane

Note that all the right visuals are hidden because we have already sorted out this visual

Close all Panel 1 Groups

With CTRL held down select Panel 1 Groupings containing all the visuals. Then Select … against Panel 1 Pie Bookmark and Update Visuals. Because its now Against Selected Visuals only Panel 1 Groupings will be affected

Open up Panel 1 Panes and Move to Panel 1 Funnel

Note that you now have to recreate shown and hidden visuals for Funnel. Again with The Panel 1 groups selected Update the Bookmark (Selected Visuals Update)

Next Click on Panel 1 Map. Again, Note that you have to recreate all the selections

And again with Panel 1 Groupings selected Click on Save

You can now click on each bookmark and note that panel 1 changes. Panel 1 is working.

Time to move to Panel 2. Close all Panel 1 groupings under Selection and Open Panel 2

The First setting for the Line Chart.  On Toggles hidden for Tree Map and Card. Off Toggle Hidden for Line Chart. Tree map and Card visuals hidden.

With Panel 2 groups selected. Update Panel 2 Line Chart Bookmark

Now Set up Panel 2 Tree Map Bookmark

And Finally Panel 2 Card Bookmark

Finally, We need to make sure that all our Buttons are active. This is relevant for everything in Toggles Off panel.

We know that all our Panel 1 off buttons go to the right place because we set this up in the last blog so lets do Panel 2 Toggles Off

We have the Line Chart Bookmark selected so for both Off None hidden visuals, set the action to the appropriate Bookmark.

We need to move to another bookmark to do line because its off. Move to Panel 2 Tree Map. From here, click on Line Chart Off Img and Set the Action in Format to Panel 2 Line Chart.

Note. If you forgot to save at any time. Simply, Highlight the panels. Ensure the correct images are shown and hidden and then update. Always update with the Correct Groups selected

Before Publishing, lets move to the bookmarks we want as our top bookmarks. Click on Panel 1 Pie Bookmark

Click on Panel 2 Line Chart

And Publish

Go to Power BI Service and check that its all working

Great, we now have two toggle panels. Both Work.

Just remember, Add eveything into groups

Panel 1 Off Images

Panel 1 On Images

Panel 2 Off Images

Panel 2 On Images

Panel 1 Visuals

Panel 2 Visuals

Ensure Selected Visuals is selected in Each Bookmark.

Ensure Actions are set on the correct visuals to move to the selected Bookmark

When ever you update, ensure the groupings are Selected.

You are good to go

Posted on

Power BI Buttons and Toggles, Changing Toggles to grouped Images

You can show and hide visuals on a report by using bookmarks buttons and toggles.

Grouping your toggle buttons can simplify your Selections. This example shows how it works with a quick demo

What you need

Two images for on and off (For the toggle bar) I have used the following visuals

I have saved both these visuals to use later

You also need a data set in Power BI just to create this report. I created the following table within the Power BI Report (Enter Data)

Next, We simply need 3 visuals that we can place on top of each other to show and hide dependent upon the selected bookmark

Time to create the 3 bookmarks. Go to View and select Bookmark pane and Selection Pane

Lets just start to set up the report  before we change how the bookmarks work. First of all, Place the visuals on top of one another ready to show and hide. Pie will be our initial start up bookmark.

And now we need the initial toggles to show the pie on and funnel and map off. From Home Click Image and add in the visuals for On Off and Off. You can also add Text for each option (Pie Funnel and Map)

At this point it makes sense to change the name of the images in the Selection pane so you know what each image is for. Also feel free to move the selection order around for it to make sense with what is on the page

Each toggle can either be on or off. Add 3 more visuals, Off On and On and slide them under the toggle images you already have (And rename in reorder in the selection pane.)

Note, the 2nd Pie off img and Funnel off img are incorrect and and then set to on later. So we have an off and an on image.

Now its time to show and hide the visuals dependent upon the selected bookmark. However, you now have 6 toggles to look after for every single bookmark which is increasing complexity. Each toggle needs to be shown and hidden depending upon the bookmark.

Grouping should hopefully make things a lot easier. First of all set the bookmarks for funnel and map to not update data. We are updating data in the Pie Bookmark

Lets hide the visuals for each bookmark first. In selection pane hide the visual and then Click on the bookmark and update (Don’t forget to update the bookmark after you have hidden visuals)

And now its time for the toggles. We now want to group the images for on and off.

Select all the off images within the selection pane and then click on the visual (As they have already been selected and click Group)

Rename Group 1 ‘Toggles off’. Do the same with the on images and rename to Toggles on. Each group has the toggles within

And now we can show / hide the  buttons within each bookmark separately and then update each bookmark.

As you can see, for each bookmark, the corresponding on button is shown and off button hidden. The other two off visuals shown

How its time to set actions on the buttons to go to the correct bookmark

If a visual is shown in the Group you can set the Action under format. It is the off buttons that provide the action to the other bookmarks. For example Pie is on, meaning we are on that bookmark and we can travel to either funnel or map.

Again, click on the bookmark, set the actions for the off images and then update the bookmarks before moving onto the next

When you go to Funnel Bookmark, you will need to set the Off pie visual because it hasn’t been done yet but map already has the action set from the previous bookmark and you always want to go to Map from this image.

When you get to funnel all the actions for the off buttons have been created. This is a much easier way of looking after your toggles to show and hide visuals. Time to Publish your new report to check that its working in the expected way. For this report I am simply publishing to My Workspace.

If you check how to create the same functionality without grouping your buttons first, you can see that its much more complex. This is a great update and will make things so much easier in future.

See https://debbiesmspowerbiazureblog.home.blog/2019/08/07/power-bi-bookmarks-buttons-and-toggles/ for the original how to solution

Later I will look at how you can use groupings to create pages without multiple panels.

Design a site like this with WordPress.com
Get started