Day: September 4, 2019

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 2^nd 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