Overview
This concept came about while I was working on a Power BI report for the 2018 Ryder Cup. I was attempting to build out an experience to match a design that a professional web/app designer had created free form without knowing what could be done in Power BI.
The key objective was to make an extremely User friendly touch screen experience for use by the Captain and Vice Captains of the US team.
It was an extremely tedious process to achieve this back then and I would have never suggested others to try it… until Visual Grouping was released a couple months back changed the game.
In this post, I will give examples of in-page navigation, step by step instructions on how to implement it in Power BI, and demonstrate why it is valuable.
What is it?
In-Page navigation utilizes buttons and bookmarks to create navigation within a page. It can be extremely powerful at giving users a guided experience, and an app or website feel to a report.
Why?
End users are often overwhelmed by the volume of visuals on a page and lose sight of what is important on the page. I like to follow the concept of “If the end user does not need to see the visuals at the same time, do not show them at the same time”. Keeping the layout simple will lead to less risk of misinterpretation. In addition, separating content into logical buckets and using these methods effectively prioritizes the queries, as hidden visuals do not run queries until they are exposed by the end user.
Getting Started
There are many ways we utilize these concepts to bring reports to life. I am going to focus on the idea of having an overarching topic for a page, and navigating the sub-topics within the page.
Like my previous posts on Backgrounds and Overlays , I am utilizing a data set of King County Health Inspection records.
Step 1. Bucket Your Content
In this example, I have an overarching Page topic of “Inspection Results”. I have some KPIs and a line graph that i want to keep exposed at all times, as they are the “Go-To” visuals for my report. I also have a couple slicers I want to keep exposed at all times.
I have looked through my data and determined some logical breaking points for the story: Zip Code, Inspection Type, and Closed Businesses.
I have also created a background to meet my needs and brought it into the report with a section for my in-page navigation and buttons. Each button will have two versions, one is to appear “selected” and the other to appear as “unselected”
Step 2. Build Your Views
I will now build out my visuals for the “Zip Code” sub-topic. Once the visuals have been determined, I will group them (ctrl+click to select all, right click > Group to group them):
Next, I will rename my group to “Zip Code” and use the selection pane to hide the group. This will give me a blank canvas to build my next section into. I will also shift which buttons are visible to the next section.
This is what my selection pane looks like at this point:
Now I will build out my Inspection Type sub-topic visuals, group them, and hide them as we did for Zip Code.
Finally, I repeat the same steps and build my Closed Business visuals.
I now have a completed Report that is ready to be assigned Actions with Bookmarks. Here is what my selection pane looks like at this point:
Step 3. Bring it to Life with Bookmarks
First, I manually return the report to the state of my first button by hiding/unhiding visuals and buttons. I then select the items I want to be impacted by the Bookmark and create a new Bookmark.
I will set my options to Selected Visuals, and leave the other options turned on. Note that this may vary depending on your use case! If you have slicers within your visual groups, you may or may not want to have data turned on, as the bookmark will preserve the state of those slicers if data is selected.
By using Selected Visuals bookmarks and not including the slicers that are outside of my groups, I am able to toggle between my groups while not impacting the slicers and preserving the user’s filtering.
I will now manually hide/unhide items to my next group and repeat the process.
And one more time:
I can now click through my bookmarks in the bookmarks pane to ensure they are acting as anticipated
Once I have validated they are acting correctly, I will now assign them to my buttons.
Step 4. Assign your Bookmarks to Buttons
Select Button then Change “Action” type to “Bookmark”, and find the appropriate Bookmark. I also suggest changing the Tooltip to make the hover over experience intuitive
Performance Improvements
I can now click my buttons and see the affect. Utilizing the performance analyzer, we can see how the queries are coming in. On the left below is the performance analyzer from the initial page load. On the right below, we have selected a button and can see there are only 5 visuals being impacted.
Oftentimes I will see reports that have every topic/subtopic forced into a single page and visible or spanning multiple pages. This is done via either increasing page length, or or separating topics into different pages.
The End user experience on a long scrolling page can be rough – they may come in to see my high level KPIs, or a specific sub-topic, but are forced to wait for the entire page to load as queries are not prioritized – Things they don’t care about are loading first and slowing down the things they do care about.
If a sub-topic is moved to it’s own page, I often see that users will force more visuals into the page to fill the space and it can result in poor performance for unnecessary visuals
By consolidating these sub-topics into a single page and navigating within we unlock a powerful user experience as well as performance improvements.
For the Ryder Cup example, we went from 7 seconds on a click, to .5 seconds due to avoiding re-rendering unnecessary items, and spreading out the queries to fire off as needed.
Accessibility – Tabbing
Buttons for In-Page Navigation work very well with Tabbing. Now that I have completed my In-Page Navigation, I can utilize the Tab order in Power BI Desktop to set the report up for accessibility. End users can tab to buttons and hit Enter to activate the bookmark.
Updating/Editing
Remember earlier when i mentioned the painful process of doing this prior to Visual Grouping? That really came into play when it was time to edit/update what was included in this navigation.
Prior to Visual grouping, the update process would be to simply start over. Now that we have visual groups are are technically hiding/unhiding the group, not the individual items, we can simply swap out what is included in a group.
If I want to replace my Map in the “Closed Business” with a matrix, I can simply Delete the map, build my new Matrix, and drag it into the group. No updates are needed beyond this, not even an “Update” on the bookmark!
The same applies to simply bringing new items into a group without replacing anything.
By Implementing Buttons and Bookmarking, the possibilities for report navigation and user experience are nearly endless. With a little creativity and these tools in the tool belt it is relatively easy to create beautiful and robust reports that feel like applications or websites. Your users will thank you!
Try it out and let me know what other ideas you have implemented using these concepts!
If interested in learning more about the Ryder Cup Project, check out these links:
Download the PBIX for this example Here!
Alluring Analytics 