First Look at Power Apps Modern Controls

let's take a look at the new modern controls for power apps today so to do that we're going to do some three parts right first we got to enable those we have to change our all three version we'll explain what that does and then we're going to enable the setting to get them secondly we're going to add the controls and get an overview of kind of what they've done thirdly we're then going to talk about a little bit of the nerdy side of how I break down new controls right like I didn't get a special overview of this they're not documented yet so I just had to drop in there add them one at a time and explore them so I want you to learn more about how to explore new controls when you encounter them as well but yeah by the time we're done we're going to went through all the controls to get an idea of what this new modern UI is and have a better understanding if you're ready to start using this with your apps today or maybe you should wait a bit so let's just jump over to my desktop and take a look alright so over here at make.powerapps.com we're going to go over here we're gonna say blank app and then say create give it a name I'm gonna get a real fancy name like that and say create alright after a few seconds I got a blank app now if I go up here to insert you're going to notice right away that I don't have the modern controls what you want to do is go to settings and then you'd go to upcoming features and then under preview if you scroll all the way the bottom you may or may not see the modern controls down here I do not see them right so here in the North America region they have not shown up yet but I was in one of my customers in Europe and in South Africa is Right both of them had it so it's like we're the last ones of the party boom if you don't have it yet what you can do is you go up here we're gonna say settings and we're going to go instead this time to support and so this is the authoring version this is the current build of power apps that I am using right if you hit edit here and hit the drop down you're gonna see that look this is the current recommended version for us in North America but I can jump backwards to an older version or I can jump forward to a newer version and both of these newer versions have those modern controls that's how I know we're getting them any moment now so I'm just going to jump to the latest one and let's say reload and apply version this is going to offer to save my apps we'll say save and then we'll just go back out we'll leave we'll go back into our app and we'll edit this again and we're back in here now if we go back to settings and we go to upcoming features and we scroll to the bottom we should see tryout modern controls now keep in mind sometimes if you come back in here and you still don't see them it's because it didn't take your version change just walk through the process again it'll work right so I get basically every time I try to change my authoring version if I can get a slightly different experience but you'll figure it out so now we're going to do is we're going to turn it on and they'll be there now keep in mind you can also click on learn more here this would take you to the documentation I have found that thus far it does not take you to the actual page to launch in the documentation you have to search for modern controls but we don't need that that's what you got me for so now if we exit out of here and go to the insert menu and scroll the bottom there are modern controls or if you prefer you can hit the plus over here and get to Modern controls this way either way you're used to I'm still School site go this way here are the modern controls controls and so these are what Microsoft has released now keep in mind they are preview right so that brings a lot of things with them right and what you're going to see as we go through here is that yes they've got some really new cool things yes they look very pretty and shiny but there's still more than one thing it doesn't they don't do yet so you know are we ready to cut over start using these full-time yeah probably not but we'll make that decision at the end of the video but you know here they are I do encourage you to explore them right that's what we're gonna do here and we're actually going to do them in reverse order right I think they make the most sense backwards to forwards just because you know and if I don't go in an order I'll screw up so yeah the text input you can see it dropped in here it's kind of got this gray effect right see that's kind of it's almost probably hard to see the white on the gray but it has this great effect to it now and so if you click on it you're going to see over here on the right you know it's like hey what is the value so this is the default right we call these defaults in the other text input now they call it value mode is single line or multi-line and is it required right these are the things that are kind of showing us here one of the things that I do and the documentation says not to mess with the property drop down over here but this is what I've been using it kind of all at once see what it can do and what you're going to notice like yes we still have delay outputs you know but notice that all of The Branding stuff is gone right now with the modern controls they look snappier but we can't change them so if I want to change this from this blue base that we're going to see that kind of has now to a red base I can't do that the Microsoft identified this they know it's not there they have a new theming engine process theming something that's coming that will then affect these but you know right now as I sit here today I can't change the color even if you're like well what if I go use one of these themes up here will this affect it let's change it to the brown one look it's still there it's still got the blue everything you'll see like we'll leave it on the brown theme we can it doesn't matter and you're going to see though that these controls that can't be branded right now that's one difference you'll also notice like you think about a text input today you want to be able to change it maybe to make be numbers only can't do that you can't put hint text in there like there's a bunch of things it can't do but we did get the snappier prettier look and keep in mind you know that you got you know a little bit over here also like this required flag once again as best I can tell it doesn't affect anything today I'm guessing that's another part of the engine it'll show up at some point but another Oddity that I find all the new controls have an on change property so if you think about it one of the things I teach in my classes right is that all the controls have an on Select Property all of them like a couple and so basically any control can always be clicked on and and triggers some activity these have on change and what I'm finding is that some of the controls like this control on change does fire because it should but some of the other controls have on change properties and they don't fire they basically are just there so you know but whatever right so the text input if we hit play um you know Shane was here if you look you can kind of see the blue underneath it here but notice also that when I was over here like what if I want to make I wanted my text input to be this big I want the font to be that big no can't change the font sizes right now either they have some limiting factors you're going to you know text right aka the label oh you know what this is where the Brown's not gonna work out let's change our theme back to Coral um so here with the text so the text input right label or sorry this is uh they call it the text control we call it label you know you're going to see that we've got size but notice it's text size 300 so you can hit the drop down here you can change the text sizes of these that's much bigger uh but you can't set them to whatever you want you're kind of locked into their 10 different sizes here um so different size that's how size works with this one if I want to set the text right you know good old-fashioned hi mom works the same way you'd expect also if we wanted to reference that text input from a minute ago what we've done we would have said text input one canvas now remember what would it be in a normal PowerApp player I'd be text input one dot text this one do a DOT if we try dot text that is not the answer anymore for most if not all the controls it is dot value right and so how did you figure that out it poked around right but this is why I really harp on you guys right you've got to control and it's telling you look data type is control so you use your shovel the dots and then now you can kind of look through and if you're not sure which one of these are you could be like what is height oh that's the actual height we don't want that right then dot value and so that is the output text from above that is how you would get to reference that text input now over here you know also we had some font Styles we got alignment uh do you want the text to automatically wrap or truncate um so that's up to you like what do you want to do if there's too much text to show like we don't have the auto size we don't have any design stuff so that's that one insert the tablet so this is totally new this is something we don't have so let's add a data source real quick we'll just add my SharePoint list there you go click on SharePoint and then over here we'll do powerapps videos and then we're going to add employees I know shocking right so if you add the data source to your app now if you go to this tab list you can choose a table in our case we choose employees and so look it made all the different ones go across the screen this is currently showing you all their titles if I want to show a different field we're going to go here to fields and edit and we're just going to take first name and move it up so we're actually going to grab title and move it under first name and so then now it shows you all their first names so basically with this control what you can do is you can choose one of the fields to be the tab so now that I've done that so now if I click on you know Chewie here you notice the blue line so you know that's the selected one but you don't see anything so the tab control is just that that top layer so if you want to interface with it what you need to do is insert a form right edit form here look up The Forum to employees and then now we can pull it down right you're seeing my lovely little Coral and so then now what you do is you'd set the item for this form and you can set it to be what was that called tab list one Dot select it right so kind of gallery.selected tab1.selected and so now you notice that you're seeing Chewie's record and so if you click around right now if we switch to Geno we see oh we're gonna hit play right and now if we click on genome we see Geno's record Allison's right we're seeing the records that we'd expect now one thing you might notice if you're familiar with my data set is you're not seeing these people's faces right we should be seeing Nicole's pretty face right now I don't so why is that so if we go back to our tab control oh that's not our tab controls our form or tab control and we go over here to Fields if we look through this list face is not listed so the record it's returning is not returning face all right well we'll just add the field you say add the field we search for face it's not there so what you're seeing here is that you know some of the field types aren't supported my face field type is a hyperlink SharePoint list uh you know field type it's not supported yet so that's why it's not getting passed through so you have to be cognizant of that if you decide to use this part now if you really wanted to get the face still which you probably would have done is you could go back to here instead of saying hey use the record that's coming out of that control I could have done a lookup here and then did a lookup from employees for that where ID equals the selected ID that would return the whole record that whole record includes Nicole's pretty face bingo bingo my app is much nicer looking because she's involved now right so keep that in mind you know and once again how did I figure this out trial and error clicking around exploring I did tab list.selected I was like wait face isn't in here and kind of worked my way backwards from there speaking of exploring another thing you can do this tab list that I didn't realize and type my fifth practice run is that if you go over here to um alignment so right now it's doing horizontal and so I believe I can just type in vertical here and look at that now they are vertical and then now it's kind of got to scoot this over but now they are being selected vertically also keeping in mind that you're not supposed to do it through the drop down right now right so what you should have done is tab West here and then over here alignment horizontal or vertical which would have just made the same change for us but you know me I like to do things the wrong way and then render size right make them large and so it just made the font a little bigger now another thing that I don't love about the tab interface right now though so what if I said I want to start like down here right like what I want a scroll bar right like I want to control the height it just basically is going to use as much space as it needs it's not Auto putting in scroll bars right now so if you had too many tabs you're going to have problems take that for what it's worth as well right maybe that's not the way you want to use this but to me this was kind of the first go and once again remember this is really early Microsoft's giving us a look at this stuff early days so don't don't write the control off right but just kind of know that right now it might not do all the things that you now while I was recording I realized one of the things we didn't talk about was why are they rolling out these modern controls and so the main purpose of the modern controls is to continue that convergence of the modern interface the idea that powerapps canvas apps and powerapps model driven apps should be the same right they should continue to meld into one product and so one of the way is that they are moving in that direction is the idea of these modern controls is they're going to work both in canvas apps and in model driven apps right today we have two different types of controls they'll be the same controls in both right so that's one of the goals of the modern control that I didn't point out earlier so I thought we'd add that all right anyway back to demoing here let's just make another new screen I thought the screen's starting to fill up so new screen again so if we go down here the spinner this one's pretty cool right it's just literally a loading spinner over here you got the primary or the inverted experience remember these are the only you can't change the colors of any of these other than you know flipping the two here um you can put a label on here so maybe you want to say loading so type in loading and then look now it throws loading in there automatically and then you can move uh that around so you can put it below us where I kind of liked it the most make the spinner a little bit bigger the definition of huge in mine two different things it's not very big but you've got a loading spinner then you know how do you typically control these right the same control the same we've always had let's just go insert we'll jump up to a button real quick and so with the button we would just say hey Button on select what do you want to do you want to um update context VAR spinner true right so I create a variable called VAR spinner set it's true and then we'll just copy and paste this button we'll take this first one we'll set its text to be show we'll take this button and we'll say hey I want you to be hide we can also flip the click on the button here and use its type so it has a primary secondary type which are just inverted colors so now we're show and hide and then we'll just go down and change this one's on select to be false all right so that was toggle our variable and then what would you do here you could just set your little spinner and say visible equals VAR show spinner now if I press the show button it shows up I hit the hide button it goes away so it gives you the ability to control that um other than that you know the button control since we've kind of introduced it here you know it doesn't um it doesn't have a lot so we can't really control like I can't make round buttons today you know how we change the the radius on them you know there's not all that and there's also not all of the color stuff which I know I keep reminding you of but I want to point out because a lot of times you know you have the disabled colors versus the enabled colors to kind of get that experience when you disable an enable a button that is not the case if I disable a button it does have a different look to it but I can't control those colors so just because they're cognizant of that all right let's insert again let's go down here that's the spinner very similar to spinner we'll skip the radio for a second it's a progress bar so the progress bar is well it's nothing right now right but if we do this you can set it to be indeterminate and get an idea right basically what it's going to do notice you're just getting little animations of it going indeterminate means I don't know how long this task is going to take just run right so a lot like a loading spinner we just spin until it goes away so you can have it set to indeterminate I like that um you can also if we turn that off it does have different colors so brand is going to be the blue right now because we can't change the brand but then success is green warning is orange and then error is red the warning and the air look really close it's not the same um you can change the thickness but it doesn't get much thicker and then the shade this is the little edges that I can't even see my eyes are too old but there's little rounded edges or squared edges but one of the ways that you can use this so let's insert ourselves an old school right this is not a modern control it's just a classic timer you know since the arms you know it's the old school and so we're going to set this thing to be 6 000 milliseconds right six seconds we're gonna go down here and say Hey I want you so it has a max so it's going to have a range from 1 to 100 and right now its value is 50 so that's why it shows a 50 bar values a number doesn't care how you get there so what if we did this what if we said timer one value divided by timer one duration multiplied by a hundred right so basically creating a percent done so now if we press it right so right now the timer is not pressed so it's at zero timers or the progress bar is at zero if we hit this it's going to slowly count up over the six seconds right because I set the timer to take six seconds when it's done our progress bar will be done that's a nice little animation you know I use the timer example because I think that's an easy one for you guys to recreate when you're playing but now you can start to think about are there ways in our long running operations that we could have you know increments to control what how long the timer is shown there or maybe you just want to force them away 20 seconds you want to give them a bar that does I don't know what you want to do with it but between the ability to change the uh the value here and um the max there's a lot of different things remembering if you turn on indeterminate it's just going to do the wooshy wushy thing you know kind of Knight Rider um so you've got some different things right that's a pretty cool control I can see sneaking that into an app today um other than you know The Branding challenges but it's a good one all right next up I skipped the radio so let's talk about it real quick so the radio control so the radio control works somewhat like it normally used to right so you set the items it needs to be a table if I set the items to be employees there's all the employees right and then we could change what field was shown let's delete that one but a lot of times with radios what am I doing I'm going here I'm inserting a radio and then I'm setting you know what we're going to hide that that's driving me bonkers that it's still spinning but now over here with the items we're going to say hey we want to do our classic red blue green so when you do this if you build ways you know yes no maybe type of tables on the fly it does not understand it this is a known issue so what you have to do now is click on fields edit and you're going to say add a field and you just have to choose value and add and now it shows red blue green so a little bit of a Nuance there but the same thing happens when we add the drop down in a minute looking at the list of properties it has notice that they got rid of default and they call it default selected items so both the radio and the drop down have kind of Taken on that terrible in my opinion property that is part of combo boxes right so if I want this to default to Green I go here I can no longer right to the in the classic one you can just go to green it would be green this errors and it's going to if you hover it'll tell you it wants a table or a record so we would have to do this we'd have to say Value Green and then Now default to Green so I'll put a link up there to a video um that explains how the fault selected items works because we're gonna have to get more familiar with it not less familiar with it and it's the same way it works the same way that it does in a combo box today speaking of being the same as a combo box if we insert a label probably should have done a new one but yeah whatever so if we said radio so control Dot so look selected is not the top so you have to go down here and look they're selected or selected items just like a combo box selected and then dot your field name in this case value will just return green the text like you'd expect selected items returns a table so we do this and then you could do value it's not going to actually give us anything though right because then we'd have to do a concat and all that I'd show you this is here so that you know it's here but also so you keep in mind that even though today you're not able in a radio to select multiple items and there is no select multiple over here my guess is that we're going to see eventually the radio and the drop down just have an option for select multiple items so probably something new coming um but is not there yet the Hensel the writing on the wall is on the wall to me because I gave us selected items but we'll see it's just a guess next up let's insert ourselves a link so the link control pretty simple so if we go over here and type in the link uh Power Platform training and then in the URL we type in training.powerapps911.com and hit enter or I don't have to enter But now if we look and we hit play you can see this is the high point if I hover over it it does and if I click on it it will open up a new browser tab straight to here right so pretty cool right check out our training stuff if you haven't lots of cool stuff free classes paid classes live classes on demand classes lots of cool stuff anyway switch back over so that's how that control works now keep in mind that it doesn't have all the coolness of the launch function right it doesn't say hey let me you know build parameters in there or let me determine whether to use the same window or a different window none of that's available but it is nice that it's a good right it's a modern feeling looking way to have a link in your app I like that all right insert next up we have the info button so if you add this little critter right we can change its size to large and all this control does is if you click on it it does a little pop-up right notice I'm not clicking I'm not holding my mouse down so the little info button content there is going to stay until I click away so a little bit more like a you know modern control right once again that's what these are right so if I want to change what it said you know said hi Mom now obviously if I click in here and click on it now it just says Hi Mom so you could use this for adding pop-ups right I did a whole video on how to build fake this experience in the old style and so now it's a built-in control there's not a lot of flexibility here though right you don't control any of it you really are just going to choose the icon size and the content all right next up we can add the drop down so almost identical to the radio right so here you can see like if we add that table again we're going to have that same problem but notice here if we play one nice things I'm not holding down right so all the things you're showing the little blue line maybe no I clicked it I can choose one I don't want those though obviously we're going to do this now over here remember you can do fields and so we would just do the add field and value and now we would actually see red blue green like we'd expect we get the stuff out the same way that we did with the radio control um we have the same default selected items as the radio oh I didn't click on it we have the same default selected items over here we have the same thing as far as we can either get dot selected or dot selected items out which makes me feel like they're going to do multiple items at some point you know it's drop down but it looks different once again you can't change a whole bunch about how it looks but it looks very sleek and modern as it is so as long as these colors work about it insert the day the Dave probably hopefully you found the date picker over in data version for teams today this this quasi-it but it's not a one for one um you know default date so you do value and so like we could set this to the today function we'd have a default date um over here as well there isn't a Min in a Mac State like there was with the one that's in dataverse for teams and if we hit play though we do get this much better experience if I click on March 14th it just takes March 14th no more clicking okay so this is a better data picker or better date picker um but you don't have a lot of you know knobs to turn here you kind of got to roll with it the way it is um oh and then get the stuff out of there just so we're on the same page let's add ourselves a label again all right so then this is going to be date picker canvas one right that's the control we do a DOT and then you'd have to kind of look through here and stop value so just keep that in mind like it's dot value or dot selected are the primary ways to get things out of these so far um so those will be my first guesses if I was you know when they drop some more new ones on you and trying to figure out what's going on with those also notice though with the date picker you know we had um a format option let's see if we try to put this in that you know format that the rest of the world other than the the US uses so if we said text and then we said DDM WHYY so that does flip that around all right so that's interesting right so if you wanted to show the date it is not seven that is the wrong date no okay so it didn't work right because that that is not I don't know what that is um interesting and if we just choose a different date let's just make sure it doesn't affect anything yeah nope it's still showing the Americanized version all right never mind so that would not work so do not do that all right so sorry about that you can't format those yet either now hopefully it just takes your region settings and automatically changes the format I I've not tried it in a different region yet all right insert we're almost done um really just two more all right so check box so check box um you know one of the things I do not like about this one so notice you would set the checked to true or false right so I think the other one the um the traditional one called it value so this is where you'd set whether you want that to default to checked or not also there is not a on check and on uncheck which is something we used a lot with check boxes so here you just have on changed you'd have to write logic to figure out if it was changing from one to the other so it might be a little bit trickier to use um the other one I'm just going to show you because I feel bad if I don't it does have a weird visual bug watch carefully when I click on it and check it it moves down a pixel uncheck it it moves up a pixel or maybe it's more than a pixel but it's moving I think that's going to drive people Bonkers I'm certain Microsoft knows about this they're going to update it but I didn't want you to think you were going crazy I also had experienced it and then of course if you want the stuff out of there it's just going to be check box one dot checked right so oh the traditional one use value almost every other control here use value this one does not this uses dot checked which will return true or false based on your current checking status all right last control insert the badge so the badge I'm like all right that's kind of fun right and now if you look at the picture it's got a little person right so what do you what do you think goes in a badge right I immediately think of a badge or they my face on it so I'm assuming this one in a picture I was wrong the badge control wants text hi Mom I wish my mom watch my video so she knew how often I talked to her hi Mom right you can change the appearance to fill ghost outline or tent right and this is very modern to have these badges with text on them like this I get that but just their little icon made me really think of this as being a picture and it's not I tried a couple different ways to get a picture in there and I I couldn't maybe figure out something but I could not make it be a picture make it real wide it kind of gets like that right you know the badge whatever the other thing that I don't like about the badge is like when you expect an on Select Property here when you want to be able to click the badge and maybe do something because you could use these rounded buttons there's no on select I I you know I don't understand their decision that all the controls have an on change whereas they're used to all the controls had an on select I feel like on select of every control because that meant any control could be a button this is not the case right you're like well Shane what if you put something in on change for this one right well let's try remember we did our little update context bar show spinner the true which would make the spinner pop up and so if we hit play and we click on this it's not it's not changing right so it's obviously not triggering whereas if it had it on select right now it'd be setting that to whatever so that's all the modern controls I'm guessing you're gonna see Microsoft continue to sprinkle them out so keep an eye on the different controls you know the question of though should I use them in my app today yeah probably not honestly right and the reason like you know I mean maybe you use this maybe you use our cute little loading thing right those two I could see the date picker if you're okay with it looking different is better than the date picker we've got don't get me wrong but you know because we can't control The Branding like you know over here like you're like got excited about the tabs but are you okay with the fact that these Tabs are in a different font a different size than what my form looks like inside of here if you are rock it right but it I feel like right now building an app that it's half modern controls and half old school controls is just going to leave you an alert it's going to put you in a bad place going forward so play with the modern controls start to get familiar with them but maybe hold off on using them until you've got enough of them that you can build a hundred percent of the app in modern controls then I think we can get truly excited so that's what I've got for today hopefully you enjoyed this thoughts comments did you find something cool that I missed leave it below I'm always reading those always looking forward to those yeah and with that I'm gonna say thanks and have a great day

Channel: Shane Young

Views: 42,944

Keywords: Shane Young, powerapps911, PowerApps, Power Apps, powerapps modern ui, powerapps modern controls, powerapps modern design, power apps modern ui, power apps modern app designer, powerapps controls list, powerapps fluent ui controls, power app datepicker, date picker in powerapps, powerapps custom date picker, power apps tab control, microsoft powerapps, powerapps tutorial, power apps experimental features, power apps preview features, power apps authoring version

Id: 8JI_NSuIQTI

Length: 31min 8sec (1868 seconds)

Published: Mon Apr 03 2023