Creating a Slicer Pop Out Window with Bookmark Buttons in Power BI

[Music] hey everyone read here today I'm gonna show you how to create a highly customizable and useful slicer pop out window for your power bi reports now I no reason you Microsoft has been creating their own filters pane in recent updates though personally it's not quite as customizable as I'd like it to be which is why I still like to create the version that I use so let's get started so the slicer pane I'm referring to is probably one that you've seen in some of my reports it is in both my Google Analytics report my power bi template pretty much any report I build often utilizes this now if you come over here to the left you can see this little button that says click to expand the slices pane and you pop it open and that creates this little slice or pop out window and notice a few key elements here that I think that are important one you can go ahead and open it and close it and that can be accomplished by using the back button here you notice that there's a bit of an opaque transparent thing that gets added to the page as well so this also allows you to if you click anywhere on the page will also close the slices window so that's one thing I'll show you how to do as well I do add a little bit of a drop shadow in here just to give it a bit of an element of something that makes it pop out of the page but you'll notice this other button in here for clear filters so that does something that if I was to go ahead and make some selections in here make a few slice of selections within any of the slices on the page and if I click that it's going to go ahead and then reset all of my slicer selections so it's one button that clears all of my selection so that's a couple of things the filters pane doesn't quite have is one I can order these in any order I want I can give them all unique names put as many slashes as I need to in there but I can have both the back button to close it this little Clear button here plus the ability to click anywhere on the report itself to go ahead and toggle that closed so really you can customize this as much as you need so let me go ahead and show you how I made this so to start with let's go ahead and talk about the buttons that we see over here on the left side of the page now as an example this slicer pop-up button here is something called a button that is associated with a bookmark that lets me do certain things who actually come up to the home tab here and look under buttons there are a series of buttons that we can create in there there's left arrow right arrow reset even blank buttons we can make all I did was I created an object onto the page with a little right arrow with some tooltips it says click to expand slices pane and then I have actually created a bookmark that lets me associate this to pop out certain visualizations that are currently hidden now the button itself has a few things that I've customized on you'll notice that if I go and hover on it like you see here it's changing the color of the icon and then when I click it it also does something as well that's because if we take a look over here on the right there's a lot of things that you can customize in here the button text the icon the outline the fill each one of these has three different states the default state the on hover state and the on press state all three of these are things that you can set depending on the action so the default is what you see it on a hover is when you hover over it with your mouse that's what the action is going to be for it the reaction I should say and then the on press you can see that fill color here is darker now when you click it in this case the user that will then trigger that color or that action and that can be the fill that can be the outline that can be the icon any of these things can be customized for that now when you're in the development environment clicking on the buttons does not happen automatically as a developer they want to make sure you don't accidentally trigger any bookmarks so you have to use the control button to do that now notice by the way here and I'll talk about these page navigation things in a different video two buttons that are on here that are remaining static on the page this pop-out one right here and notice that the clear slicers stays up there I did that intentionally this is actually the same one that shows up when I open up the pop-up window so I'm going to hold ctrl open my pop-out window there they are and that little clear slices button stays there so that way I didn't have to create two of them it automatically pop-ups to fit perfectly in line with the rest of that and that bookmark essentially toggled every single one of these objects that is on this page and they've been here but they were just toggled on they were made from invisible to visible on the page and that you can observe in the selection pane that I have bookmarked up here that you can find under the View tab I'm going to go ahead and open up that selection pane there we go and you can see if I click on any one of these you can see over here in the selection pane there's my clear slices window button there's the little slices when info text that I have there that just says select filters so it basically created this little pane over here just with a series of elements by Hyatt slices buttons the same thing and then I have this series of slices all the way down here now a couple of other things that I mentioned that I did with this after I go through all of these is that I have this langston window box that's simply a little frame that I have on to there and you can use a text box another suggestion that I have if you want to create this there you go you can hover over so you can actually see the elements there but another thing you can potentially do is use one of these buttons here you can just create a blank button don't ever assign an action to it and just fill it in to be able to create like a little frame to kind of hold everything in there and that's the only reason I did that is to have it as a framework now behind the slicer window box like I said I created a full-page slices button so that actually is if I make this a little bit smaller and again it's very important to layer you notice over here that this is behind everything else because I want my slices window in front so layering and the selection pane is very important just like in PowerPoint you want to make sure things are in the right order but that full-page slicers back window button is something that I set I went ahead and just turned the background on for this to 50% transparency so it adds a little bit of that opaque transparency and kind of indicates to them that you know they can still see the information on the report page but it looks like they might want to click this or something and of course they get the tooltip when they hover so that's simply the action again as another bookmark where it will toggle the hidden slicers bookmark and clicking there will turn off the filters pane same thing if I click that back button and the bookmarks themselves are created through a series of steps the way I created this I'm gonna go ahead and go to the view and toggle my bookmarks pane there we are and the way I like to do it is anything that I'm toggling to in terms of showing and hiding the visuals I'll go ahead and select the items that I care about it in this case I'm gonna select the things that I want to toggle no again remember this little clear slashes window button that's over here that actually stays on the page that does not toggle off because it still remains after everything is hidden it's a way for me to save making two visuals when it shows and hides so I'm gonna start with the slicer window info thing here and I'm just gonna select all of these down the list and there we go these are the things that I'm gonna want to show and hide and right now technically this is my slice of showing so I'm going to go to say add bookmarks and in this case I'll call this slicers showing as an example and a couple of no important things you want to note in here when you click this I do not want it to affect my data meaning I don't want to update any data on my page I do want it to stay on the current page and I wanted to affect the display meaning I wanted to toggle things that I have selected and instead of all visuals I'm gonna make sure to have it say selected visuals there we go so that slicers showing and then I'm going to click these little eyeballs next to this so I'm gonna hide these visuals I mean I'm going to reselect them as soon as I finish doing that so go ahead and hide everything now one at a time there you go so everything's hidden and again I'll need to select them one more time but I'm just going to multi select all of these there we go now I'll select add I'm gonna call this slicers hidden go ahead and make sure that I've turned data off and that I have done selected visuals there we go and now you can just test it you can see slices hidden slicers showing there you go and you can see that they basically create that pop-out window effect like I'm going for and then at this point all you need to do is for those buttons that you've created and you know design and format it as necessary you can go into that action section and then just go ahead and assign whatever that bookmark is that you've created now I already have the bookmarks in here but I just wanted to show you how those were made now the other one that you haven't seen how it was made yet because this does the toggles you know being able to pop it out pop it back in but that little one over here in terms of the clear filters button that also is a bookmark that resets everything so in this case the clear filters I want to associate just with the slicers on my page not clear anything else so if I multi-select I can do the same thing I can come over to bookmarks select add call this clear filters there we go and now this time in my toggle settings I don't want to update the display I still want it to only update the selected visuals because this is important if I have any as an example page level or report level filters I don't want it to reset those so I only want it to filter the slices on my current page so now what I can do is if I go ahead and test this just maybe make a couple of filters on the page change this to something else now if I go and talk about that clear filters button over here there we go it's reset that and at that point it would be this similar thing I would take that button that I have set up over there and I would go ahead and assign at that bookmark now I will note that if you have a multi-page report these two slicers would need to be set up for each page so it can't take a little bit of time and it depends on the payoff so consider that with your customer your client when you're building this and think about the the cost versus benefit I often build it for higher level and executive dashboards reports that need a bit of extra that need a bit of extra design wizardry but it's certainly useful and it does free up a lot of room on your page because now you can see that because everything's compacted over here you can save most of the room on your report for the visuals themselves so that about covers it for this video if you found this video useful please click or smash that like button below and if you have any comments or have a suggestion for a future video please that do that to the comment section down below and if this is your first time here or you want to see more of these videos please click that subscribe and notification button and otherwise I will see you in my next video

Channel: Havens Consulting

Views: 93,074

Keywords: Power BI, PowerBI, PBI, DAX, Data Modeling, Visualizations, Tips & Tricks

Id: 5TaZQFc-t58

Length: 10min 21sec (621 seconds)

Published: Tue May 14 2019