Creating a Pop-Out Navigation and Filter Bar Using Power BI Bookmarks. 4 Ideas for Sections to Add

hi this is jason from effective dashboards helping maintenance and reliability professionals get the most out of power bi so welcome back to another video in this video i'm going to be showing you how to create this pop-out navigation bar so you click on the menu icon here and this but this pop-up section is going to appear and it's going to have a number of different sections in it the first one is going to be for page navigation the second is going to be for filters applying filters the third is going to be a button that is going to reset or set a number of filters or predefined filters and then finally we're going to have a button at the bottom that's going to reset all the filters back to a default so that's going to be the topic for this video okay so let's crack on so the first thing i need to do is add an image and we're going to add an image for this navigation button here so this is one i downloaded earlier and i'm just going to push that into the top corner there so that's going to be the button we're going to push to open up our pane now the next thing our panel the next thing i need to do is add the panel itself so i'm going to use a shape and we'll use this rectangle here and i'm just going to resize that it's probably big enough there make it the full width here and just change a few properties so we're going to general and we'll go to effects the background now i want that to be a gray color and let's just make sure we've got the right gray there yet all the all the lines that's fine um and then the border is fine in the shadow i want to switch on the shadow so you can see it's still got a color there that's because we need to go into the shape and go to style and go to fill and we'll make the fill the same the same 99999 right okay and then we've got a shadow on now be careful if you put a shadow on here it doesn't give us quite the effect we're looking for okay so you need to make sure that if you're going to put a shadow on it's under the general tab and that's going to put our shadow underneath this effect that's going to be a shadow around the outside of this shape here rather than the inside of the um must be where the the text goes or whatever there's two there's two there's anyway i'm looking at this here so in fact that's a visual that's that's going to be the shadow around the visual rather than the shape itself so that's the the next thing we need to do and now we need to put a button for closing the menu so let's go in and we'll use a button and we're just going to use this leftover here something that's available anyway so we'll put that there and just play a bit with that style a little bit um we just want the background which is under general effects and we'll change the background to off okay now we just need to make sure that that's the same size as the other one i'm going to change it to black and change the button to block just so it's consistent with the actual menu underneath it default text icon is there and i'm going to change that to be black okay so i think that's fine so now we're going to use some bookmarks because we need to be able to create a bookmark for the menu being closed and a bookmark for the menu panel being open so let's go in and go to view and we're going to use a combination of bookmarks and selection so let's turn both of these on and we can see here that we've got our buttons so i'm going to rename this close menu okay the shape is going to be the menu and menu background okay now the other image is going to be this other image this one here is going to be the the menu okay so we've got three options here now i'm just going to put these off now the order they appear here is quite important because that order determines the layer that they're appearing the layering so we want this open menu to be the top there and then close menu and then menu is in the background so that's fine okay so next we're going to go and create some boot marks now we're going to create two bookmarks initially one is going to be to show the menu and one's going to be to hide the menu so let's go in here and show create one to show the menu so we want this menu this open menu button to be shown and the close menu and the menu background to be hidden so before i do that i'm going to create and hold down shift and i'm going to select both of these and i'm going to create a group okay now i'm just going to move that group down one again now this group is going to be called menu items now the benefit of a group is that you can add in these visuals here into this group and if you hide the group you hide all of the visuals that are part of that group okay so it just makes it a lot easier to basically manage the boot marks and to manage what's hidden and which what's in view basically so let us hide that and i'm going to select all of these because these are all of the visuals that we're interested in i'm going to add a bookmark okay now we can see that we can we've got this menu option here so i'm going to call this menu closed okay because the boot mark is basically going to hide the menu so we're going to call this menu closed there's a few options here that we need to um we need to deal with the first one is to uncheck this data because we don't want to boot mark the data we just wanted to display it and we definitely wanted to be on the current page and the other option we're going to use is rather than bookmark all visuals is we're just going to be interested in these visuals here the selected visuals okay so you do need to make sure you select the visuals but we're going to be looking at the selected visuals and it's only going to apply to those selected visuals and that'll be our menu closed option the next one we're going to do is we're going to hide that and then we're going to go and show this and that's going to be the menu open option or boot mark okay now i'm going to select all of these again i'm going to go back in here uncheck the data and then check the selected values and then i'm going to go in here and press update okay so hopefully that should be us working okay so we're flicking between those the next thing i need to do is i need to add an action to this button here to activate the menu open boot mark so let's go into action so i've selected this this button here or this image actually i'm going to go and select it turn on the action and the action is going to be a boot mark and the bookmark that i want is menu okay click on here then you open now the next thing i need to do you can see it's been highlighted here is select this button here and assign an action to it here we go menu closed and we're going to put the action on bookmark and it's going to be it's going to select the menu closed bookmark right so let's just test this works so this one here is activated the menu close bookmark and this one here should activate and then you open boot mark so that's has got our foundation in place and the next thing we're going to do is we're going to start adding in some visuals into this menu bar so the first visual we're going to add to the menu bar is going to be a page selection visual okay so to do that we are going to go into insert and we're going to go to buttons navigator and then we're going to go to this one there's two options here we're going to cover to cover this bookmark navigator in another video which i'll leave a link to below but we're going to look at this page navigator okay so what this does is it creates a button for every page that is in your report so there's a few options for um for dealing with that but for for configuring this so let's go through those the first thing is the this the good layout okay so i want it to be um vertical okay because i want it to be up and down the way okay so that's going to be um the the different buttons that's going to navigate us between these pages here so we've got work order details we've got the backlog schedule we've got the backlog forecast etc etc so let's make it a little bit smaller here and the next thing i'm going to do is i'm going to change the the text here because i just want this text to be basically um i don't wanna box around the text so let's go and look at the um rotation style here we go so first of all we'll change the text and i want that text to be like a dark gray color so we'll see how that looks a second the second is the fill so i don't want any fill on the third is the border i don't want it to be a border and let's go back to the text i really want this text to be off to the left hand side there and maybe make the text slightly darker there we go um in fact actually what i'm going to do is i'm going to make it lighter i'm going to make the dark text okay i'm going to make it that so we've got options here we've got the default option and we've got the hover we've got the press and we've got the selected so if we look here selected the color is going to be white so it's fine i'm going to leave that as white as it is um we've got the default which is this color here which is okay i want to be quite subtle i don't want to be i don't want to be too sort of enough so let's see if we can make it slightly yeah it's going to be fine and then the other one we're going to choose is going to be the hover okay now if we hover over the text i am going to make it a slightly different color here we go right now the other thing i'm going to do from hover over the text is i'm going to change the padding and i'm going to just make the pattern just so it moves it in slightly i think it just gives a little bit more of a kind of a bit more feedback to say that yep i'm definitely hovering over this particular option and um just makes it look a little bit cooler and a bit more interactive okay so let's put a title on here so the title's under general and go to title we'll turn that on and in here i'm going to call this page nav okay so that's our page navigation now for each of these pages what i can do is put a back button here now you could actually add the navigation to each one of the pages i'm just going to leave it on the front page and put a back button here okay so it's going to take us back to this page here now these pages here don't have anything in them i've just created them just as an example here but you can go back to that page and you can navigate through your report from there so that's the first thing the page navigation okay next we're going to add a filter or the slicer so let's go back to our visualizations and let's add in a slicer here which one is it this one here okay and we'll pull that down into here and the slicer we're going to add is going to be for a work type we'll add that in i want it to be a drop down and i'm just going to configure this to um go to effects so background is going to be off and we'll just leave in fact actually let's go to visual and let's go for um values and we make that color just a little bit darker just so it hangs it's just so it stands a little a little bit and we will change the values here to be um a darker color too okay so we can start to select these values here and we can see that's impacting on the rest of the the dashboard so that is great so that's the first slicer and then let's add another one in so i'm going to copy this slicer i'm going to paste it so all the formatting's done now what i need to do here is add a new field in here which is going to be condition for work okay so we've now got the page navigation and we've now got these slicers so the next thing i'm going to do is i'm going to add in a button that adds a pre-selected selection of filters okay so rather than go and add in two or three different filters we're going to press a button that's going to allocate those fillers straight away so let's go and select a button i'm just going to use a blank button here and this button is going to be [Music] go button and let's go to style and text default text is on and it's going to be a filter critical work we'll leave the border on let's go to general we're going to leave the background on and make it transparent here we go and let's go back in the button and i'm going to change the text to be black filter critical work okay or maybe a shadow into this so let's put a shadow now remember it's in the visual we want to put the shadow so go this effect and then stick any shadow here and that just makes it pop a little bit okay now let's go and create a bookmark okay so before we explore the different options here for boot marks i need to create another bookmark and that is going to be the one we're going to allocate to this button here so let's open this up and this bookmark is going to be for critical work now critical work in this example is going to be anything that is um let's say greater than 100 days old and there's a priority one in fact we'll make it greater than 100 days old 50 000 day we'll make it both of these categories here and the criticality is one which means it's safety critical okay so we can see there's only two but that's what we want we want it to be a very small number because we want it to be something that doesn't happen we want it to be zero really so that is going to be the boot mark that we need to create so let's just rename this [Music] no we don't need the name of it but we need to add a bookmark so i'm going to go now the bookmark and in here we are going to leave this data option selected okay now the reason for that is is because we want to actually bookmark this specific data and we must leave this option on the display on the current page etc it's going to basically ensure that we actually apply these values here every time so let's go and also we're going to rather than use selected visuals we want to apply to all visuals okay because we don't we want it to be everything that's actually in here is going to have the boot mark apply to it so let's go in and update that and we'll rename it and what i'm going to do here is i am going to add update okay so now it's going to show us our critical work next thing we're going to do is we're going to create another bookmark before we start practicing with this one here and showing you what this one does to reset all the fillers okay so let's go and add in a button and we've got a button for reset here so we'll add that to the bottom there and we will let's go and get rid of the background here that's in the general effects and background and we'll change it to change the actual icon itself there's it's icon and we'll change that to be black okay so just because it's the same as this one at the top here so that one there is going to be to reset the fillers so let's open this up read all these give it all these and we just want to make sure there's no filters applied okay we'll work criticality for's fine because we've applied a filler to that card um but everything else is fine no filters applied here etc yeah that's fine so what i'm going to do now is i'm going to go and create another bookmark and i'm going to rename this to reset filters and then i'm going to go leave the data on leave all visuals on and i'm going to update that okay so now if i go and click on this one here app okay see what's happening here we've got this on here so i need to go and make sure this is minimized and i'm going to go and update this okay so now we can see we're switching between show safety critical work and reset filters now the next thing we need to do is sort out this bookmark at the side here so i've been adding visualizations into here but now it's time to go and um and just update that to make sure that these bookmarks here when i click on close you see it's not hiding this here and when i click on open it's well shown in the background really so what i'll do is find this menu item here and i'm going to go and pull in the slicer and we just need to make sure that it goes in front of this menu background here i'll pull in this other slicer i'll pull in the page navigation i'm going to pull in this button here which i'm going to rename reset and i'm going to pull in this button here which i think yep we can see it's been selected there that is going to be the accurate work okay so let's pull these in as well okay so now when we go into menu closed everything's closed we've got a menu open and everything's open hopefully okay so if i just demonstrate the difference between the options to um to show and to show that to include the data or not to include the data so i'm going to go in here and i'm going to select this option here okay so that's filtered everything for those critical work orders that we're interested in now i can click on here and it's not going to impact that data okay now i could actually go in here and i could remove these manually okay and then i can click back on here and we can see it's only opening and closing this okay so it's not making a difference to the actual data however if i go in here and press this reset it's going to impact the data okay because it's going to apply those values to the data and it's not going to impact this this values the same this menu here so just a little bit of a sort of difference between the the that data check box right okay so that is us for that neat little menu bar here we could we could tart this up a little bit and add extra bits and pieces but hopefully you get the concept here you can add other visuals in here and perhaps a last update um date and time and um other sort of utilities that you might want to see and then hide again and just to keep it nice and simple and nice and nice and neat so if you found this useful it would be appreciated if you could give it a thumbs up and if you want to keep up to date with the latest videos then hit the subscribe button and you'll get notification whenever i release a new video which is more less every week thanks again for watching and i'll talk to you in the next video

Channel: Jason Davidson

Views: 24,625

Keywords:

Id: SCI9iKl4vjU

Length: 21min 36sec (1296 seconds)

Published: Sun Jun 12 2022