PowerApps Animation, Flashing Text, and Scrolling

and today's show you're going to learn about power apps animations flashing buttons how the switch statement plays in that how timers in there will get XY controls to move things around on the screen a bunch of little things to make your apps a little more user friendly and we're gonna do with a 90's flare because why not but first here's our intro hi my name is Shane young with power apps nine-one-one those guys and today's show we're going to learn about some really important visual cues to add your thing right you ever one of those spinning wheel like when data was loading or when a user incorrectly puts in text you want to have it flash out um you know enter it here or the big red button that they could never seem to find on your screen would you like to make that blink alright these are all things that people have asked me on Twitter or in the forums before and I've never had a real great like you know go look at this video so this video we're gonna answer all of those questions and more but because we'd like to have a little style of where we're gonna do it in a nineties way so instead of just making a flashing warning button we're gonna do a blinking button right we're gonna do remember the blink tag from when you first learn to HTML so we can do that remember in your MySpace's or your first website how you had that scrolling marquee text we're gonna do that then we're gonna take an image spinning around a little bit because why not so should be a lot of fun but at the same time we're going to learn several things we need to do so we're gonna have our calculator out we're gonna have to kind of do some things with a timer some switch statements I'm going to show you some properties that I learned I didn't know about before I made this video so I'm pretty excited to make this and just get started let's go over here and let's just show you what we're gonna build today so this might not be exactly what we build but roughly speaking this is going to be the critter through and do so then click this button you should see that we're getting a rotating image based off of our timer and the text color is also changing based off of our timer and then if we click this timer we're gonna see that we now have this is scrolling text I know very fascinating stuff so obviously when you build your apps it will not be this ugly you will not have rudimentary buttons but I'm here to teach you the mechanics and to wear this fancy neon yellow shirt so let's jump over and build all this close out of this minimize that one we'll jump over here let's say build me a new app so apps create an app and then we'll do a tablet layout we'll skip this all right the only reason I always choose tablet layouts is it just has more screen real estate you could definitely use phone layouts or any of that type of stuff so no big deal alright so which wise do you want to tackle first I think we should tackle blink first because that was the very first one that you know if I think back to my HTML days that was a very first one I did so let's put a little bit of text on the screen so insert a label and well right in here make me blink all right so just like that and then we will make it a little bit bigger all right it's a make me blink okay so in order to make it blink all we really have to do is change the color right so if you go over here to color you see right now what is that and I don't know that our GB is and correlates back but we can type in things like red right now one of the things that I tried to do when I first got started with power apps is I wanted to just be able to like set this value by pressing a button turns out you can't directly do that the way that I would like to do it so what you have to do is you have to assign this button to be a variable and then once you assigned to be a variable change the variable when you press the button alright so what I'm gonna do is I'm gonna make this a variable called make it red okay and we're gonna make that a true/false variable right we've talked about that before because I think find that true/false variables are a lot easier to use with the if statement we're about to do so right now it's like I don't know what you mean so it's showing man I'll just make the text black no problem so listen sir to button real quick and so change color and so what this button is going to do is when someone clicks it we're going to update context right says that's a variable it's just good for this screen and we're gonna update one called make it red and we're going to set it to true oh but we're gonna spell true the right way okay so like that so if you press this button it would make it red but if we go down here so now we're gonna do is we'll say if make it red right so if that is true then what will make this red and if not we'll make it green right Christmas colors my wife's a big fan of Christmas colors so if we hit play and we've clicked the button it makes it red okay so that's the concept that works so now let's just take that and extend it a few so the first thing I wanna do is I wanna make this a change color so instead of setting this value to true use the exclamation point which means not right so do the opposite this one works with boolean variables but take whatever's pass so if you pass it true change it involves passive false change it to true so what we can do is we can just tell it hey if you click this button we're just going to flip the switch right so by default it was false when you press it the first time when we read etc etc all right so hit this so change color so every time I press this button it changes from true to false which changes our text from red to green got it got it okay so now that you understand the logic and I always always like to work out the logic in the simplest way we'll copy this out and let's insert a timer on the screen so down here we have a timer I'm gonna put this timer over here and so with the timer will set this to every half a second which is 500 milliseconds right this number appears in milliseconds so timer every 500 seconds I want you to run but what we're gonna do is we're gonna have a couple things we're gonna say every time that you change so where is on change we're sorry every time you in so every time the timer ends we want to do something and we want to just change our variable so every time at every half-second we're going to run this line of code that flips our variable okay also with the timer there is a control down here called repeat so once we start the timer I just want to run forever so we can say true and there's a whole video linked below on the timer control if you're like whoa I really want to know more timer there's a whole video on timer okay but so if all of this did what I think it did then now if we hit play and we pressed this button every half second now it's making the text change boom boom boom boom boom okay pretty easy and so last thing I want to talk about with the blink button so right now we're doing that with a color remember with a label there's also fill so what we can do here is we can say right fill right and I feel like I'm saying fill ph IL but i'm not i'm saying fil i just really bad pronouncing things but we're going to take this guy out we don't want that we're going to use our same let's go back to color i'm gonna get our guy from color here copy this go to fill and we're going to say all right fill what i want you to be is i want you to be the opposite right so we can just change our saying so we want the opposite of whatever is in make it red and then do it so then now they should just correspondingly flip between red green red green now you understand how to do a blink action in power apps alright i know probably not really what you wanted to work on but these are the type of things you have to think about you need to and your repertoire cuz you never know when you're going to assemble these pieces to do something better than make me blink but being able to understand conceptually how that time are updated is how we got there i was an important all right so let's go to the hardest part of all this this was the thing that i had to learn some stuff on so I wanted to have remembering the thing I had the image spinning in a circle but that took me a little bit of figured out so how did I do that so it turns out is that if you go over here to media and there's an image control okay so if I grab the image control in the image control there is actually a property called image rotation so this is important because in my head originally I wanted to add just an icon right so if you add this icon for reload and if you go to him there is not a rotation are down here there is no rotation property for an icon so you can't do a nikon that's what I wanted to do originally but what you can do is you can go over here to my image and say alright image what image do I want well look at that because I added the icon to the screen even though I took it off it made the icon available yeah that was a trick I did not realize I discover an accident so this is how I can then put our little rotating symbol here that we want into the image webpart because now that's in the image webpart we can take advantage of the image rotation right and so right now image rotation is none and so with the image rotation there's an image rotation dot and then there's rotate 180 270 and 90 right so you can only move in the the quarter increments so don't try and do anything too crazy we're just going to move by quarter chunks but now that we have this knowledge what we're going to do is we're going to assign some principles to our timer again and make him do what we want okay so right now we're sleeve this image rotation none or we don't set it to rotate 180 just so you can see that it turns upside down okay so what I'm going to do is up here I want to change what happens on my timer end because that's what I want to I wanna have something change every half second and it doesn't have to be in reality you could do a different timer you could have one timer you know all that type of stuff is up to you but mechanically this is what we need to do so we can say alright after you update that what else do we want to do I'm gonna hit my little shift in err to go down here and I'm gonna paste in this code because you do not want to watch me type at all and then we'll talk about what it does alright so I promised you the switch statement right and the switch statement all that is that's like a giant if so that just says evaluate rotate to and so if rotate to equals this value then do this if N equals rotate 90 do this etc etc so switch is just a great little function I probably do a whole video on switch but it's just a way to instead of having a whole bunch of nested ifs if you know you're just going to keep evaluating based off the value of rotate to right rotate to is just a contextual variable we made up all right and we could change that we can make you rotate to we make cow it doesn't matter right this is a contextual variable I made up and the first time that it gets used I'm going to store the image rotation value in it so to do that right which you would probably do in your app is you'd probably have an invisible right so when the screen came visible you would set that variable but I don't have on visible really available when I'm kind of demoing this stuff for you guys so I'm just put a button on here and we're just gonna call it set variable and so on the set variable we're gonna say update context of rotate two and we're going to set it to image rotation none like that and so then over here on this guy we're going to say alright what I want you to do is I want you to use that variable so whatever is in that variable is what you're going to do so we go back to our timer so what are we doing right so right now it's set to none well if it's set to none we're going to set it to rotate 90 the next time the timer expires so that half second it's going to be set to none nope it's me set to rotate 90 and so we're going to take it and set it to rotate 180 third time through 180 to 270 fourth time through one rotate one 270 set it back to none so these are the four different values that it could possibly be and we're just always incrementing it to the next one so for you over here we say Center variable we click on our timer every half second our image is rotating so this is what I would do if I wanted to have like a loading screen right I wouldn't have the blinking at people cuz I Drive them crazy but I would have you could have an image like this and maybe you find it you know a little off-putting they made it's too slow mean it's too fast you have the ability to do that maybe the rotating image is a little weird because moves and chunks maybe you have dots flashing on or off but this is conceptually how you would do a rotating image and it's all really based off of this image rotation property and figuring out that we can just use a timer and I switch to set that all right so hopefully that helps alright so the last thing I want to cover here is marquee or scrolling text and so for this one I actually had to kind of get out a calculator and figure out hold the math so this one takes a little more work but we're gonna have to cover a couple different topics to figure it out so first thing is put some text on the screen and so so here's our text and we don't want to say essay make me move it would do like account move okay don't make me move I know I'm hilarious you guys love me all right so then take your text we're gonna make it bigger so you guys can actually see it go across the screen that's probably too big just be a little smaller that okay now then the next piece of this is once you've kind of got your text the right way alright we get spring this down here and you want to make this as tight as possible right someone kind of mess around with it because the width of this matters in the math we're about to do and so we can see that over here on the right the size I probably had to move my head Zoop the width right now is 570 okay so that's important so let's note 570 I'm gonna always make a label somewhere so I don't forget all this stuff because know my writing on a piece of paper but you guys can't see the piece of paper so we're just making notes width is 570 okay so that's important to us Oh like so what else is important to us the next thing we want to figure out is what is the screen width okay so what you're going to do is you go to file and app settings and so here's your screen size right you can see that right now my screen is set to 1366 by 768 there's different options available here we're not going to mess with those but know that you have the different control so you can design for the surface that you want but right now 1366 that's the width that we care about okay so we'll go over here we'll say screen just 1366 all right moving right along so we need to make this guy move now what you could just originally do is say all right all I want to do is I'm gonna have a timer so sad a timer insert control a timer and so this is how is it the first hand it so I just set this to 1366 and so then I went to my guy here I said all right your X it's not 0 it is timer 2 dot value so whatever time or 2 is currently set to I want your ex to be that and so if we hit play here loop okay so that would work and then if we then go over here and say I well that works let's go watch or this guy we want make sure you automatically repeats so I'll set this to true and boom see okay so this works but I don't really like this right because it just pops over on the side right I needed to come in okay so we're gonna get a little more tricky there so what I'm gonna actually say it's alright I need this to be the duration but those two so I'm gonna say is all right so calculator is 1366 plus 570 it's a 1936 so let's change this guy to be 1936 1936 all right so that makes him that but then what do we need to do when you make our X we want you to be timer value minus 570 all right the width of the control oh I see we're adding with this so now if we hit go all right the text comes in off the side because even though you can't see it you know the text is let's zoom out a little bit Oh zoom out no more all right the text is over here and so when we're moving the / bit-by-bit it's moving under the screen so that's why it it gets a little better as we go let's make this bigger again okay but that's still not perfect so then what I had to do is I said I that that works but it goes too fast for me so to slow it down what I ended up figuring out was that if I made it nineteen thirty six times six which equals eleven sixteen eleven six one six like so and then if we take our texts right it's kind of hard to click on over there we're just grabbing like this nope that label and so then now what I want is I want you to be timer value divided by six minus five seventy so then now if we hit play now we get a much smoother you know make me move yeah cow jokes are free we call a cow with no beat no I screwed that up what do you can't cow with no legs ground beef yeah what's a cows their musical note note beef flat alright I'll stop I know I'm awesome but alright so hopefully over the course of doing all of these silly things right we'll stop that I'll make you sick it kind of showed you some different concepts that you need to understand right there's a separate video on XY down below there's a separate video the timer control but these are all the things that people ask me to do along the way but as they've asked me to kind of do them all in the way they've you know they've asked for more specific things that are you know hey I need a flashing red button so my users know which button is push on the screen well that's alright we just apply that concept to make it blink I need a loading icon right that's this icon so it just spins a little animation while they're waiting on the screen of modes because users don't get bored scrolling text well that was just people on Twitter being mean to my ideas so I decided to include scrolling text because X and Y is also very important and in reality what we use x and y for a lot of times it's like the animated menus right we've made a menu over and um based on what you used to click some things so hopefully you found this useful hopefully found my jokes hilarious okay feedback leave it below if there's other weird topics like this you'd want to see covered these are great little videos to be made I you know I realize that some people in complain but there's also people that complain that all my videos look like somebody made a geocities myspace type of website that's what I do I don't make pretty you make pretty I just show you how mechanic way to do it cool all right well thanks and have a great day hey it's me again if you got a second click the subscribe button that always keeps me making more videos or if you want to work together need some help getting your power apps going hit me up with power apps nine-one-one always happy to work together or finally if you're always looking for more videos that's probably what it is check out the power apps playlist over here and you know enjoy that alright thanks and have a great day

Channel: Shane Young

Views: 31,504

Rating: 4.9866219 out of 5

Keywords: PowerApps Animation, powerapps blinking text, powerapps blinking button, powerapps scrolling text, powerapps marque text, powerapps flashing button, powerapps change colors, powerapps timer control, powerapps timer, powerapps rotating image, powerapps loading dots, powerapps loading screen, powerapps rotate, powerapps rotate image, powerapps rotate label, powerapps rotate icon, powerapps rotate screen, shane young powerapps

Id: XsCmhg5cFXk

Length: 20min 55sec (1255 seconds)

Published: Tue May 08 2018