PowerApps Conditional Formatting and Popups

and today's show with power outs we will get doing things like conditional formatting hiding a consent button based on whether or not a bunch of values are true and how to do some complex things there we'll get using a toggle button and then we do a pop up screen and we talked about how to toggle in and out that even though it's all on just one screen pretty exciting stuff but first here's our intro hi my name is Shane Young with bold zebras those guys in today's show is all about power apps in making your app more usable right so we're going to look at a consent form that we built in a previous video link below where you're going to see alright now that we have a simple form how do we do things like only elect them press the consent button if they filled out all the fields correctly and how do we do a pop up screen to say thank you and how do we send them an optional email that they can opt in and out of so a bunch of little things like that that just take your simple form that did collect the data we needed but makes it more of a user experience so you also see me make a really ugly screen because I'm terrible design but that's something we've all got to get better at because it's really important power apps so let's just switch over to my desktop to get started okay so over here we're going to open up our browser and we're gonna open up the consent form that we built in the previous video right so if you don't having this would be kind of hard to follow along but down below in the description is a link to that video where we built a very simple form it's an hour's gonna add a bunch of the whiz-bang features right and that first whiz-bang feature for me is going to be when give people will prompt if they have entered a and Vout email address to help them write we know we already changed the text to read we did that in the previous video but now we're going to also add a little pop-up so say label and we'll kind of make it this slide right in here fit it like this and like that no more and for the text we'll enter something like star please check your so like that and then we will set the color for this to red so we'll just type that in alright so please check your email so that's a good will pop-up now we don't always want that to be there there right and to do that we're going to go down here to visible and so the visible right now is just set to true so it's a except to true or false value and we're going to do is we write an if statement to evaluate whether or not that should be visible okay I'm gonna paste that in because you don't wanna watch me type all this we'll talk through what this is because this one probably took me 30 minutes maybe an hour don't tell anybody it was a lot of work because it's a very double negative kind of thing so let's talk about so what do we do here is we say if and the very first portion of our if is going to an or and so or is going to return true if either one of the two equations that were any of the multiple you'd write you know you can have two or more equations return true so for example I'm going to say if is blank email address so if that returns true then I don't want to show this header right because what we see down here is the if statement is false right so if all of this returns true if this returns true then it's going to be false and so this thing will not be visible so if the email address is blank then that's true so we don't want to show the thing right we don't to show on a blank form the pop-up that makes sense then we have another if right ifs inside of its it gets confusing I'm sorry and inside that if I have an and statement because I needed to do two evaluations so I said if email address is not blank right that's what this little exclamation point is so I'm using the is blank function and the exclamation point which is the not function so if email address isn't blank okay so if they type something so that's true okay so there's one true and if email address dot text dot email is not a match right not is a match so is not a match so if both of these things evaluate to true then we know they've typed in something that is not correct and so if that is the case if both of these things are true I want to return false right this is where I got really wrapped around the Inc axle because remember that we're hiding this value if all this stuff returns true but we don't want to hide it if for example if there is blank and it's not a match we want it to be true so then we would display it so this false and true right is attached to this if and then this false and true is attached to this if I know it's complicated I could sit here and talk about for an hour try and explain it this works feel free to break it down feel free to leave comments below and tell me that I'm crazy and I could have done in a more simple way because I'm guessing there is a simpler way but this is how I took a bunch of negatives and positives and flipped them all around and the end result for me because if we hit our preview button now as if we type in some text please check your email and then as soon as we get into a proper forum then it goes away or if it is a completely blank so that was how I did that particular functionality now you notice as soon as I start typing it does this so you can also adjust that eyes like that's annoying so if you go over here and what you want to do is you want to go to the back to the email box itself and there is a property here called delay outputs where is it there it is to layout foot and so if by default that is false but if you do true then what will happen is while they're typing if they kind of type in one fail swoop then they shouldn't ever see that message right so if I go in here and I say Shane at bold zebras calm we never got the pop-up because we delayed the output without the delay output as soon as I typed in the letter S that pop-up showed up so those once again the little tricks that make this work a little better for us all right so hopefully that gives you an idea right and I keep calling that a pop-up that's not really a pop-up that's more of just kind of choosing whether or not to display a specific piece of text but hopefully that gives you the idea okay so for our next thing we're gonna look at we're going to jump into is graying out the consent button unless they filled out all of our field fields right that's why I think so you want to do we don't want to be able to consent to a blank form so we're gonna do something very similar there so with my consent button if you click on it and then you go over here you're gonna have the option for display mode I'm scrolling the wrong way and so right now at this point mode is just yet alright anybody can edit it a cake anyone can use or interact with a button so we're not going to do that we're gonna write another if statement power apps especially for doing a good job of formatting high stuff right you know braiding a lot of ifs and that's okay it's a good it's a good exercise you just get your brain wrapped around that logic class you took you know a million years ago in school okay so here is my logic and this one is way less complicated thankfully but we're going to do is we're going to say if and then really first introduced in and write so that means if everything in here is true then we're gonna do the true action so we're gonna do what I say if blank image is not equal to pin input image actually this should be a signature I changed my variables along the way and then we're gonna say if age is greater than or eighteen eight eighteen if not blank so if name is not blank if email address is not blank then bammo wham-o we will set the display mode to edit if any of these things is false then the display mode is going to be disabled okay now age and name an email address those are pretty straightforward right now not a lot to think about or overcome there so now there's been much time in there it was pretty straightforward but this is the hard one so here it turns out that with our pen input there's no way to actually know that I can find right maybe someone smarter than me is gonna show up on the comments and say hey you're an idiot I hope so but I couldn't find a way to figure out if the image had been changed right if someone had actually scribbled something in there so what I had to do was I shouldn't creating a variable to store the value and then see if it had changed right so signature not image and if you're like what's in signature dot image it's a great question so let's grab that alright are things not going to work we got an error message right now but that's okay so we'll grab signature image let's go down here and this is how I figure out what's in stuff right we'll grab a label we'll just put it here for a second and for the text value we're gonna paste in a signature dot image and so if you can see that down there at the bottom let's make this a little bigger so down there you see it's a blob feel so blob : HTTP blah blah blah blah blah app our apps address so it turns out that every time you scribble in this box they're going to change that value right so if we hit play so right now it ends in 9 v b if we do a little scribbling now it's 2c b now it's c 1e right it's a crazy method but essentially every version of that image is getting sent out to power apps comm for us to reference and we talked about in the previous video how to email out that image right and not send them that crazy link but to actually turn that into a file and send it but what we need to do for our consent button to work is we need a way to gray it out if based on if someone's puttin content there or not so how I chose to do that was I want to go back up here to the screen and so for the screen I'm actually gonna create a variable so we're gonna say on visible and we'll paste this in so what I did I said update context create a variable named blank image and set its value to signature image alright so when the form first loads and that we know it's blank just store the value store this URL in the blank image variable so then on a consent button what did I do I said if blank image is not equal to singer sure image I know that they've touched it right I know that they've interacted with it in some capacity and then I know that it is hopefully got data now unfortunately I can't tell if they only put a dot in there or if they put a bunch of information then erased it all of those are gonna return valid things but this was as close to the solution as I can get you know someone's trying to gain my consent form well god bless them they probably can but right now it's all locked in right but when we reach Ange this it's like Oh still right we're still all undone here we gotta be greater than 18 still great out we'll put in an email address Shane it's funny I keep trying to type in my old email address for Mikey years ago I don't know why I think cuz all my demos I ever did was that but so boom now that we filled out the whole form our consent form has her consent button has lit up and were able to change it and that was thanks to being able to go in here and set a display mode right so if blank image is not equal to signature image check age is greater than 1827 check name is not blank check email address is not blank check so everything was true so we set the display mode to edit and if you look at the full formula it's actually display mode dot edit they just hide that for me and when all of these things aren't true display mode is disabled pretty cool here will delete this label outright he was just to help us understand what was in the data and so if we hit play we can see consent is good if we hit refresh boom it goes back to everything zero and that's all good now one thing you need to keep in mind that when we hit refresh let's go back and fix that button real quick so we reset name email address age reset signature what else do we need to do we need to re update our variable right because now we want to set blank image back to the value that is currently in the signature box which is the the empty image so you've got it's one of the harder things about working this blank image thing is it you know we set the variable in the form first loaded but now when we refresh we got to reset that variable when we consent and send it off and then reset the form we have to remember do that again also so it does add a little more complexity but that gives us the ability to do that check and then take action on it okay so that has given us a lot of new functionality here right we've got the little email warning text we've been able to change the consent button based on whether or not they've done anything next let's incorporate our little toggle button into the whole equation so couple clean up things with him one was I noticed that Mike click on him these currents his a true value is blue that does not fit my theme how rude of me so let's make him look correct so we will say true fill and I'll stick to black like everything else all right so let's fix that also down here our reset button you guys are letting me slack but I forgot to also say let's reset and then he is receive email all right remember resets gonna set it back to its default value which in this case is false okay so that fixes the button a couple things I should have done the first time but now how do we take advantage of this whole toggle so what I want to do in my example is I'm actually going to go in here my consent button and I want to update on select and so basically what I want to do is if they chose yes there I want to send them an email I separate even I'm not gonna copy them on this current email because this one has you know all the things I need from my records it's not well formatted it's not polite or anything it's just the data I needed to capture so then what I'm gonna do is I'm most in the second email and to do that I'm gonna put a semicolon in here I says says hey consent do that that first things in that first email semicolon do something else and to do something else is right here so what we're gonna do is we're going to start with an if statement and we're gonna say if receive email value right so the value of this toggle is true right I remember that toggle is either true or false and so we know with if statements that it just does something whether something is true or false so this is putting in right this is uh how do you say equating or you know has the value either stored a true or false so if this returns it true right then we do the true action if it returns the word false then when we do the false accent so if it returns true which means they said yes we're gonna say office 365 that send email and then we're gonna do is we're gonna send it to the email address text so whatever they typed in right here the subject can be something quite like hey thank you for consenting to our form and then the body write is right here and then that's where you would say you know hey here are the things you consented blah blah blah right I wouldn't send them a picture they're there what they typed in I might incorporate their name in there so it sounds a little more personal you might not care I don't know but from here you're just sending an email and the key factor that was we did the if receive email value and that's how we took advantage of the toggle to decide whether or not to send the second email and then you can see if that returns false then I just return false so essentially it's like if it returns false then just don't do anything false nothing to here to do move on so that's how we incorporate the toggle into our mess when once again that's another field got to make sure we reset and analyze the value so pretty straightforward there for a last trick we're gonna make a pop-up that goes over the form when we submit it and then hopefully you know kind of gives people an experience they see okay I did get it submitted everything was great now I can also tell you that I feel like I'm gonna butcher this part because there's a bunch of weird you know count order of operations I'll probably get it wrong but at the end it all works so that's what matters the most okay so back over here on our app we're working on so the first thing we're going to do is we're going to go over here to icons if you scroll through the list you got a scroll for awhile like I usually give up and paint they're not here down here we have some shapes so I'm gonna grab a rectangle and we're gonna do is we're going to take it and we're gonna make it cover our whole form by by form and then I'm gonna change the fill a fill not feel feel I have a hard time right now originally from the south so talking is very difficult for me we're gonna change the color from this blue and I could dark gray type of color and to do that I'm gonna place in this color that I grabbed off the internet and so 169 169 169 is a grey right it's on the power-up site if I remember I'll put a link down below to where I got the colors from but then the last number the whole RGB a function is like the percent that you can see through it right so 0.75 you know kind of Gray's out things whereas if I do like 1 the whole screen is gray and if I do point 1 you can barely tell I did it so I remember me I've been doing like a point 7 file that gives it that effect of okay the screen is grayed out but yet you still know it's there you don't feel like you went to something different okay so that's the first piece of it I needed my rectangle I've also been slacking on labeling stuff so we'll do this I'll call this my popup screen like that what was labeled to able to was our email warning let's fix that as well so that was a label warning sorry it's tracted okay so that gives us our pop-up screen they're in place and then on the pop-up screen we're going to add two things real quick so I had a label and so the label will say thanks for filling out our form like so and I'm gonna take my label and I'm gonna take it and we will just fill it with black which makes my text really hard to read so then we'll go over here to my color and I'll change my text white Oh much better and maybe I'll use the Home tab here right sure I could have also done my text but I will make that bold as well because I like bolding things apparently today I'll make it a little bigger and we will Center it boom thanks for filling out our form yay and then now I've seen people do like little cutesy put a little circle here that's a exit they can click to close out which is you know a little more used to that but just for simplicity sake for today I'm just going to grab and put a button down here and we'll call this close but right you could do the same thing in the image we showed you I'll do that just a few minutes ago and so for this well once again change our color to black Oh color yikes sorry about that little scape out of there that puts it back you will say our fill is black okay so that gives us thanks for filling out our form a nice well close button and we should go over here and label these so I'll say button close and then we'll say label Thanks and then we very got a pop-up screen okay so those three items make up our our pop-up screen force and you can see they're currently laying over the top of them and so what we're going to do with those is we're going to take these three so we're going to press our control key boom boom boom so now I've got all three selected over here and then on the home screen I have the option to group and sort of us say we're going to group those three things together cool so now they're one little group you know and we could just make this pop up so we knew what the group was we only have one group not a big deal but then with our group there are different settings you can set for the group and the one that we care about the most right now is visible right now visible was true it's probably not our end result that what we want is we want to now create a variable we're gonna call our variable you know pop-up or something like that that we assign the value of true or false and so depending on what that variable is that is when we will whether or not we'll show this so let me jump over see sets that so let's create our variable real quick and with our variable we're going to set that over here we'll go back to our friend where's our consent button that Oh consent button hmm oh I did not label him how rude but consent right I see how hard it was it figured out what button one was but button consent I know what that is and so we're going to go back to him we're gonna add another semicolon here and we're gonna say we're gonna use a context variable link below two variables you don't understand those haven't done this before but we're gonna create update context and we're going to say a little squiggly brace pop-up equals true close the squiggly brace close the rounded guy and what doesn't like okay it's not you don't use the equal sign I was just making fun of myself for doing that wrong and then I do it on the video all right so pop-up semicolon when you don't update context use a semicolon no a colon that's not a semicolon it's a colon pop-up colon true and that's going to set that variable to true okay so then if we go back to our pop-up here we'll say pop-up right because we know in our pop-up variable we stored the value of either true or false so we say visible equals pop-up I mean if pop-up is true then this shows up when it's false these things are hidden for us so that's how we're going to make that and then what we'll do is we'll go down here to our button close and for button close will say on select we're gonna do more with it in a second but just to show that the rest of this concept I'll say on select for this guy we're going to do what update our context again pop up and setting to false and then just do like that and so then now if we click on this it'll set the variable back and so it's toggling between the two and so when we do what is your name so we'll do Shane we'll say Shane at bold zebras I should have I can auto fill in for all this boom-boom and then now we say consent boom thanks for filling out our form and then we close now right now when we close we come back to a dirty form oh that's alright we know how to take care of that don't we so we're gonna go over here this is our lovely little reset script so we're going to copy all that can't select it that way highlight it all and then hit control C so you can get that out of there and then we'll go back over here to our button close oh click on button close so on select update context that's great and then put in all that so then that way it will turn the pop-up off and then I'll reset the form all completely back to blank for us hopefully so let's hit play again and so now I can since again just fill up a mailbox of these things boom those are filling out our form and when we hit close we're greeted with a blank form pretty cool stuff right gets us to a functional solution I think right we need to think about do we need to update the image anymore but we took care of all of that with the reset that's right our reset went ahead and set our blank image back a signature image that took care of that variable all of our reset functionality took care of these pieces so I think that that ties up all the loose ends right we've sent out emails we have think they're people for doing it we've given ability to set the form back to blank we learned about pop-ups we learned about conditional formatting a lot of really cool stuff here you have any questions about any of it or something I missed something I should have explained better differently definitely comment below and then also if you have ideas for future videos write this whole video was made because Jorge reached out to me and said hey how do you do this thing in your honor we've kind of talked about some stuff he built his own form actually might do a good job in post I'll show you a picture of the form that he built but from that conversation on one of the concepts of all this it inspired me to make this whole video for you guys so hopefully you like it and hopefully this was helpful for you so thanks have a great day hey it's me again just a reminder if you don't mind click the old subscribe button over here that always helps me out or if you want to work together you can always hit me up through the bold deepers or if really what you want is some more of these power rap videos which is probably what you want then the playlist is somewhere on the screen here alright thanks have a great day

Channel: Shane Young

Views: 99,676

Rating: 4.943728 out of 5

Keywords: powerapps, powerapp, power apps, power app, powerapps conditional formatting, powerapps popups, powerapps conditional color, powerapps tutorial, powerapps controls, powerapps pen input, powerapps slider, powerapps updatecontext, powerapps and, powerapps or, powerapps reset, onselect, displaymode, fill, delayoutput, handlefill, valuefill, isblank, false, true

Id: IvapIsBbM-U

Length: 25min 41sec (1541 seconds)

Published: Fri Jan 26 2018