Power BI PAGE NAVIGATION Panel | HOW TO easily create with Bookmarks & Buttons

i'm gonna show you how to make an elegant and simple page navigation panel in power bi with bookmarks and buttons with custom page navigation you can have full control over each visual element and provide a great user experience you will also learn many visualization tips and tricks along the way let me break down everything for you in around 20 minutes so instead of spending hours trying to figure it out yourself just watch this video and learn something new if you haven't subscribed to this channel please do so to stay up to date with power bi power query and excel videos from excelfort i'm going to start building this page navigation from a blank workbook first thing is to go and add a nice page layout i've already created one using powerpoint and saved it as an image to add a background you can go to the page properties on the page background click add image and let me pick my image by default you will see the transparency set at hundred percent you go to bring it to zero now you see the nice layout i've created on the left side you see the page navigation bar that sits right on the left and next to that i have also added a border with yellow you will see later it will help me create the nice slide out effect next i want to add a button over here to launch the navigation panel for that let's insert a new button it will be a blank button i can define the size of this to 35 by 35 remove the outline and for the icon for the default state i can choose from this list not the predefined now from september 2021 release i'm able to assign a custom image for this icon so let's click on custom add image i can pick the white menu let's move this to the upper left corner now we have a hamburger icon over here to click to launch the navigation pane but when i move the cursor on top of this i want it to change the color for that let's go back to the icon again change the status to on however under custom we already have assigned this menu icon add a different one that i have saved with the yellow color now if you go and hover your mouse you see the color changes now i will add two buttons over here one for help the other one is for information for that i can insert a blank button make the size to 40 by 40. outline not required so we help wait to color i can set it to a lighter color and i'm going to make a copy of this just change the icon to information with these buttons you can either assign a separate page for information and instruction about your project for example you can create a new page let's say this is info you can include the instructions and information over here and assign this page under action choose page navigation and choose that particular page so when the user click on this he lands on the information page so for him to get back to where he came from you can add another button over here which is the back button with buttons you can also assign a web link for the second button which is a question may be for contact you can select on you can select under action type you can choose web url and i can paste here let me paste excel fort contact right once the user clicks on this he'll be taken to that particular webpage now it's time to build our navigation panel for that i need to insert a shape let's set size the width will be 200 the height will be 682 so that will perfectly fit the size of the canvas change the color to yellow to match that little border there and remove the outline i can add a small text here to indicate this is the navigation just for instructions let me go and turn on the text [Music] page navigation change the color to gray size make it 12. be bold to adjust the alignment i can set it to the top keep it left top margin let's make it 20. just before the page before p i can insert an emoji by pressing windows period let me say book perfect i should also provide a button for the user to close the navigation pane i can add a button right over here sort of a half circle with an arrow but unfortunately i don't have a half circle button let's go and build one we go and insert a blank button fill with yellow transparency set it to zero no outline and an icon will be a left arrow make the size two leave a left margin of 12 under shapes we can now change the shape to rounder tab both ends and extend it to 50 rounded so to flip it i can just change the rotation to 90 and change the size to 40 by 40. if i hover my mouse i just need a different effect i can select icon on hover i will just change the weight to three perfect now i can add it right next to the text looks good when the page navigation pane is open this way i don't want the user to click on any visual on the page for that i can provide a button and expand it to the size of this area and make it a close button for that let me add a button i can remove the outline change the fill color to black set it to 75 percent should be the size of this area so if the user clicks on this it should close the navigation pane now i can add the buttons on the page navigation pane to navigate to each page in my report i'm going to have three pages so let me insert a button again a blank one and the size will be 215 by 35 even the position at 44 no outline the fill color will be gray no transparency for the text the first page i'm going to call sales over weave font will be white bold i can push this up a bit select under general let me change the y position to 120 i also need to change the size on the right side should be curved select it and change the shape type to a fill looks nice and also i just want the color to change when i hover my mouse by default it's white so let me go and change it to on the text on hover it will be yellow more of this because i have three pages in my report i can select all of these shapes and go to format align align left and distribute vertically let's rename these buttons text to [Music] this will be cost overview and the next one will be profit overview this is the first page for first page for sales overview since this is the page that we are currently in i'm going to change the default value to yellow as well so that it gives an indication that you are on sales overview page now that we have completed building the first stage where we put together all the needed objects for the page navigation it's time to add some functionality using bookmarks before we add bookmarks it's a good practice that you go and name all your objects and group them and organize them for that let me go and click on weave selection selection pane will basically help you do this you can see all the objects on this canvas let me hide all of them let me make it visible the first button here this is the page access button i can name it by double clicking on it and say profit and the next one cost sales it's my close button i can say cover as we've got two buttons this is actually the close button attached to the navigation this is the fly out shape fly out this is the information button i'll call it info it's the question let's name it qs and the last one is the menu now it's very important that you set the correct layering of each and every object here first we'll look at the vertical bar over here we've got the menu and these two icons over here so we need to set them on top of our hierarchy for that i can move the menu button to the top then we have the info q a now what i can do select all of them clicking control right click and group them so i can double click and rename it to say menu bar i can rearrange the rest of the objects it's profit let's move it up sales cost profit fly out close button and close button cover so we have these objects in right order now i can group these objects together and press shift and select all the objects right click group it goes to the top always i can bring it down and say menu objects if i toggle the visibility i can use this for my bookmark and make my life easier the advantage of grouping objects is very important as later if you want to add another element you can just bring it inside this group i always recommend try to do bookmarks on groups rather than individual visuals or elements i can also group these three buttons together later if you want to add an additional page it will be easier for you to include within that group select sales pressing shift i can select other two right click and group i have group but if you see on the left the layer order has changed and sitting right on top of the buttons so now what we can do we can reorganize this before that i can rename this to say pages i can bring down the close button now it looks perfect we have the pages in the flyout close button and the close button cover now we'll create the bookmarks for that let me turn on the bookmarks pane before we create let's identify what kind of bookmarks we need we need two bookmarks one is to open the page navigation the other one is to close so when i click on this menu button i want this current status as you see now to close the menu i can use this button or this big button over here in the background to close it bookmarks are not page specific they are visible in all your pages so we need to name it accordingly let me select the menu object group and add a bookmark selected visuals remove data click on update you can name this sales nav open the next one i want to hide this menu objects select it add another bookmark and selected visual remove data update if you toggle now you can see the visibility is correctly set i can rename this to sales nav close now i can assign these bookmarks to the relevant buttons so the menu button double click on it to select you can click on the selection pane heading or even bookmark to hide it open format under action let's select bookmark and sales open right if you control click you see it opens and now i can use the other bookmark on this button action bookmark sales close as well as on the big button since let's try it now it works i want to open it close using this button the purpose of building navigation is to navigate to other pages within a report now i have created only sales or web and the navigation so if i click on the menu we have two more pages i don't have to build everything from the scratch i can just duplicate and make minor changes let's see how we can do that so right click and duplicate i'll name this cost overview let me open the bookmarks pane you see we have two bookmarks that were created for the sales page so we need to create two more bookmarks for this particular page and assign it to the buttons selection we have a copy of the same objects from the first page what we can do and make it visible select add a bookmark call it cost nav open let's set the properties correctly remove data selected visuals and click and update i need another one for the close hide this one select add cost nav clause remove data selected visuals and update now this works so on the buttons on this page double click under action cost open close button cost close and for this button close it works on this page as well there are other changes that we need to do now we also need to assign the navigation on the page buttons so let's go to the first page sales overview i need a bookmark for cost overview so when i click on this i should land in the cost overview page with navigation closed so let me double click on this to select under action i can simply select i want to go to the cost nav close status okay let's try that i'm on this cost overview page now so from this page if i want to switch to the first one i can select sales action bookmarks sales clause let's try now yes okay one last thing i would like to do is to change the color currently yeah this is fine sales always selected you can see the color in yellow let me go to the cost overview minor change here i can double click and select the text color to be white we are on cost overview and make it yellow so that we can identify we know that we are on cost overview page this way you can add any number of pages by duplicating the page where you build the navigation so far we have done everything the navigation is working fine but we don't have any data in this let's add some data and see how visuals will work with this navigation for that let me get some sample data i am on the sales overview page let's insert a visual at sales by date and segment okay now if you look at the layering i'll just show you click on navigation is sitting right on top of the navigation right for this what you can do turn on the selection pane whenever you add a new visual it comes to the top so you have to drag and drop it at the bottom right we'll close this now this is perfect let's try the navigation with this i have come to an end hope you learn how to create a navigation panel in power bi if you have any questions comments please leave it in the comment section below please subscribe to the channel like and share with your colleagues and friends thank you very much see you in my next video [Music]

Channel: ExcelFort

Views: 174,496

Keywords: power bi, How to power bi, power bi desktop, power bi desktop tutorial, power bi for beginners, power bi page navigation, power bi page navigation buttons, power bi page navigation bookmarks, power bi reports, power bi training, power bi tutorial, power bi tutorial for beginners, power bi page navigation pane, power bi page navigation panel, power bi custom page navigation, power bi bookmarks, power bi buttons, power bi bookmarks navigator, data visualization, DAX, excelfort

Id: xCSYLrcLW00

Length: 22min 26sec (1346 seconds)

Published: Sat Oct 02 2021

Reddit Comments

[u/manarch987]

Great video but I think the term effortlessly is a bit misleading. Creating a custom navigation panel does put your report interaction to the next level but it really takes time and effort to create, maintain and update this panel.

[u/Fowmy]

You can download the completed Power BI file from the YouTube description.