Power Apps SVG make your apps prettier and easier to use

in today's show we're talking powerapps svgs and so svgs are little html controls that we can build and design but more importantly what we can do is we can pull these into our apps to make them more user-friendly and much prettier right so you guys like pretty apps i want to show you how to build pretty apps so i promise not too nerdy but a little nerdy so anyway should be fun but first here's our intro hi my name is shane young with powerapps911 those guys and today we're gonna learn about powerapps svgs and so svgs these are an html concept they also have something to do with things on pinterest but i understand what that was about so not worried about that part we're worried about though is it svg's scalable vector graphics or way that we can build our own graphics animations and things like that and so we're gonna do is we're gonna incorporate those into powerapps by stealing a bunch of other people's code manipulating a little bit but to make our apps look nicer add visuals like progress bars indicators you know little animations just little little things that make your apps a lot lot nicer all right so i don't know that's enough about ballot right i've been messing with these for two days to make this video so let's switch it to my desktop so i can finally show someone what i built yeah hey let's go over there okay so here on my desktop oh before i show you this i want you to see watch we're gonna make this thing animate so i'm gonna go back we'll go say even cooler and so look at this this is our gallery control and so over there on the right these indicators these are actually svgs and so what they're doing is they're showing us kind of our progress and i just used some built-in numbers in my data set so i'd have to recreate things but you can see that they dynamically expanded and it corresponds with their wage versus a hundred dollars an hour right so you can see chewie is yellow you can also if you look really hard i tried to make some fireworks but my fireworks aren't awesome so a little firework explosion anybody over 75 dollars an hour gets uh that oh i would also like to tell you nicole wanted me to tell you guys no one allison does not make 4.75 it's okay calm down right so anyway you can see that's a pretty cool little visual over here we also we said hey what about if we had something that took and looked at chewie's exercise time so we press this we come in and it will actually grow over three seconds and show you kind of progress and so here we're kind of using it with a text input but in reality what we could do is once i explain to you how this all works you can actually just plug in numbers there whether you go fetch those numbers from a lookup against the data table or maybe you are calculating those on the fly it doesn't matter right once you understand how these things work it's really just about doing that you might have also noticed you'll go back here and then come back again down here at the bottom i built a little animation for powered by powerapps and then finally uh we won't get into too many of these but here are some different examples of some different svgs that i've been playing with over the last couple days because you know we had a customer project that we're working on right now we're in the poc phase and one of the things they want is some more visual flair so i was kind of playing with some different concepts here around the visual flair you see this little firework thing yeah i made that it's terrible but uh you know i stole some stuff and then i massaged it so anyway so that's what we're gonna do in this video is walk you guys through some of these pieces so probably the easiest thing to do to start though is let's let's back all the way up before we get in all this craziness because there's craziness there let's just make ourselves a new screen and let's build a little bit of this right so in order to use an svg what you need to do is you're going to have an image control so i'm gonna go up here to media insert an image control or you know you could have used the plus to get to the image control right i it's so weird to me that all of a sudden you know this is kind of like especially if you're in oakdale you have to use this but anyway so now we've got an image control so up here in the image we've talked about the past you know this could be an image you attach to your app this could also be a image you look up from sharepoint or some other type of data source a url to an image or it can be the html code which we talked about in that base64 video so what i found though is if i go back over here let's just go steal some stuff real quick so back to examples we're going to copy everything out here and we'll explain ctrl a ctrl c so we go over here and so if we paste this code oh here we'll pull this down so you can see what's going on so here's the code so this top part this will never change right but this is saying hey the thing i'm about to give you is an svg it's an image it's an svg plus xml so you don't ever have to change that but what we're going to have all of our fun is down here inside of we're going to write some html that uses the hsvg object and we're just using encode url so that way it does all the escaping of the spaces and all that we don't have to worry about all that but at its core that's what we're going to do right this is the set of code that we need to manipulate so now that we kind of have an idea of what we need to do where do we get these things so where i started was i went out to svg tutorial right of w3schools we've talked about this this is what i recommend anytime you have to learn html i start with these guys because they're awesome and so i was like hey i want to make a circle so i went here to svg circle and then i look here is the code to make that circle i'm like perfect so typically speaking when i'm stealing code from these things i'm going to grab this just the um the actual object right so control c i'm not going to try and steal all this svg portion i could but then i got to kind of massage that over and over again so now they've got that what i want to do is i'm going to open up notepad and so in notepad i'm going to paste that in and the reason for that is they use double quotes boo we know in powerapps that means strings and we want to have single quotes so then i'm going to hit ctrl h and i'm just going to say find all the double quotes and replace them with single codes replace all cancel i promise by the end you'll do that so many times it'll be like second nature so now i can copy that back out and so then now we'll go over here like all right so let's just get rid of everything between the svg tags and let's paste that in and look at that we got a red circle very cool and so if you start to look at it it's not that terribly complicated what happens here right so in the circle's case cx that is the x-coordinate of the circle so you can see that it is 50 um pixels to the right and it is 50 down and so then it's like oh hang on i'm going to change something real quick i'm going to change this up here to just say a hundred by a hundred make this make more sense okay we'll come back to why i change that in just a moment all right so 50 is the x and then 50 is the y and the radius you know how right remember radius from geometry class so it's 40. stroke well that is black so it's got to be that outside border stroke width is three so it must be the thickness and the fill is red well this changes what if i wanted a stroke width of 7. look at that just like that it changed i didn't have to do anything and have to reload anything but that's important to understand is that all this thing cares about is you give it a number right there so what do we know from powerapps right well i can give it a number any way i want so maybe we want to do a um a slider so we just throw a slider on the screen we'll pull it down pull this back down and so then now i can say hey i want your stroke width right what would we do delete that out we do close our text ambersand slider one dot value and like that and then open up that and so then now it's way too big but if we hit play right as we dynamically do this we're changing the size of the the black bar so that's the important thing to understand is you know that code at first we looked at is really intimidating but in reality when you realize hey this is just a number then just make the number be a number and you're in good shape also so then up here at the top you know we kind of had this beginning section so this svg this defines this as being an svg object and so what i've been doing for most of them sometimes you get a weird scenario you've got to adjust these but for right now basics height is 100 width is 100 and so then this view box thing what this does i have a hard time with this thing but what this is really doing is defining the actual size of the box and so in this case we said hey make the box the amount of screens real estate that we can see a hundred by a hundred i guess think of this as like the bottom right coordinate and so then all of these numbers scale according to those numbers that's why when i first came in here and this was like 400 you know this guy's way over here because now i'm saying the x right this point right here was 400 but the y is 100 so it's having to do like its own version of math but if you can keep this in a nice square setting what's great about it this is one of the fun things about svgs if i grab this and pull it out because the numbers are relative to that hundred right it's just resizing itself so i don't have to re-change my numbers i just move it around and it does what it wants right i move this oh and then if we hit play here right wings still change so so very important to understand well and and i definitely encourage you guys to go learn more about vue box i get a real nerdy explanation of it but for me once i kind of got the idea that this is the you know so this is where it starts this is the top left corner so zero by zero which is typically what you want and then this is the bottom right and by keeping the dimension square and then building my object in there it makes it a lot easier for me to control kind of the sizes of that okay so that is how we start to build this stuff and if you're like well that's great shane but that's just a stupid um circle what if i wanted something a little more complex well then i go over here make all right well how about let's go check out um rectangles right and the rectangles look down here they got a nice one with some corners and some fun stuff and so same type of video i'm just going to copy this out i'm going to go through notepad again paste that in and then say control h and then replace all cancel like i said i've done this a thousand times and so then now we're back over here and so then we go in and we'll just get the circle out of the way and we'll paste it in the rectangle and so now you can see that well look it's in there but it's not exactly right and that's because it's bigger than my view box so maybe what i really want to do here is say well i probably want you to be more like 150 by 150 no that's still not big enough because the x starts at 50. oh we'll start the exit 0 and the y at zero oh that's chopping off all the corners so we're gonna do like 10. and this is kind of the fun game you get to play and we'll just bump this up to 200 by 200. there we go and so it's not taking up all of that space but it's pretty close and so then now because we've kind of got that we have you know some control and if i wanted to you know we could really probably so i think it's the corner radiuses that are messing up so you could probably go down like 175 and then 175 what does that look like there you go so that's a little bit more filling so you just have to kind of play with it to get your object to show up and it's really just remember this is setting the scale and you just want to make sure your object fits inside the scale that you've got but these okay so let's look at these numbers right so x so that's how far to the right it was so it's 10 paces and then why it's 10 down or pixels not paces weirdo then this is the uh x radius so let's just change it i don't know what that does let's change it to 40. oh it kind of flattens out the thing right and if we change this one to zero well that's probably gonna work i'll do ten so we got kind of a weirder shape right but we start to be able to control and modify these different properties and then that's what's determining how this fills out with height i think those make sense to you and so then here you can see that you'll see when you borrow svgs from other people's sites sometimes they do things like this so in this case they defined it all as just one css style so style and so then you can see you kind of got these in here fill is red semicolon stroke is black stroke width is five an opacity all right how the see through is it is uh 0.5 so if i what if i make this green oh okay all right does what i want what if i make this blue right all kind of makes a lot of sense so that's a way of doing it by a style but you if you don't like styles you could spend the time you could get rid of this and change this to be like fill equals green like this get rid of that and then oh here we put the style back just i don't have to type a whole bunch for you guys but so style equals that and so then now we get the same effect but it's written differently so that is one of the other confusing things is sometimes they'll use styles sometimes they won't but there you go so that's that's a great example of you know a square um so then and i know it's like a chain i don't care about circles and squares but you have to start here you have to wrap your brains around these controls this way because once you do then all of a sudden when you're like hey i want to try a um [Music] how about let's see let's go to their examples let's go a little more complex right a quadratic beazer curve what i i don't even want i must that uh but so we could do like some filtering so what does this one do oh so it kind of gives you that drop shadow look right so you can see that in here they've defined more things but at the end of the day it's just it's just a little bit different um you know the one that i was having the most fun with was like the the gradients i just think that those are very interesting that's kind of what you're after and so here we'll grab this one so look at that that's pretty neat same deal i want this my app what am i going to do i'm just going to copy out everything in the svg this sorry your browser doesn't support it we're not going to pull that in you could but i'm going to grab that so we copied that we'll go through our notepad again all right i edited a notepad and edited that out so you have to watch me do it and so then now if we go back over here so then now we can kind of pull in and paste and so once again look it's outside the scope and that's because our box is smaller than our objects and i kind of knew that when i stole from these guys because i could see that they originally find theirs is 150 by 400 so what i would probably try and do is go over here and be like hey if i change u to be let's just make you uh 400 by 400 i like square square makes more sense than my brain what does that look like oh look there he is and so then now oh let's see because it's so uh tall so now we'll try changing this down to the 150. oh wait this would be 400 by 150 this way we'll do 175 give a little space there we go and so then now i can kind of move this thing around and get my sizes but you see the gradient and you go i want to change that text to say cool right oh right there says word and so cool and so now that you understand that that is text there's nothing stopping you from making that a text input or making any of these colors right so in this case it's got a two color range oh this is usually an rgb function what if i change this to be blue and i change this one right here to be pink and what do we got we got a whole different side shape well it's kind of more of a um you know this is an easter theme instead of a halloween theme but same deal with the lips we got a cx we got some different uh so right where's the exit at start where the why did it start and then the radius is x the radius is y the fill they are using a class which was they defined up here right so if you look linear gradient id grad one so this is how they were able to define the linear gradient as the fill color that they wanted and so then they were able to put it down here and it turns out with these if you want to add a third color in the middle so we got blue we got pink how about we add yellow in the middle i'm gonna paste this in here and be hey i want to start at 50 with yellow and so then yeah not exactly what i wanted but that kind of feel oh okay i typed in five that's one that's like why doesn't it look the right way there you go and so now we've got this once again very eastern looking thing i guess i should save this video for easter um but you know the key thing here a couple things right one is just try things right try try try i just that's i just guessed that that's how that would work and i was right you know i mean i guess like yesterday when i figured it out but but try different things see how they behave and don't be afraid to just edit these numbers or these texts and then also remember there's just nothing stopping you from what if i wanted to change this to be the login user's name right what'd we do well we'd be like all right so we got to replace cool so we're going i'll just delete out cool i'm going to close that text stream because it's really just a big text string here let's do user user dot full name and then we'll close that out and then we gotta open this one back up and so then now we have the chain easter egg and my easter egg is not big enough so i need to do something dynamically to make it bigger to fit uh that crazy chain right so let's just try changing this to be like 80. i don't even know what this does i didn't try this in the practice oh that was the wrong one see but that's what happens so control z i say control z yeah you guys know it doesn't always work 55 and we'll change this one to be a hundred what does that do oh look at that now we've got a more larger chain in the font you know you can see you get some ideas around the different font colors oh i want a purple font not whatever that number or whatever that is that's white so we'll just type in purple font size is 45. oh look the x starts at 150 and the y starts at 86. interesting right so maybe let's just change this to like a five font so that way i can get it into oh there it is right so this is the stuff you do you just play and that's how you understand these so now that we've played a little bit now you've got an idea how these work let's go talk about the cool things that i've built so if we go over here to svg demo app so the big one i want you to see here was you know whenever i change how many minutes chewie's been exercising which is like 12 it will automatically progress so i put this in the customer's app they want it when the sales people logged in they can kind of see where they were to go and a little animation just made it a little nicer right they didn't use these ugly purple and green so how did i do it i don't know let's click on it and take a look i will also remind you like man i just want if you want to steal all this stuff remember you can go to training.powerapps911.com and sign up for the curated library and you can download this app with all this code already written for you so just a reminder all right so here you can see i kind of did my normal svg my box um and so here i actually have three circles so i have one circle right this first circle and it looks like it's a fill the white so that was my white center oh okay and then i had the ring which is going to be i believe this is my purple one and i know that because my powerapps 911 purple but so you can see that that is how it defined that outer ring because it's not really an outer ring all it is is like if we get rid of the white donut control x oh powerapps are killing me dupe control z i said undo ah so i gotta get rid of that and i'm gonna change the fill for this one let's change the fill to this one to be red see oh the red is on top right because the white is underneath so we're just stacking but because i made that second circle transparent that is why i got to type in the word transparent that is why it is just showing you through all the way to the background which is white so now if we change that top line to yellow all right so what i'm really trying to say here and i think i did a bad job of it is that this is actually just three circles stacked on top of each other that's how this is being built this is not a special image or a special type of graphic these are just three circles so so far we've talked about the white one underneath which is now yellow we'll change it back to white we have the second one which i made the fill transparent and just said its stroke width of seven is what makes that outside purple and so then the third one here same circle right same dimensions but you can see that the fill is transparent again the stroke is green the stroke width is seven and so then what we did was we used something called stroke dash array and so we're not going to cover that right now but if you went over here to stroking you would see that dash array is a property that lets you build lines that are like uh intermittent so dotted lines dash lines because a lot of times you're going to find that what you want to do is change the size of the dash and that's actually how you build the thing because that's what we're going to do here is we are going to say all right stroke dash array and so what is the stoke stroke dash array it is the percent complete and so what is percent complete well that's a powerapps control so if we highlight it right this should actually say percent complete dot text to make me really happy slacker so percent complete dot text so if we go click on this label percent complete so there's a formula here it's like hey value of items complete right so 12 minutes versus item total so 12 divided by 100 times 100 and so then it says hey if the toggle over here is set to animate then do the timers the toggle's value times the duration if not just do one because what you're going to see is that on this text input where we put in how long chewie spent if we look at the unchange oh that starts my timer so that's the reason that when we change this from 12 to 44 then this percent starts calculating based on the animate which causes the green stroke piece to get bigger if we turn off animate and we change this to 77 it just jumps straight to 77. okay so back to our svg so percent complete dot text that is the number of the percentage it is currently complete and of uh the percentage that chewy is complete to his goal i should say and so then the uh dash array is then a hundred minus that so what i'm trying to do is i want the array to be the whole thing um you know i want it to be a dash and then a blank spot right that's how that uh dash arrays work because they are dash length and then blank spot length and then dash length blank percent and so that's how i was able to calculate this automatically and so then when i was messing with the circle to get it to start up here in the top like we'd expect it to i had to do what was called a stroke dash offset so offset it by 25 spots so i know that sounds like super complicated but what i would encourage you to do is grab my code you know borrow um and then once you've got it you can kind of massage and play with this and my customers solution right it was gems actually uh what we did right was we were fetching the percent complete that they were on their different uh training tasks and so we were just calculating it based on data in sharepoint but that's how we were pulling it over cool all right so then if we go back over here to uh even cooler oh why didn't that trigger let's go back oh my goodness oh because the timer doesn't run when you're off right so even cooler so we go here so this one is calculating so how are these cute little visual bars happening in my fun little fireworks so if we click in the gallery what we're going to see is i have an image control right here and so very similar we've got that same kind of starting block as we're used to but so then here we're like all right i define the gradient and so this is where i'm like all right the three colors are red green and yellow and so i did the red to thirty percent right green goes full thirty percent and then at eighty percent that's where yellow is and so that's how we kind of got that nice um you know visual that kind of you know colors what would you expected and my thought and the reason doing it this way is i kind of thought of green with someone was in the happy middle which is what i want if you're over 80 in pay that starts to be yellow we should be asking like are we overpaying chewie who is currently napping about right there so anyway so that's how i did the gradients and so then it's just a simple rectangle it's with this 250 its height is 30. right notice it kind of corresponds my view box to make my life easier and so then the um paint order so the stroke gets painted first the fill is transparent so i made a rectangle that is transparent um its stroke width is 50 which i wanted to be giant and then its stroke url right so what is sorry the stroke color is this gradient up here got it and then stroke dash array and this is where i had to write a bunch of code but not really this is powerappsey stuff so i just said take the hourly wage and divide it by a hundred and then multiply it by 250. so that way i can figure out what percentage of 250 it would fill out and then i mode multiplied that by the timer's value versus time or duration that's what gives us that fun little animation effect and then i did the second comma and then the second stroke is a thousand because i wanted i didn't want to have like a repetition like if we change this to 10 let's just see what happens you gotta leave and come back to make it see it's like wacko right but so what's happening is it's filling the first section right this is how far this one should have filled and it's doing a 10 and then once the 10 is done it's then doing that same percentage again and a 10. so that looks really bad but what i was really trying to show you was that you know that was kind of the formula that goes into making this thing so we'll go back to that one so we'll change that back to a thousand so i made it a thousand because what i wanted to happen was that after um after we went in and got it right so it's it's rendering that first dash right the first piece and the thousand is saying go around the perimeter with a blank spot a thousand and the perimeter is less than a thousand so it's getting to the end so it's not showing us the second so the dash stroke is only going one spot hopefully that makes sense and if not remember you can go check out this right because this is where it shows you more of these dash arrays and so you know imagine we're using we'll get rid of two of them and we'll get rid of this one we'll get rid of this one we'll run that so this says give me a 10 and then do a zero or then give me 10 blank so we change this to 20 now if we say run we get long and then the tens and so that's what i did but i set the second one to a thousand so then that way because the whole length is only so long so it showed the 20 and then it did 10 000 of blank space which there isn't 10 000 blank space to show so it doesn't show the second one you know if we change this back to a one then we get little tiny little nuggets so that's what it is and you can also mess with these patterns so you can be like i want a 20 and a one and then a 10 and a three and so then now we get a kind of a different little dash piece but that's what we're doing over here to cause this this is actually a rectangle and we're just taking advantage of its stroke to create this look that we wanted all right i've been talking for way longer than i want but let's go talk about the examples for a minute so if we go to the examples so the other way that you can use these that is not immediately obvious um is if we add an image part so let's just grab another image let's go over here plus and do it so image media pull this over drop it right here and so we drop that right here the other thing that is possible is you can add a file so add an image file and so if i look on here we've got one called like powerapps 911 so i have an svg rendering of chuwi and so if we look at that file it is just all that crazy html but it's in a file already so if we open that up i'll just replace the ones already there and so then that comes in but what's nice about it look is now chuwi is a scalable vector he doesn't get ugly or pretty based on the size because we're using a scalable vector graphic so and sometimes you'll download those off the internet because you want to be able to get svgs but if you i could also i earlier today i grabbed all the code out of chewie's svg file and it's really just a base64 representation of chewy with some other pieces wrapped around it so okay so there's that um we'll get rid of that real quick um other things i just i you know for those of you that can download the app i just wanted you to have different examples i went and found some you know this is one so this is using animate right we're running out time to talk about this but you can do animation so that's uh animating the color here you can see that you know if you type it it shows so you know we did it and so then now it you know this is just that reminder that a text input's controlling this um sometimes people like things like you know lines the point like click here right if your people are having a hard time finding where to click things um cute little fireworks uh other things that i've given you know in here so these are the different svg rough graphics of the the powerapp stuff here's some drop shadowy things fun uh texted a slant so just lots of good little ideas here um i also have uh the good blog linked here so this is um jacob's blog i found him he did a really good job of getting into more details so like when i was trying to figure out um animations i kept finding myself in here reading like so here's his spinning circle you know here's his little uh this is set so this is like making it from small to big uh so there's the animation for this because really like to make that animation right there right that's all it takes because you're saying hey i define this thing and then i want to change the cx attribute from 30 to 470 over the course of five seconds and just do it on an infinite loop and that's all animation really was was understanding that cx was the x coordinate of this thing i just want to animate it and you can stack animation so you can uh have multiple things going on you can be changing the colors all of that stuff so um but yeah so i threw some of the ones i really enjoyed over here and everything that i built was just a combination of like all right i need to figure out how to first make uh gradients right and then i had to figure out how to make a bar and then i had to figure out how to do an animation and i had to figure out how to do visible or not visible you know i just kept walking through like learning little things and then i would just shove them all together i still don't feel like i understand any of this svg stuff i mean that's probably not fair anymore but it's it's hard you know but it's just a matter of i just got in there and tinkered and i was able to produce all this so just another reminder if you want to download this you want to get all these um all these fun little things you you know you probably don't really care about these things but you probably want is my beautiful beautiful this thing so remember you can download all these training.powerapps911.com the curated library um you know i guess i'd also just ask do you have any questions if you have questions like hey my code is not working please don't put those in the comments i will not be able to answer them i'm happy to try but i'm not going to know the answers um you know powerapps 901 we do have some services we've got some real devs that can help if you decide you do want like some real help building some of these types of solutions you know because for us a lot of times it's this idea that we can build visuals that are really awesome but they aren't power bi right we're getting power bi look and feel without doing it so all right that's enough of that with all that i'm gonna say thanks and have a great day before you go be sure to click on the subscribe button over here so that way you'll be notified when new videos come out if you need any help or you want to work together whether your problem is big or small check us out at powerapps911 we do it all i rhymed or if you're looking for more formal training offerings we have those linked up here somewhere so check them out thanks and have a great day

Channel: Shane Young

Views: 15,487

Rating: 4.9363055 out of 5

Keywords: Shane Young, powerapps911, PowerApps, Power Apps, powerapps svg icon, powerapps svg, power apps svg, pretty powerapps, powerapps animate icon, powerapps animated gif, power apps animate, powerapps tutorial, powerapps visual power bi, powerapps progress bar, powerapps progress indicator, powerapps dynamic, powerapps html image, powerapps javascript, powerapps tutorial shane young

Id: ms2dbLAjEiM

Length: 34min 29sec (2069 seconds)

Published: Mon Oct 12 2020