Transcript for:
Updated Button Control in Power Apps

this is the classic button control and after so many years of asking Microsoft has finally released a feature that allows users to natively add icons to their buttons without using components or combining controls in this video we'll learn how to use the updated button control to build modern power apps we would also go through some tips and tricks to best utilize this new feature so we can know when to use the classic button control and when to use the modern button control also I have an announcement as regards my YouTube channel so make sure to stay on to the end to find out anyway that being said let's get into the [Music] video for today's demo I've built the homepage of a simple app to help a king business manage their recipes chefs and client events now I'm not going to build this entire up in this video since the main point of the video is our shiny new button control however as usual all apps component and data set featured in my videos are available for download to my channel members on patreon and YouTube so you're welcome to join if you want to download the apps I build now let's get back to our video to understand this new button control we first need to learn about the old one the classic button control it's not an exaggeration if I say this control is the most versatile classic control though this is the stting point it can be used to create a huge variety of custom uis Now app design has evolved over the years and one popular UI trend is adding icons to the buttons in power apps there was no straightforward way to achieve that so what we power app developers did was to create what I call Custom buttons and if you've watched my previous videos you would know this technique this technique basically contains four steps Step One is add a non-responsive container step two is to fill the container step three is to add a text label and icon inside of that container and step four is to finally overlay all of it with a transparent button to make it clickable this made it so that the whole container will act as a button now as you can imagine there is way too many steps and controls for something as simple as an icon button with the new modern button we can do all of that with just one control just add the button control and you're done no need for containers anymore so let's take a look at this new button control s similar to other modern controls for you to use this new button control you first have to enable it in the app settings once enabled you will then be able to select the modern button control so let's have a look at the base structure of the button control first of all I'll add it inside of our screen and as you can see it looks very similar to the original button control however you will notice a few extra options first of all the text and property is see the same thing you just change the text here to change you know the text in your button now we have two new major properties the first one is the icon and basically you can select any icon from here to appear inside of your button if you select the add icon it has it for you if you want to remove the icon you can either just remove it from the top inside of the effects bar and that will remove it and then you can obviously just add another one in our case I want to add the save icon you know just to match the text I've added and now this is the cool part you have a new layout property where you can select exactly where you want the icon to be placed so you can select it to be on the left by selecting icon before if you want the icon to be on the right you select icon after and then if you want only text you can select text only which is basically like normal um previous classic button and if you want it to be an icon only you basically change the layout to icon only and this is great because there are multiple scenarios where you want only the icon to be in the button either you're using it for navigation or you're using it in a gallery this is really cool the next property is the accessible label and this one is just for screen readers so if you set it to save when a screen reader is you know accessing the screen you to know that this is the save button and the visible property similar to every other PS control it turns it off or you know turns it on makes it it makes it visible or it makes it you know not visible the display mode property also works the same way if it's disabled or set to view you know you can't interact with the icon but once it's set to edit you would be able to interact with the icon and let me also set this one back to Icon before so we can also see um the text and now for the Align it works just like a normal text label where you have Center justify left and um right so the default is um Center vertical align also works the same way as in a text level so we have the bottom we have the middle and we have the top as for the other um size and position properties they basically work the same way like in other control for the position we have the X and Y you know you can move it to the left you can move it to the right however you want it to be for the size it also works same way you can expand and you can contra Ed for the padding it also works the same way like in the labels and basically any other control however with the icon rotation property this new feature can be either really cool or really tricky you know depending on what the use case is originally I thought you know it's just for Icon rotation when you know a user performs an action for example if they select something like let's say Chev rundown and you're using maybe the you're using the button for something like a maybe a drop down um a drop down accordion or something and then when they click it you obviously want it to be rotated up maybe to like 180 to specify that they can now close it and stuff like that but we have different directional um icons for all the obviously all the direction so that might not be the best use case then what I thought was there are some cases where you want your user to have some sort of feedback when they perform an action on your app to show that the app is still processing their data for example on the p app studio if you want to refresh a data set you click refresh you can see you know how beside the button there is an um animated icon next to it so that is a really cool use case that we can use for our new buttons so let's do that now if you say a Buton to refresh and select the icon to the sync icon let's say Sync icon what we can do is that we can use a timer to animate this button basically so we're going to get a timer control and then fit the value of that timer into the icon rotation and then as the timer is counting obviously is increasing the icon rotation and basically you know more or less turning the um what they call it the icon so let's test that out now I'm going to add in a timer control and then we are going to get the what's the name of the timer timer three let's add that inside of the icon rotation so we say timer 3 dot value right and then let's set the auto start to one let's set the repeat to one and if we play the app now you can see the button is now animated and then this is just one use case you can use it in different scenarios whether you're refreshing or you're saving on on your phone basically when they click the phone you can set it to start this animation and then once it has saved you know stop the animation if you were using the classic button control to do this we would have to have um we need to have like two versions of our icon one that is animated and one that is you know static and for people that you know don't really know their way around svgs or how to animate svgs that might be tricky because obviously they can't do it easily or they might have to get like an animated GI to replace that either way it is still way more stressful and this way is more straightforward and much more easier and with that you can have you know animated icons and animated buttons inside of our app to serve as feedback if the rotation speed is too fast for what you want to achieve what you can do is to reduce the just divide it by two or something and then you'll see it is is slower if you also if you divide it by by three I think it also even be much slower as as opposed to you know having those the timer value fed directly into it the reason is because the timer value is actually providing the um the data in milliseconds and you know that counts you know very very fast yeah so that's that obviously you need to hide hide the timer on your screen when you do it so you know you don't just see a button that is not being used anywhere yeah so that's that not bad not bad the next thing to discuss is the style and theme of the button so let's have a look at that hold up wait a minute something ain't right if you've learned something in this video please like the video and subscribe to the channel to get notified when I release new content so let's get back to the style and theme now now we have five button types so I'm going to add all of them on the screen so you can see the differences now these are the different button types for the primary just uses the primary color as the button fi for the secondary this uses a white background as the fu and has a charcoal gray um text color and icon color and you can use this to obviously um differentiate between buttons on your app in our case on the homepage I have a primary called color to show um button hierarchy and then on the left side we have the secondary color um secondary button rather using you know the secondary white color all right and then for the outline this one is rather tricky because it just uses the same charal gray color for the um text and icon however it has this I don't know should I say pitch kind of outline and when you overover on it the pitch just becomes a little bit more I'm not really sure if there are so many use cases for that but then you you should be able to find some in your custom UI the ones that I really like is the subtle and the transparent for the transparent as it says it has no Fu no but no nothing however when you hover on it it's gives the feel of the it gives the feel of the modern theme to the text and think for the subtle it's the color Remains the Same however I had um add a um light gray background on Hover um of the button and then for the icon style what I really like is that they've made it um have two different icon Styles because depending on which app You're Building you want to have like a uniform kind of Icon so if you are using like outline icon in your other part of your apps when you want to use like a button you should select the outline but then if you're using fied icons in other parts of your app you know you should select the field button so this will give some consistency in your custom UI the only time when you can have you know different kind of buttons is if you want to show maybe hierarchy on maybe something like a navigation but it's great that they've given us the option so we are not more less just stuck to what they've given us here yeah so that's that the color palette is basically um the same thing as the theme and then the fonts you can SEL different fonts for you know the um buttons If you change it obviously reflect and all of that the font size is similar the font color also self-explanatory when you change the font color it also changes it on your um button font weight same thing self-explanatory font style self-explanatory and then the Border radius is more or less the same thing that we've had in the classic button however they've given us the four different options from the onset in the side um Side bar here before if you wanted to change the left and right b top left top right we would have to go here but now we also have the option to do it in the properties panel okay so yeah that is the base structure of the new modern button so now that we've got in the base structure we should now learn you know some of the current limitations because similar to to all other modern controls this is still in preview there is still room for improvement so you should know what the limits are and how to overcome some of this limits and then we can know when to use the classic control the classic Buton control instead of the modern but control so let's have a look at that the most obvious issue is the fact that we are limited to just this few icons that they've provided for us here while they are great and they've tried to include the most popular icons they are the obviously multiple cases when we have a specific icon we want to add to our app and the way it has been set up is that you can only use the current icons in the system for the button control if you for instance add in anything that is not you know inside of what they provided for us it just default it to the circle icon and I've also tried you know adding svit here that doesn't work so that does that means that um you would have to increase the number of icons Available To Us by default or maybe in a future iteration of this um button control add the option for us to upload you know our own custom um SVG and that would be really great because we'll be able to mix it with the icon rotation property to create even better varieties of animated buttons the next issue is the fact that um for this modern body control since the mod themes don't yet support you know dark dark themed um apps and dark them custom UI we can't specify directly the color that we want on our button so let's say for instance on our button we want a very specific shade of let's say yellow for instance if we go to the color palette select custom and let's say yellow let's go to the yellow color and we want this exact shade of yellow for Icon you can see that it is giving us a darker shade on our button and that is because um of how the modern themes have been set up so what this means is that if you want a specific shade or a specific color for your buttons the modern button won't work for you at least as at the time of this recording we can't set the um specific color code to our buttons but with you know with the classic buttons we can do all of that so let's say let's try adding one button so if we add in the classic button now for instance we can use that to specify the direct color so let's just copy the base palette color for that and paste that in the field of this you can see it gives in that um what it called now that light yellow color that we want obviously for this button we can't use the white text color we can't also use the yellow test color so let's pick black so we use black instead of yellow or white that's got to be racist there's no way and here you can see you can specify the color you can specify the font color you can specify the bottom View and all of that with the classic control but with the modern one you know we have to be subject to the workings of the modern theme now it's not all doom and glue for instance if you want to use the modern button but still be able to set you know a specific shade or color for your um button feeli you can see that for example on our homepage if you have a look at our buttons I'm using the modern button however it has you know a light white um a transparent white background for the button so you can still do this and if you've guessed it correctly the only way to do this is to leverage containers so you're going to get back the containers again [Music] so and in this case what we are going to do is to use the subtle button type so first we going to add in a nonresponsive container or responsive container anyone is fine but a non-responsive is better and then you add that and then once you have your container the next thing need to add in the button inside of that container so I'm going to select a button add it inside of that make sure X and Y is zero and then make sure the the width and height is parents at width and parents of height so this will make sure it fills the container and once you do that set the type of the button to subtle and then for the container itself you can then take whatever field you want to so let's say we want to use that same fill um from here so let me just copy the fill um RGB 247 blah blah blah blah blah so let's add that and we set the field of our container to that specific color and now we can now set the font um what's it called the font color to wherever we want for on the main button so the font color here that one is not um directly doesn't have the same issue as the field so we can set it to basically whatever we want and it will always be fine as you can see I'm selecting different colors and it's responding to you know what we have using the exact exact um shade um that we selected and like that you can create a specific fi button with the modern button in this um on the homepage what we did here was that we just added it inside of the container and then the container we set the field to a transparent white so 255 2550 0.4 and that gives the cool transparent button effect what the hell did I do here stupid guy so I fixed it so the transparent button effect as you can see here yeah and that is that the last thing I want talk about is the transparent buttons the use case for this is um in cases where you want to make a non-clickable item clickable in if we were using like um what's it called the classic button the only way to make a transparent button is to clear the F clear the HF clear the Press VI clear multiple properties but then with this um um new what do they call it new modern button control we can just clear the text and the icon so I'm going to clear the text and clear the icon also and then we have a transparent button and this will make it clickable like normal button you just set the on selects um to wherever you need and I used that on the main page here so I wanted to make this whole um Gallery item clickable but without you know having any F cover F press F whatever so what I did was to add the modern body control inside of that Gallery set it on the top of everything and then in the unselect we can do select parent and do whatever we need to do so that's another use case of the transparent button control and yeah that's that as for the outline control maybe in the future once they give us the ability to modify the color of the borders that will really have like multiple use cases but as for now I I will stick with the primary secondary subtle and transparent buttons and yeah that's that nice that brings us to the end of this video now for the announcement I'm starting a new tutorial series on my YouTube channel I know some of you like my long tutorials but many of you prefer shorter ones this new series will teach power apps UI and ux tips in about 120 seconds and in the first video we will learn how to use the new modern themes on our custom svds don't worry I will still make long tutorials but this mini tutorials will just be some extra content so make sure to subscribe to the channel to get notified when it's live if you enjoy this video or at least learn something new please hit the like button thanks for watching and I'll catch you in the next one [Music] [Music]