Create RESPONSIVE BUTTONS, APP-LIKE BUTTONS in Power BI // Beginners Guide to Power BI in 2023

this video I'm going to show you some simple tricks that you can use to make your power bi buttons feel more responsive and pop out we're going to go through some formatting tips whether you're using different types of buttons like let's say page Navigators the normal buttons or maybe even these slicers to be able to switch between different charts all of that and more so without further Ado let's get started hi my name is fernan and welcome to the solutions abroad YouTube channel recover tips tricks and best practices when working with power bi I upload new videos every week so make sure you hit that subscribe button and the bell icon to get notified when a new one is out so buttons is one of those visuals that you must have used in the past to make some interactive element work within your page maybe as a means to move between different pages toggle between different bookmarks or maybe even do some Drilling and in this video we're going to look at how you can design or think about how you set up these buttons to make them feel more responsive and for this video I prepared a report which already has a few visuals in them so this report is doing some analysis already on our fictional company Northwind data sets but the analysis in these Pages don't really make that much sense I only created them purely to show you the buttons and how you tackle them in the context of an already built reports and how it can work in terms of visual elements within the page so this fictional report that we've created for the Northwind sales has obviously a few pages here we have the the home sales summary expenses as I mentioned that don't really make sense it's just a means to change or look at you know different pages with different insights if you go back to home here we have a few buttons that you typically Implement in this type of dashboard so at the top here you would have different buttons to navigate it's called the in-page navigation which allows you to move in between the different pages within your reports we have some control buttons on the top right here which allows you to you know go back to the previous page that you're at maybe reset the filters that you've applied or navigate to a help page to get some more information on the bottom left here we have the sales by category and then we have a slicer visual here which allows you to toggle this line chart to look at either total sales which changes the the axis here so you can see the whole cells there and then toggle which changes it to units sold so the total number of units and then finally we have this sales by category here which allows you to drill through currently it's disabled if you don't know how drill buttons work there needs to be a slice in the data for it to toggle as enabled so if we select for example beverages here that enables this button to drill through so if we click it it will take us to page which will have those filters already pre-applied for us that's not too important it's just it's just for you to understand the different types of buttons that you can apply within your report pages so what we're going to do is we're going to go through each of these different elements and I'm gonna go through to you how you can format and make them a little bit more responsive so let's start with these navigation Pages buttons here on the top so as you can see they're all individual buttons which didn't really enable the action on all of them but for example cell summary if you hit Ctrl click it will just take you to the relevant page so what we're going to do is instead of having individual buttons here I'm just going to delete all of these and then we're going to insert a page Navigator which is a new feature that came out last year which allows us to create a sort of dynamic page Navigator without having to create those buttons individually manually all of your pages so we're gonna go to oblivious inserts and under buttons Navigator page Navigator so what it will do is it will create a group of buttons that you can use with all of the available pages that you have in your report by default it just shows us all of the different pages that we have enabled here but as of last month you're now able to kind of customize and change which Pages you are showing in this options section here so you have a bit more customization ability to customize these buttons so let's start by going through some visual elements that we want to change here now you can see it already has some interactivity already built in like for example it highlights what the page you're currently in is at as well as as you hover over any of these buttons it also highlights those with a gray background which is pretty handy but I think we could do a little bit more to make this look a little bit nicer so that they look like they are part of the header itself so we're gonna do fill here we are transparency to zero that's fine but no borders and then we will change the font color into white here we are so you can see that now it looks a little bit nicer but you can see that as we hover over these they they look like they haven't changed the color they're still showing as gray so we'll just change that so let's go back to style will go to on Hover so on Hover we want to change the fill to something a little bit darker so I'm going to do that more colors and I'm just gonna just make it a little bit darker here we go and I also want to change how it reacts when it's pressed so we'll just change it to the original colors as you selected you kind of have some inkling of of that action what I also like to do is if you go back to on Hover I wanna I like making the font bold when those values are being hovered so that we know or it gives some inkling to the user that those buttons are interactive and they are responsive giving it a bit more of a app like feel so like this for example it means that the Navigator is not big enough so it it kind of compresses we're going to look at how you can resolve that in a second um and then the last thing that I wanted to resolve is the is the selected states which is here because that field is a bit too dark so I want to use the other dark one that we've just used here so you can see that um now you signify which page you're at in this page Navigator and you can see that yeah it's a lot more responsive than before and what's great about this is now that you've created it and you've customized it like this you can simply hit copy and then go to your other pages and paste and you don't really have to do anything else so you'll see that it's already selected which page you're at and by default clicking into these will already navigate each of those pages so pretty neat right so the next thing that I so the last thing that I want to touch on in the page Navigator are the names of the pages themselves so the names are fine but what you can do so I'm just gonna make them short just because I think that's that fits a lot more better at the top there um and what you can add on your pages are emoticons or some icons to just give it a bit more uh more Flair I'm gonna double click here in the home for example I'm gonna add a space in between and then I'm going to use Windows dots which will bring up the Emoji board here so we'll just use some icons here so let's say home here and you'll see that as you make that change on the page itself it will also change how it's being shown on the top on our page Navigator and it already inherits everything that that we've applied to it so which is great so and that's because it simply takes the state of the page that we rename it to so automatically so let's go to sales I'm just going to take some random Emoji here it's not too important right so there we go so now I've renamed all of those different pages with icons and you'll see that that's also here now on our page Navigator and it's implemented automatically without us having to make those changes on every single page which is great the next thing that we're going to look at are these control buttons that we have on the right hand side so the back we set filters and help and you know these are pretty much just your normal buttons but you know we can do and you know use some different options here to make these a little bit more responsive and a little bit neater with their design I'm going to delete all of them we're going to insert a new button here so um let's pick out a few that we might want to use so for example let's use the left Arrow here which um is a means for us to go back let's just change a few of its style options here so um let's say for the icon here we can change the line color to make it white so that it's more visible on a darker background change the weights to smaller weights just so that we can play around a little bit with the hover effects and uh I think that's that's a pretty good way to um to work with control buttons now um control buttons I mean end buttons in general you should try to minimize not minimize but make sure that it's not taking up too much space on your page so that you can use that real estate to kind of show more visuals and make use of that white space so for the control buttons it's a good recommendation to use icons for them so now that we have this let's start to change some this some of the Styles based on its state so we said we wanted to change the style on Hover so on Hover I wanted the weights to be bigger so as I hover you can see that it it does or it is a bit responsive to signify that it is a button that you can interact with and for now I mean that that's a pretty simple way to implement it and let's not go too deep into the detail um but you can do things like I'm changing the background color as you saw on the page Navigator you can approach it the same way as well so let's add those few other buttons that we wanted that we had before so I just copied the same button and then what I'm doing is I'm just simply changing the icon to um for it to do something else so maybe we want to go back instead and that's just um change it here back so as you hover you'll see that it's already inherited that that change that we've made on the icon on Hover and yeah let's do one last thing and copy and paste this one and let's add foreign by defaults the icon we want uh let's say information and then on Hover we also want information so now you have these buttons reactive as you hover over them similar to how we have it set up here in our page Navigator next is the drill button here as you can see it's disabled and by default it's it's disabled only it only enables when you make a selection on any of of your visuals on your page which allows you to then click and drill through to the specific page that we set it up to so what I like doing in these buttons is to customize and change let's say the text of it when it's disabled to signify that you need to do something for this button to be enabled so what we can do is change the text on disabled select to drill and then by default which is this is now when this button is enabled we're going to name it click here to drill so now as you can see it says selected drill here but as we make a selection it tells us and it allows us to go click here to drill which is uh pretty pretty nice option to change this based on your button State let's add a few more options customization options here so I'm going to select a category here just so that I can see what the default state is we're going to go to the button and you might think that just because you have added a text here that you're not you can't add an icon but you can have both so let's say we want to have a right arrow and let's just adjust it to be on the right hand side make it a little bit thinner and the text will align it to the left here we are and then obviously what we want to do from here um is maybe add on Hover just make the text a bit thicker and the icon waits to be a bit thicker as well so as you can see here if we have no selection it just goes back to that um and maybe I don't want oh yeah we'll just leave it like that as you make a selection it changes that button to like that which is great so the last thing that I want to look at is this slicer visual here which allows us to switch between the different axes total cells or units sold which uses field parameters to switch the what the categories that is being measured in this line chart so switching between total cells and units sold like this now if you look at the format your visuals pane under the visuals you'll see that there's not a lot of options for you to kind of customize this like for example even changing the colors on those different states um you're kind of limited to them so you kind of are not able to change those states by yourself or at least not with the customization options available in the visuals pane so what we're going to do is instead of relying on this slicer we're going to create our own buttons so that we can kind of customize the colors ourselves so what I'm going to do is I'm going to create a button I'm going to name this one total sales wherever I can find it by default total sales will say no borders make it a little bit smaller like this so as you can see just with this we have infinitely more options because you can kind of add things like uh change the fill color like using our own our own shade of blue changing the the text color which you can do like this um or even changing the shape so if we wanted let's say a pill you can see that um it's not very difficult to do or customize with just a single button like this um what I wanted to do now is then we'll add the few style changes here on Hover so we wanted to make it bold like this so now that you have this button we'll copy and paste it to create another one which is the one that we'll use for units sold so we're going to change the style by default units sold yep and then now it's a bit hacky what we're going to do is I'm going to create a copy of those copies is basically they did not selected states of the buttons that we want to show if one is selected and not the other this makes sense but let me just show you so I'm going to change the style of these by default I'll change the fill to uh let's say white or something a little bit like perhaps like this uh yeah we'll just leave it like that so so essentially what we want to do is if total sales is selected we want to show this one with this one so if unit sold is selected we want to show these two but if total is also selected we'll show these two and currently this is the only way that I can think about and think of implementing this so let me show you so now what we're going to do is um we're going to go to view and we're going to enable selections pane here I'm just going to rename this sales total sales the total sales units sold units so total sales I'm just renaming them into something that I can recognize later so I can kind of understand how they should be grouped so this is units sold in the units sold um bookmark and that's what we're going to utilize and then we're going to use the slicer here build parameter so now that we have done that we're gonna simply put this well actually no let's let's just create the bookmarks for now so what we want to do um is change the states of these whether they're hidden or not based on certain selections so let's say we want to show So currently we have units sold selected so we're gonna do is hide this and hide anything that is total sales so we just have these two like this and then we'll add the bookmark and then we'll say uh units sold and then what we want to do then is enable oops enable these two and then disable these two select total cells from here hide it and then add that bookmark so we'll say total sales here so what will happen now is if we toggle in between these so units sold and total cells you will see that these buttons States also change tells you what you have currently selected so as I change that so does the buttons the last thing obviously that you need to do from here is just make sure that those buttons are toggling those bookmarks so for example the total cells should be toggling the bookmark to show total sales and then when we go to units sold our total cells here the unit sold should be toggling the bookmark units sold so you don't really need all of these anymore we just go back to the report here and you'll see that as I make a selection Ctrl click it makes those changes and goes back to those bookmarks so pretty simple and that's really it for this video I hope you're now a little bit more familiar with how to create responsive buttons within your power bi reports thanks for watching as usual give this video a like if you found it useful give it a dislike if you didn't sometimes do better for next time ask your questions in the comment section box below so I can help you and you can help others if you really like this video we have a patreon page where you can support the channel and get exclusive perks like Early Access demo files and credits at the end of these videos thanks again for watching and see you in the next one bye

Channel: Solutions Abroad

Views: 16,916

Keywords: solutions abroad, power bi, powerbi, power bi tutorials, power bi for beginners, beginners guide to power bi, data analytics, dax, data modelling, data visualisation, business intelligence, how to power bi, power bi how to, power bi best practices, power bi tips and tricks, power bi standards, power bi patterns, power bi help, power bi tips, power bi 2023, power bi responsive, power bi buttons, power bi bookmarks, power bi field parameters, power bi app like

Id: pBIUYtOAbRU

Length: 21min 27sec (1287 seconds)

Published: Mon Apr 03 2023