Toggle Button in Power BI
easy bookmark and page navigation
If you want to make your Power BI reports more engaging and user-friendly, using a Toggle Button is a fantastic way to go. These buttons let your report users switch quickly, like toggling between light and dark modes. But they’re not just for themes—they’re also great for switching between different visuals on the same page.
In this article, I’ll show you how to set up a Toggle Button to switch between visuals. This is especially handy when you want to change just one visual without messing with the rest of the page. We won’t be covering page switches here, but the same approach works if you try that out later (use a page navigator instead of a bookmark navigator button).
You can follow the tutorial in this video step by step.
Before we start
Here’s what you need:
- Two Visuals: You should have two different visuals ready. For example, a light-themed visual and a dark-themed one.
- Bookmarks and Selections: We’ll use bookmarks and the selection pane to create the toggle effect. If you don’t see the panes go to Format Pane -> View -> Selection/Bookmarks
Add the two visuals you want to switch between to your report page. For instance, place your light and dark visuals side by side.
Use the Selection Pane
- Go to View > Selection Pane.
- Group your visuals: select each visual, right-click, and choose Group. Name one group for the light visual and the other for the dark.
Create Bookmarks
- Open Bookmarks from the View tab.
- Hide one group (e.g., light visual) and show the other (e.g., dark visual).
- Click Add to create a bookmark and give it a clear name like “Dark Visual.”
- Repeat the process: hide the dark visual group, show the light visual group, and create another bookmark named “Light Visual.”
Creating a toggle button
Configure the button
To create a
toggle we first need to add a Bookmark navigator. We can do that by going to
Insert -> Navigator – Bookmark Navigator.
You only need one button for the toggle. To set it up:
- Go to the Format pane.
- Under Bookmarks, toggle on Allow Deselect. This option lets the button switch between selected and unselected states, making your toggle function smooth and intuitive.
Style the Toggle Button
- Go to the bookmarks tab and rename the first bookmark
- Press Windows Key + . to open the emoji panel.
- Add a Dot
Customize the Button:
- Size and Style: Adjust the button size and shape. A rounded rectangle often works well.
- States: Under Style, customize the State Selected and Default styles.
- Alignment: Set the alignment for both Selected and Default states to ensure the dot appears in the correct position (left and right).
Final Adjustments to the toggle button
Ensure that your visuals don’t overlap incorrectly:
- Unhide Both Visuals: Temporarily make both visuals visible and stack them on top of each other.
- Adjust Placement: Hide one visual and check that the bookmarks are still switching the right visual as intended.
After making these changes, your toggle button should now look better and work smoothly.