Validate Inputs, Warn Users, and Disable Buttons in Power Apps

do you want to make your app easier to use I bet you do so today what we're going to do is we're going to talk about validating your user inputs showing them warnings when they get it wrong and even disable enabling buttons when they get things right and wrong right so the idea here is we're helping protect the users from themselves by making the inputs you know a little easier to use and keep them out of trouble and so along the ways we can go through this concept we're going to talk about some different functions like is blank is empty is match we're going to mess with a visible property the display mode properties we're going to delay outputs allow them to do selections all right we're just going to kind of work through a bunch of the little pieces so now that you can recreate what I'm doing here one for one but you learn all the little pieces so when you have those scenarios where you want to do user validation you can do it yourself sound like fun well then let's just switch over to my desktop and take a look alright so here I thought we would just start with the end in mind right kind of some of the function I want to build so here you can see that right now my save button is disabled and that's because name and age are required Fields the other two are option so if we go in here and put a name alright so Shane and then the age it says must be 18 or older but what happens if we mistype that and we just type in four instead of 40 whatever I am right if we click out of there we're gonna get a little message hey must be 18 or older and the control reset right that's using the on change property we'll learn how to do that today all right well let's do 44. better I think I'm older than that but whatever it doesn't matter favorite color pretty straightforward mine is orange email must be a valid email format so Watch What Happens here I start to type in Shane at oh look must be a valid email format so then now if I do Shane at powerapps911.com which is a valid email format the little warning message goes away and finally we can save our data yes right so this is we're going to build we're going to walk through we're going to add all these pieces one by one and build something very similar to this so you guys can understand how these components work because I want you to learn all the little pieces so that you can build big more complex things instead of just recreating exactly this right all right so let's X out of this and so over here we'll just go to a blank screen and so the first thing we're going to want to do is we will insert ourselves a text input because this is most common way you're going to get input from your user so what if we want to check to see whether or not they put something in there let's first let's delete the default text right and so then the easiest way to start with this type of stuff is still a label on the screen right anytime we're trying to learn without labels on the screen and so what you're going to want to use here is the is blank function she's going to put in this blank and then the name of your control which is text input3 Dot text it's output and so the is blank function returns true if it's blank it returns false if it's not so this is a way to test if a field it has data right if we hit play and we start as soon as we start typing stuff in here that immediately changes to false so is blank is how you check if something is blank or not now keep in mind that is blankets for checking fields or records why do I say that because we insert another label here sometimes when people don't know what they're doing they will insert is empty and then they'll say text input 3 dot text right like is blank is empty it's got to be the same thing well if we point this out what happens is blank is true which is correct is empty it still says false right is empty does not work for field records right it only works for a table so you would never use is empty if you were checking this right one of the things that you might think about here is empty is kind of the same as saying count rows greater than zero is empty means that there were Zero Records which count rows when returned zero record right that's the way to think about it that's is empty versus is blank a very common point of confusion for people now now that we understand what that is if we were to say insert a button down here at the bottom remember our save button how would you use this information well we go over here and we go to your buttons display mode buttons have display modes and so display mode edit means the button is clickable in display mode disabled means it is grayed out it's still there but Shane what about display mode.view don't ever use display mode.view of the button why because it's very confusing it looks clickable but if you look it's actually not this is super confusing for your users don't ever use view it's either disabled or edit so those are the modes we want how do we use this information what we're going to do is we're going to go up here and we're going to say all right display mode if is blank text input 3 dot text so that's blank what do you want this to be we want the display mode to be disabled correct because the idea there is it would be disabled because it's going to be a required field for us and then if it is not then you want it to be display mode dot edit now the button's grayed out if we go up here and we put in a name like buddy now the button is clickable that is how you're going to do this and we're going to build upon this as we go but it's core that's what it's all about some type of criteria that disables and enables your button now in the demo I also then just had a label up here above that said name and then you also might have noticed over here I had this little red star so how did I put that there it is nothing complicated it is also just another label and then we're just going to change the text for that to be a star and then we're just going to change the color to be red there you go now you can make it bigger smaller slide it around wherever you wanted it but that's literally all it is just a little small text symbol I know nothing exciting hope we weren't hoping for anything exciting so there's there's your first step now I will talk about one other thing with the button here so that's the display mode some people instead of doing that we'll go down here to the visible property of the button and they will show and hide it and here you could just basically say is blank text into three dot text like so and so but you don't want that you want the opposite so then you just wrap this in a knot so the knot is blank and so now the button shows up when it's not blank and if it is blank then the button is not there don't do this the reason I don't want you to do this is It's really disheartening to use everything I know the screen that wants a bunch of input and there's no button to save the input why would I start putting in data if there's no save button whereas if you show them the button so let's change this back to true and then comment out that show them the button and it's just grayed out then you know their brains are like all right cool when I make this little red thing happy that's going to go away right this is reducing the mental load don't ever hide buttons always change their mode based on you know what's going on okay so that's the first field we need to make the second one we want to do the email now for the email it's kind of the same but it's kind of different so we'll throw a label in here we'll set this one to say email and then we'll insert a text input and so for the text input we'll clear this out now in that example though I was able to check to see if it matched the format of an email address the way that that works is just re reuse this one is there is a function in powerapps called is match is match checks a text like text input for the field we just created dot text and then you can say all right check to see if it matches a specific pattern in this case we're going to say match dot email right now that is false if we go here and we start to type in Shane doesn't match at doesn't match powerapps 9-1-1 doesn't match Dot and then com it does match now it's a true so what this is really doing is this is a pattern that's saying hey is there multiple characters in front of the at symbol is there multiple characters then a DOT and then two or more characters at the end so it's not saying this is a valid email address in the world it is saying that this matches the pattern of an email is match uses uh regex Expressions thankfully they have a bunch of them built in like this match email but it does Regis reg X easy for me to say Expressions underneath the hood to do see if it matches the particular pattern you want so if you want to have it match a phone number pattern and you know uh inv and then four digits for invoice numbers Social Security numbers it doesn't matter you can configure that right today's session is not on his match we're not going to go into that in too much but I I guess I'll put a link down in the description if you want to the the Microsoft documentation on is match or if you want to make want me to make a video on that then hit like I don't care actually I do care but hit like but uh leave me a comment and say it should be a whole video on his match and I bet you can talk me into it pretty easily so now that we understand though how that works if you remember over here when I did this you know so right now it's nothing because it's not required but if I started to type in this and I stopped then all of a sudden we got the warning so how does that work the way that that is going to work now that we understand that is matches what we can use to check is we're going to say insert a label and we're going to you know actually we're not going to insert that label we'll copy this red one because it already does exactly what I want as far as being read There we go and so then we're going to just change this to say email required something simple right you could write something much more nicer than that and what we're going to do is we're going to control the visible property of this control and we're going to say not is match text input four dot text match.email so like that and that and so then now if we hit play what's going to happen so right now it shows up email required but that's not exactly what you want because remember email is not required here um and so what we're really saying I guess I should change that message is is put you know let's change this to say um email wrong because right now the email is not wrong it's just blank so for this visible property what we want to happen here is we want this not as a match and is blank text input for DOT text actually we want not is blank so not is blank because really what we want to do is we only want this to be visible if they've typed something and it's not there right when it's completely blank that's okay but if they start to type in something so if they just type in buddy email is wrong but when I get to Buddy at powerapps911.com it goes away so the idea here is that we're controlling the experience because we don't always want to show we only want to show it if they've typed something but it's not a valid email format a little bit of a Twist on your thinking now one of the things I don't like about what's happening here though is if I start as soon as I start typing it yells at me I don't like the stress of that so with your text inputs you do have the ability to change the property called delay output it is false by default change that to true what that does is that will wait until you've stopped typing for one second before it recalculates so now if we go in here and we type in buddy at powerapps911.com in one motion then the message never showed up but if we were to go back in here let's just delete this out again and so we type in buddy and then we gotta get stuck to do the ad symbol now it's wrong because I've waited a second but then as soon as I start again it's going to you know it's still not going to update until I've stopped for a second so it's not perfect but delay output is nice now your question is Shane can I control how long the delay output is I wish you could you cannot it is it's it's roughly one second there's nothing you're going to do to change that so there's two oh yeah I forgot to remind you right sign up for one of my training classes I've got a live class coming up real soon I'm always teaching live classes I've got on-demand classes lots of fun training over at training.powerapps91.com so go sign up today thanks now let's add an easy boring one right we let our brains rest for a second so insert a label now if we earlier I wanted to add um fave color so we'll do that and then we will just insert our cells in our input a drop down now how does this change things it doesn't it's the same exact logic so if we want to check to see I guess we should put colors in there right make it make more sense we'll do a square bracket remember that format makes a single column table with red blue and green and just one column called value and we want to see what we had chosen there then you would just say drop down to dot selected dot value and then whatever color they've chosen so if I hold down the ALT key and then go check on Blue there's blue easy enough now how do we check to see if that is blank well there's the text it's outputting so now you know how to Output the text just throwing his blank around that right now that's false that tells me they have chosen one of those colors if we go here if we wanted to have it be blank we could go here and we would have to change the drop down to be allow empty selection we would change that to true now if we we'll just hit play it's easier if we deselect blue now we get the thing when we do green we've got a color I want to point that out like when you're doing is blank it checks fields and Records it doesn't care you know where they're coming from so it's okay that you're doing um you know that particular scenario you know it doesn't matter so then now what we want to do one more to add here so this one will be a little trickier we're going to do this one differently and I probably wouldn't have done this one differently if I was building an app because I want them all about hey the same but I want to show you guys a second a separate way remember when we were over here when we went and set the age to three when I click out it shows it must be 18 or older and it reset the field back to nothing because we only want numbers that are 18 or greater in order to do that what you're going to do I guess insert a text input first we'll go here we're going to do a couple of things we'll clear out the default we're going to then change the format over here on the right to number so that way they can only type in numbers in the field and then we're going to take advantage of a different property we have the drop down here and we're going to go to on change on change is a property that triggers whenever the control is changed it's going on change and so here we could do something like this we could say if self dot text now I'll just write it out anyway self.tex is less than 18. now it's going to yell at you because self.text is text and we're trying to do a number of comparison so we gotta turn that into a value so we'll say value that'll turn the number 4 into or the text 4 into the number four so we can do a evaluation like that so reset self and remember self is just a way for controls to refer to themselves so I don't have to say reset text input 5 or check text input five it's in the control itself just reference Itself by using the word self so if we do that now if we go here and on change if we change it to 33 when we click out nothing happens if we change it to 2 and we click out it automatically resets now on the other one I had some hint text as well and this just said must be greater than 18 like so so now we've got that in there and then on change on the other snow I had to do a pump up and so what I always did here's the semicolon and I use the notify function the notify function I said must be older than a 17 I guess is really the way we think about right 18 that's how we wrote it and then I can go right here and I can set the notification type to be an error and so then once again if we hit play we say age must be greater than 18 we type in 7 we click out we get must be older than 17 right I I wrote that wrong I wrote greater than 18. forgive me for my minor but you get the idea um but so we have the ability and then by doing the reset it just sets it back to blank and now they do 22 and now it works as can as needed okay now we also know that we wanted age and the standard to be [Music] um requires we're going to just put a little thing down here okay so the last thing we need to do is now we got to make our button honor all of these remember we're not going to mess with visible we didn't like that at all so we're gonna go back to this display mode and so here you know before we did the first one that was easy enough we're just going to combine these so that's the first one so now what do we want if is blank that was disabled what else why am I doing and or not and we want to use or so if any of these are true we want this thing to be disabled right and so what are we doing for age we're going to do as text input 5. so we say is blank text input five dot text okay so if either one of those are um missing this button would be disabled now for favorite color we're not going to check anything because it's a drop down right there's it's not part of our equation like if they put something in there great if they don't great but they can't put bad data in this we don't have to do a validation for it now for the email remember we had that crazy logic and that crazy logic was in this label where'd my label go right there now I'm going to rename this label I very rarely rename labels but I will rename this one make my thing easier uh warn email and so what I want you to do right this is the logic it basically this red is showing here the button should be disabled because red is not showing the button doesn't need to be disabled correct so what I want you to do is instead of copying this go back here and we're just going to say or label warn email dot visible right that will be true or false and if it's true then the label is being shown and we don't want them to be able to validate so they can't go forward so right now if we go about here and we put in a name we're just playing buddy the button's all good if we mess up age buttons disabled put the age back button comes back but if we go back here the email if we delete it out that's okay that's safe but if we type in something that doesn't match the email format email wrong then there is our button disabled again when you start doing this for yourselves right remember I didn't try to write this all at once I didn't do any of this I solved a bunch of little problems and then we stitched them together the same for you please don't send me a formula that's 400 characters long be like hey which what part of this is wrong I'm going to say well which one did you add last it broke it so you add the first one check it works add the second one check it works third one check it works until you get there right baby steps fail fast do a bunch of solve a bunch of small problems and you're going to be able to get to the answer but with this you have now got all the pieces that you need to add validation and make your apps easier to use questions comments thoughts leave them below always kind of fun or if you want to just download this whole working app right over at training.powerapps911.com you can do that just sign up for the YouTube library and you get this and all the other apps and you get to watch all this stuff ad free there's lots of great reasons to sign up for the YouTube Library yeah and I guess with that I'm going to say thanks and have a great day

Channel: Shane Young

Views: 13,252

Keywords: Shane Young, powerapps911, PowerApps, Power Apps, isblank powerapps, isempty powerapps, text input powerapps, dropdown in powerapps, ismatch powerapps, powerapps validation, powerapps validate input, powerapps validate function, powerapps validate text input, powerapps validate required fields before submit, powerapps validate form without submit, powerapps validation rules, powerapps validate email format, powerapps validation on save, displaymode, powerapps required field

Id: WlWT0lWTGU8

Length: 19min 58sec (1198 seconds)

Published: Mon May 08 2023