Quick Start with SVG Images for Power Apps

[Music] we're going to talk about how to get a quick start with svgs we'll start by talking about what are svgs anyway um if you've never heard of them then that won't mean much to you what it stands for is scalable vector graphics so basically we're talking about a way to put some some good looks on your apps and and even your power bi reports and i'm gonna kind of explain what this is in a like a christopher nolan sort of storytelling way so if you've seen memento or um what's the new intent that he has out that there's some jumping around so we're gonna do that with this name but we'll start at the end we'll go to the beginning and we'll meet up in the middle here so graphics we should all know what graphics are right it's just a visual representation of something it could be an icon it could be a chart or something like that so that's that's the easy part scalable this this is one feature of svgs that is really cool is that they are nearly infinitely scalable and i say nearly because i i don't think there's a limit on how big you can make them but there is a limit on how small and that that gets down to pixels basically um so there there is a minimum size that kind of works but aside from that you can make them as big as you want without any change to the actual graphic itself so like a picture or something like that like a jpeg if you want a high pixel count it's going to be a very large file with these they're very small so that's pretty cool thing and then vector now if any of you recognize this this amazing chap right here but this is vector from he's the villain from despicable me and he had a tagline that's really great and it's that uh he's his name vector because he's got um what is it direction and magnitude and that's essentially what a vector is right i don't know if we've all had um like vector stuff in math or anything like that but this is kind of the meat and potatoes of what svgs are and how they work it's that they they work using vectors and so basically you've got a 2d plane and you are basically giving instructions for how to draw a path within that plane and and that's pretty much it and we'll look into that and see on the on the code level kind of what that means and and hopefully i can communicate how great that is and and how awesome it is but uh that's the name and so another important factor is that they're essentially text files so it's it's essentially instructions for how to build a graphic and um that's that's super awesome and again i'm gonna gonna try to show you why but one reason why that's awesome is that you can do string operations on them and um it's it's a really good thing so if you're talking about like um something like substituting text if you're talking about like injecting text or something like that you can do that with these and that means that you've got a graphic that is no longer just a static image but it can be very dynamic and so i'm actually kind of getting ahead of myself here with some of my points but here's the why should i care thing and hopefully i can i can sell this well but thinking mainly about powerapps there's a very limited icon set so there's not too much that you can do natively in a graphical sense so this is a an easy tool to expand that dramatically in a in a pretty easy way next again i kind of touched on this but you can create dynamic icons and graphics fairly easily and let me just stop myself too if if there are any questions or anything like that i don't have the chat up on my screen so feel free to to speak up and interrupt if you'd like or anything like that but yeah just as we go along feel free to cut in if you've got a question or comment or anything i will monitor the chat also so um i can find a good spot to ask you questions for that as well so either in the chat or come off mute um we're casual here yeah good thank you yeah thank you yeah so um another thing i kind of touched on again is small file sizes you can you can basically have a really like what what is essentially a paragraph of text that creates an image for you um so it's it's really easy to store and and from an app perspective that means that you can have a pretty rich visual experience without having a super heavy app that takes a long time to load that just has a whole bunch of stuff in there it's not very heavy pretty lightweight and last is just having a more visually appealing app which also makes it a more accessible app i've been really thinking a lot about this because we kind of had a situation that i was made aware of at work i i work for an oil service company that basically services oil and gas wells and so a lot of our employees you know it's it's a labor type job a lot of blue-collar workers and we we actually happen to have two employees right now who actually don't um have the ability to read and from the work perspective that they do that's that's actually fine um and and that's you know there's there's maybe some stigma around that and i just i just want to maybe say that they're they're both super intelligent guys they're great workers it's just that um this is a skill that that they did not develop uh for whatever reason um be it schooling or whatnot so having something that's visually accessible to them basically gives them the ability to to just do the same things with all the apps that their company has and and to not really miss a beat in that in that experience so it's it's a really powerful thing and and there's other examples too that i mean if if you've got um like maybe people who have english as a second language um or maybe something like dyslexia this this could make a big difference for them so it's a it's a pretty important thing um and worth learning and worth the effort that it takes in my mind so all right we're going to have basically three quick start methods that we'll go over there's the beg borrow but don't steal method i was trying to come up with a cheeky name but theft is a real thing so there's no need to steal we can find good things and i will be showing you two resources that are really awesome for some great svgs that are free and legal so next is the diy which stands for do it yourself and uh i'll basically show you a really quick easy way to make an svg that does not require learning any software um that you probably don't already know or have and then the last method is the hacker method and with that one we're going to basically be hacking svgs to do some dynamic things that we want to do so we'll get started in the first method here so with this method um basically there's three steps we're going to find an svg that we like ethically sourced of course and then i'm using notepad we're going to get that code and then we're basically going to stick it in our app after that we're gonna just do one little change with notepad um and and from there on out it's gonna be in our app so i'm gonna tab out here and get to my web browser if i could find it with all these windows i've got there we are oh and that's jumping ahead right there so is that oh man i'm not doing so great here i'm showing off my stuff here so i've got a little basic app that's that we're going to use to show this stuff off um one step at a time and so the site that i want to show you first is the site called loading.io and what what i've used this for is for these very awesome little loading spinners and they have a bunch that are free which is awesome so there's there's a quite a few different styles so you probably find something that you like they do have some for sale as well which i'm not here to to push a product for them but their their free things are really cool so what we're going to do today is we're going to take one of these and there's this little download button here and again this is done with a free license uh one one thing is you do have to set up an account with this website but after that it's it's all good so you can choose from static or animated we are going to choose the animated version because we want that nice spinning effect and then here it gives us download screen um most of these there's no need for attribution but some of them you do have to keep um just their little attribution in the code and that's the only condition for for having them but we'll download this and i'm going to open this and show you something that's that's a a thing to watch out for real quick just to have this in your mind but um oh of course it opened it in the same browser i i want to open it in let me actually let's get out of here i want to open it in internet explorer because you'll notice that there's no spinning that there's no changing of colors or anything like that something to be aware of is that not every browser is perfectly compatible with every aspect of an svg it can display the graphic but things like animation and even some weird things like color opacity um aren't fully compatible the one that's the most incompatible that i've found is internet explorer which hopefully will make that kind of a non-issue um as that goes away but just something to be aware of and this this does come up if you have users that use the windows 10 version of powerapps just so you know so just that little pitfall out of the way have you found that like modern maybe chrome firefox edge i might be missing some are those working pretty well yes yeah they are they they all seem to work great i've not tried firefox um but i i'm pretty sure that it is fully compatible but quick looking at step two here we're going to get to the code of this and and again i show that if we double click on that it will simply open it but we're going to do a little trick here if we right click and say open with and we're going to choose notepad but the first time you do this i'm sure that notepad will not be listed so i'm going to show you how to get there we're going to select choose another app and it brings up this list and it probably will not have notepad here either so you'll probably have to say more apps and it gives you a list and you simply just choose notepad once you do this the first time it should show up as an option after that um which is kind of nice so and also we don't want to check this because every time you try to look at an svg that you have it will just open up the code in notepad and that's that's no fun so we'll leave that unchecked and this is the beast here so it looks like a lot and it kind of is but we're going to break this down really quick and i'm going to put some space here just to help and i'm going to put some space here as well so if if you've used html this might look kind of similar especially with these angle brackets and whatnot so it does have a similar convention to that where there's like open tags and closing tags and things like that if that helps this first little chunk here is kind of a header and it not only tells that hey this is an svg and some other stuff like that but the the one really important thing and you'll see this width and this height is that it sets the size of the space that we're going to work in so that's that 2d space that we are going to be basically drawing vectors in and the other thing is that there's this view box and and this is kind of an odd concept but it's kind of like um being able to zoom in or zoom out on that canvas that that we've created so say if you if you wanted to look at the top left quarter of that this view box you could set it up to do that um we're not going to jump really into too much of this this is hopefully kind of as deep as we go with with some of the things here um because this isn't about learning to code it but um just just so you kind of get an awareness of these things um that's that's kind of all we're trying to do is the high level view so these next chunks um this is actually where the shapes are made and a couple things to point out this this g it stands for group and it's it's kind of how you would um unite multiple objects and be able to kind of assign properties to them as a group if that makes sense in this case though there's there's actually only one object per group and the reason for that is this little guy here they're basically using it to to rotate and we'll we'll see how this this works um a real level but we're just going to look at this code for one more second here next thing is this is actually making a rectangle and not only can you draw vectors themselves but you they do have some primitive shapes in there so like rectangles um circles and animals things like that so those do exist and this is basically just the stuff for that they're basically just attributes that you fill in if you're going to do this by hand or whatnot and then last thing we'll kind of look at is this animate attribute and this is what gives it the spinning effect it's basically just telling it to change the opacity um every second basically and the way that it achieves the effect of motion that you're seeing is the timing of when the animation effect starts so what what kind of looks like spinning is really just that particular object fading in and out and starting at a different time and so what what that thing is done is basically just put all these times in and if you look at all these other chunks it's actually all the exact same thing except for two attributes there's this rotate and when it begins and we'll we'll kind of see how that affects things so with with that out of the way that's hopefully the the deepest dive into the the code chunky stuff that we get for right now what we're going to do is we're going to make this thing able to be put into a power app and the way we're going to do that is simply by going to replace and we're going to replace all the double quotes with single quotes and we're going to do that and the reason that we're doing that is because the way that powerapps denotes text is by using double quotes so if if we have a bunch of double quotes in there it's basically going to be stopping and starting the text and and that'll just mess things up so we've copied our code and we are going to go close that guy out and go into here and i've set this up a little differently than you would um just to just kind of prove a point here but we'll we'll unite on this image object but i'm going to put it in this text box for now and i've got a little little snippet code commented out here we're going to simply paste what we've got in there and i'm going to remove these comments and we're going to comment out this sample image and lo and behold we have our little spinner there so the way that this works and the reason that i have this text box here is so that you can kind of visually see what powerapps needs to see to make this happen it can't take just the raw code for that it needs it in a url format and it also needs this little chunk to say hey this thing is an svg and here's the the url code for it um so this is kind of the the magic that makes it happen right here um it's simple simple line of code there and the other reason i wanted to do this is to also just kind of reinforce the fact that this is just a text file so we're taking the text from this text box and sticking it in the image control and it gives us a graphic it's really cool i i don't know i i nerd out about this but i i think it's a really crucial part of this that um that it's it makes it easier to use and really simple um to store on the data side so that's a little cool we had a little question could you zoom in on the little magic i imagine it's that little piece you put before that encode url yeah i think that's what he meant fernando if i got it wrong please uh correct me yes and let me uh let me do this because i don't have a zoom thing so let me insert a label and we'll put this and make this all text here well actually for everyone watching if you hold uh if you click on the shared screen control mouse wheel you can zoom in yourself on specific areas of of timothy screen oh yeah okay let me make this much bigger here i'm at so let's go 35 maybe is that that pretty big that looks good what what what's missing in between here is simply that ampersand um and then the the quotes around the the data and up to the comma um and and i will actually be showing you like i'll be giving a resource that that kind of has this built in and frankly i don't remember this i always take it from this other thing that i'm going to show you uh because it's i i don't know i just don't remember it's a small chunk of thing but it's uh it's something i just don't stick in my brain um and and with that that's a good actually place let me get back in here and we're going to jump to the part b of this which is you you could do that and track down these svgs and do this work to put them in or you can use this app that i'm about to show you that is awesome and not only does that little chunk of code before but has a ton of icons that fit perfectly with the icons that are already built in to powerapps and so we're gonna go back here i'm gonna show you this we're gonna go to the microsoft powerapps community and we're gonna scroll down here to the canvas apps component samples and is no surprise but it's the first featured one here and this is made by a user called redcap his his real name is emmanuel gallis and uh he is a french power platform guy who made this this amazing tool it's it's great so i'm gonna click over into this app that i have um so here's here's kind of what it is it's basically all the icons from the office ui fabric icon set and i'll click on that to show what this is this is basically a resource for for app makers and more traditional app makers to get official office icons in their apps and he basically made a powerapp component that you can get that from and so i'm going to just click on let's say this no webcam guy here here's what's really cool that he did it's got all the svg code right here along with that little snippet at the front so as long as you just pick a color for the icon that you want you can then copy and paste this code straight into an image control go back to this guy and there it is right there just super simple easy peasy um so i mean you could you could almost leave the doc after this because this app is so good and and there are so many icons um that you can probably find what you're looking for but please stay because it doesn't cover everything and uh we've got a couple more things to go but but this this is awesome and i i cannot recommend it enough um i use this thing all the time it's it's super cool so go download it and and also maybe give him a follow on twitter as well he's totally awesome so go check him out so let's go to back here let's go to the next step which is the diy section so this is going to be for the cases where okay we've we've looked around and there's nothing in that office ui set there's nothing online and i need an icon or an image for something what am i going to do well it's powerpoint to the rescue here and i again i geek out about this way more than i should but uh it's super easy to create your own graphics of any kind um and i'm going to show a really quick and easy way to get started with this so we're just going to open up a blank powerpoint presentation here and clear some stuff out we're going to delete these guys and just give ourselves a blank canvas now usually icons are probably a square it depends on what you're doing but we're going to make this thing a square there's there's these easy guys here but you can also do a custom size and you can do it in any size that you want almost up to 56 inches which is pretty huge with svg's again it doesn't really matter because they are scalable so we're just going to make it an even square this part does not matter unless you have things that are inside of here so we're just going to say ensure fit but we don't have anything to fit so we've got a little canvas and the next thing that i'm going to do is show you right here in this format background we can set the transparency of the background so if you want an image that is fully transparent you want to crank this up to 100 if you want an icon that has a solid background or something like that you can leave that here and we can we can change the color and all that but we're gonna go for a fully transparent one now something that um powerpoint has that's really cool is its own icon set and some of these icons um range from things that are on the goofy side to something that's that actually is pretty cool that you might use um so it's a it's a pretty easy way if you need kind of a one-off icon or something that um you just can't find anywhere you might check here and you might find it so yeah i mean if there's if you've got a nursery um at your business and you need an icon for something like that there's baguettes you know shuttlecocks it's it's awesome there's tons of stuff so we'll just pick something here um let's do this meeting guy and we'll insert that so if if you have found the object that you want and say this is what we want for the icon um all this so i'm going to inches and powerpoint has some cool stuff where it has those snaps um so you can align it really easily so once we center that um this looks fine the reason that i do seven inches and have a seven and a half inch canvas there is that it's nice to have a bit of a safe zone um with your graphics um so that's that's basically just the way i'd kind of plan those in but we could scale this up and still be within that but we'll just leave it like this for now to kind of make it simple and then the thing that we will do after we've kind of created this and again we could insert more um icons if we want or they also have shapes lots of different things we could use once we've made that the way that we want it all we do is go file and there's two ways to do this but i'll show you the most direct way and we click save as and then a place to save it and i'm just going to go to the desktop here and instead of saving it as a powerpoint presentation which you you would want to do actually anyway but there is an option to save it as a scalable vector graphic format and i did show this the last time i was here but it's it's super cool i i really hope that someone will try this out and just see what you can create um so i'm gonna i'm gonna cancel this well no actually i'll save this just to show this you can also save just the one item like that one that we made or if you save all slides it basically makes a folder for each to hold all the different slides that are in there so you can use this as kind of a like a workbook to just create all your icons in and then easily export them all to svg just with one one click of the button here i'm gonna say just the one on this um and we will go actually oh that's what i need that's not what i need that's right um so it's named presentation two and if we open this up there's our graphic it's all well and good and if we open this with notepad um you can enjoy what you see but this these things make pretty messy code um yeah i was gonna have that question if it's like standard svg code or if powerpoint spits out some powerpoint code yeah it's what it looks like it's definitely powerpoint code and the the good news is though it works as is so if it's fine and we don't need to do anything with it then this is good it's it's a bit chunkier but uh but not too bad and i won't cover how to clip this down but it's it's actually pretty straightforward to do it um it does require just a tiny bit of knowledge about um some of these things but the real meat and potatoes of it is all in here um it's these paths and and this actually is a good showcase of that vector thing so these are the instructions to build the vectors that make up that graphic and the the language of it is not too important but i will share one thing really quick um that if you are interested in learning more about that and getting into that this is the site you want to go to and the way you can find it pretty easily and i'll just show this is mdn which is the mozilla developer network and then svg which came up because i've done this a bit it should be the first thing right there and this has all the documentation you could ever want to learn about anything svg and you know it's it's it's a bit to learn and jump into uh but if you if you get the bug this is the place to find it um otherwise i've seen w3 has a lot of stuff also would you recommend that yeah i they're they're okay too um they yeah they're actually all right i i like personally i i like the way that the the mozilla site has things structured um it's it's a lot easier for me to find like references to things there um but yeah let me show that w3 and that should just be like w3 svg yeah i've noticed it's like at the beginning of every svg it's like w3.org so are they the creators of svg like i don't know it seems like that's where it all gets stored i don't know what the link was with that yeah i actually don't know what that is either but that is like in in all of them yeah that's interesting but yeah this so this this is also good um and they do have some kind of cool examples but for for me like if you want to find a particular attribute or something it's a little harder to find in in my experience on this site but this is a great one as well so again yeah check it out they all have really good examples that you can just drag and drop into an app um using that little this little chunk of code here and making sure that you've got single quotes instead of double quotes um so you can you can get that going right away i'm going to step over here really quick and again we've got this this nasty bit of code we're gonna just do our little replace replace all and this is essentially ready aside from needing that a little chunk of code which i put in here for the demo just to have that and this will be unsurprising result that this will just give us exactly what it should and we've got an icon right there now once you have this you probably would want to store it somewhere depending on what you're using and the nice thing about it being text is that you can store it virtually anywhere if you if you want to have a sharepoint list of these you could do that i myself i i store them in sql that's what we use and so like on you know a reference table it's a list of different things and i need an icon for those things i just have a text field that i can drop these into and you would want to do just the svg code that you paste in here you probably wouldn't want to do the whole bit and the reason for that is basically usability um you can always put this little chunk of code right here and then just reference this item or whatever but if you if you want to use it for something else and get to that graphic um you're going to have to get rid of this code because that's not going to work universally whereas if you just store the svg graphic itself um it's it's more usable that way i haven't actually used it for anything but uh but powerapps but because that's what that's what we do but um yeah and and another cool thing too this this i think is really an awesome idea is that you could make an excel table of all the icons that you want and then import that into your app and you could actually make one that you could import into any app if you want to basically build an icon set into powerapps that'd be a great way to do it so just have an excel file put these all in a table you could have a column for names even you know if you want an id number with them or something like that you know knock yourself out but then you just basically add that to your power app and you've got an easy to reference graphics set um so that's i don't know that's pretty cool you guys doing all right am i am i flying too fast are we covering too much ground we are good i love learning about svg uh jake shared something really cool with us that you could do format uh svg with visual studio code that's what it is yeah so it makes it really easier to read looks like that's about you know list some of my first picture with svg but instead of a bunch of numbers uh able to see the colors i could decipher a little bit more happening there yes that that's that's totally a great great comment and i actually i do that occasionally uh myself with this one my my objective was just to give like the the easiest and because not everybody's so stoked to get into code it might be a little intimidating but that is that's an awesome suggestion and it's not that intimidating once you do it so go download that and try it out we do have a question yeah what's the difference between using this method rather than uploading the image into the media folder that is a great question so there's well you know i've actually i've not tried to upload media i've done that for for static things like like gifs and and um pngs what my thought is though is that you might not have as much access to the raw code um i'm not sure how that would work and that's that's going to touch on the the third step um but you know we could actually try that and see what happens um so i want my media now let's upload let's try this out okay um one one thing that that would kind of touch on maybe i don't know just just thinking about it i don't that's that's going to hit up on your like the size of the um the size of your app to some degree because that's that's basically going to be right there tied into the initial download of the app um whereas like if you have it from a code source like the the excel method i talked about is going to do the same thing so that's going to be built in um but pulling it in from a data source i think that that won't make the app size as big but these are really small so that may not matter but i'm going to try one thing here and let's see if we can get to the text part of it so image 8. just there yeah okay oh oh what am i doing okay rookie mistake here guys okay yeah all right so this this is kind of what i thought so the way that powerapps handles images that are in there is that it basically has a location for them so you see this apres and then resources presentation 2. so this this would be maybe not a deal breaker depending on your scenario but basically you can't do anything dynamically with this image now because this is all that you can get to is its address with powerapps as opposed to getting access to the text that's the code so that's that was a great question that's something i'm not really uh considered so thank you very much for that and does that answer that adequately i think it's good i'll let you know for follow-up yep yep thank you okay awesome awesome yeah and and we're really gonna get into the difference here on this next thing so we'll just progress our slideshow and then the last one that we're gonna dive into i called the hacker method and it's basically where we're going to take something and we're just going to mess with it and change it into something else and the the options for this are just nearly unlimited there's so much that you can do and i'm i'm really i've i've not touched the surface i feel like as far as what can be done so i'm going to just show you what simple things i've kind of gotten into and you know hopefully you guys can can take that and run with it and see what you get but let's dive back into our lap here i've i had a a little scenario that i thought was was great to illustrate this where before i even knew what svgs were i was building my the first power app for the company i worked for and it was a maintenance tracking app and this app needed to be fully offline because it well because basically our guys work out in the middle of nowhere and they they don't always have a good connection so what i thought was a good idea was to have a thing that alerted them to whether there was new data to download or not and doing that without just fully pulling in all the data so i i created a way to do that but then i needed a way to alert them and i came with a similar method to this but it was not nearly as good i had to basically superimpose icons on each other and create these rules to do that but if i had this this would be a great thing so what if we could simply have one graphic that we could put a little thing in to alert them that there was more data and make it dynamic so that when there was new data that thing showed up and when there was not any data then it would just look normal so here's what we're going to build and we're going to do that we use we're using icon this set and there is a um there is a refresh i think oops the refresh icon um so we have that but what we need is this little data barrel thing here um and on this first page there just so happens to be this guy right here that has that little data barrel so how could we take this and put it in um well let's let's find out so essentially what we need to do just using like a visual math thing is we we want to take this and we want to subtract that so here's what we're going to do we are going to put an image in here media and this is going back to the fact that these are text files so this is the data for that icon we're going to put it in here and each of these is a vector it's it's a shape so what if we simply just remove one of these and see what we have so we're going to delete this oh maybe i hit delete i'll get it together here and let's see what we're left with here so so what that did was that removed this corner section here so that's good we're cutting things out um let's take a little bit further and this one's pretty easy example um but this is something that you could do with any of these that if you want to see what's going on just kind of use the process of elimination and with that let me move this out the way of that parentheses we've actually got our shape so so the definition for that shape is just this chunk right here so what we can do then is we can take this and we can put it into this so what i'm going to do is i'm going to grab this guy and put it back in our shape and let me say this first though actually the reason that we can do this is because of a very special condition and that is that all of these have the same size the canvas that we're working in is the same for all of them and that's because they were all from this source if you try to do this with things that are kind of hodgepodged you might find that you get a very different result that maybe the image you put in will will not line up the way that you want it to um so just to put that out there that's this is kind of a special case um with this but here's what we're gonna do we're gonna take this guy and we are and that was just the path itself so i'll show you what i'm cutting so basically everything that's from this path and that's with inside this group thing we just want the path part so we put that in and let's see what we get so we've got it in there but it we don't want that we don't want it to be see-through so we need to figure out a way to kind of put a background on there and it'd probably be nice if we could get a margin on there so i'm going to show you a couple quick little things and are we doing okay on time here guys is this yeah okay so with that um process of elimination we can actually find like what defines this whole outer shape because some of those other paths are actually removing sections in here and so we're just going to kind of do that again and just to kind of maybe belabor this point but we'll take this out and we'll take a look and so that was basically defining that top part and we're going to take out this next part and what we should be left with is just that barrel so what we could do with this then is we've we've got a shape that could make up a background that we can color the way that we want to because it's got the color right here so we've got a white background let's just change this to white and this is just the hex code for white and now we'll see that we've basically got a hole there so why don't we just take another one of these and drop that over the top here see what that gets us and and i should note as well that it draws these in the order that they appear so this path is drawn first and that is that um that refresh shape this path is second which is that kind of white background and so this will be third and it will be the most on top so what we get now is pretty close we've got that shape we've got a background here well it'd be nice again to have a little separation so i'm gonna just put in a little thing that again you you might just have to know um this would come through either that mdn site or the svg tutorial um there is an attribute called stroke which defines a color for a border and we're going to make that white as well oops and we'll take a look at this and see what happens here so it's very subtle and let me kind of zoom in on this but you could probably barely just see that there is some separation there right it's very very subtle but it exists right yeah so what we want to do is expand that a bit and thankfully there is something called stroke width stroke hyphen width that defines how wide that stroke is um so i'm just going to put an arbitrary number in there i'm just going to go with 50 and see what that does and there's there's kind of a point to be made here you can see that's it's very subtle again it's not very big well our canvas size matters when we're choosing the width of things because it's basically 50 pixels within a canvas that's 2048 by 2048 so if we want something more bold we kind of have to think about those ratios a bit so let's maybe just try with a like a 10 and since we're at like 20 48 let's say 205 and this is something that could be you know mess with if you're trying this on your own or something but um again this this is arbitrary to the canvas size and so that's that's looking all right i think so we've got two images put on one another but how do we then make it dynamic well this is just a text object and so i'm gonna i'm gonna cheat a bit and i'm just gonna go into here and show this so i want to just do all the code but all i've basically done is so we ended this text item here and we put an and to kind of concatenate these things together like we would another string and we put an if statement here that says if checkbox.value which is basically shorthand for equals true so we'll just line that out just to make that more apparent but if that checkbox is true then put this text in there which is the background and that shape and then we we end that if statement we put another ampersand to concatenate this text and then we have to make sure that all of our text is wrapped in double quotes and that is all it takes to basically make this dynamic now this is a check box but you could put any type of condition in here and in fact you could have multiple conditions you could have multiple shapes that show up because you could maybe put a switch in here and check for multiple conditions and have multiple different shapes but for this it's we basically just have this boolean statement that says well if this thing's true then show that if not then don't um so again this this is a bit of the power of those and i'll show one other thing that's great on the customization side um so notice that all these colors are distinctly defined like we put a whole thing in there well something we could do is we could either leave those the way they are put something else in or we could substitute text and make it a dynamic color scheme so let me let me show what i'm talking about here oops substitute and i like to tab these over a bit to keep that in there so the color that we want to change let's say that we want to change the black and we want to make that something else well over here i've got this little button and when i push this button all it does is defines some colors and there's this icon color and a background color so what we want to do is we want to take this and we want to substitute and actually i'm going to need to say first here because and then we need to close off our substitute bracket so essentially what we've just told it to do is to look at all this text right here and wherever you find this string put whatever is here there and if we click on this an internal error well let's see what works so what i'll do is oh because there's nothing in that it's it's an empty collection right now um so that's why there's an error and and also to note i don't know if i mentioned this before but svg's default to black if the color is undefined or if there's an error with that color i'm just so you know so we can we can have an error in here and this will still show up black but if we click this button we then turn this thing to green because again it's just text and all it's doing is substituting our other color code for this black so with this you could again make conditions to um to change colors to to basically do a lot of stuff like that um or if you have a color palette that is changeable like if there's a customizable color palette in your app you can actually set it up so that the icons can change color with that palette and still look great and fit so um that's a yeah that's a good thing that's that's something you really can't do um any other way so oh no get ahead getting ahead we got one question for you yeah um do svgs uh do svgs use a lot of space um and space maybe size memory size fernando i think that's what you're talking about yeah they they don't really again because it's text if you think about what it takes to to store a string of text um that's that's one of the smaller things you can store as opposed to an actual image that that is basically you're looking at a small paragraph because this again this is all the code right there yeah so it's it's really not much space if you had an image and if we if we um put that into a thing where we were seeing like all the the symbols that it has in that image like a base64 thing or something it's going to be pages of information so they're they're very lightweight um very low storage um so that's a great question related to the performance of the app does it you ever seen it slow in in rendering the image or trying to think performance wise do you see any um no not not really not that i can think of um yeah i mean it's it's near instant i'm i'm pretty sure and i'll i will the next thing i'm going to be doing is showing like example apps and these are these are actually full production apps so these are yeah they're getting used um and and kind of showcase and and they get fairly graphic heavy um and that the svgs are never the the issue cool so good um know that yeah yeah so we'll jump into this unlike my dax that takes a while to render awesome power bi sometimes yeah yeah and that's i i don't know too much of the the use in power bi as far as like straight up svg code i'm going to cover one thing that's a pretty cool tool but it's not a direct i'm putting it in but yeah so i don't know spark lines inside like a matrix i've seen that used um or like you know you have a table and you want to show a spark line inside that or a bullet chart um instead of making its own visual you know right in line next to um columns of data i've done that once really fun learning it so that's i think that's one of the most popular use cases i could think of small multiples things like that yeah that's which is a great that's a great use case that's that's good it's good yeah so this it's the same app that i showed last time again we're recycling here but i want to showcase there there are graphics kind of all over there's not so much on this one i'm not going to scroll down any more than this on this page um just because we've got some employee names down there that i'd like to not dox them but um like yeah these little guys keep popping up here um this is basically an activity feed that just shows the past um i don't know i think it's like eight weeks of activity and in the in the proper app that doesn't kind of have this this data masking that i kind of made up it had their picture and their first name here and these are clickable links and you can go there but it just kind of shows the activity um one kind of fun thing that that i just kind of implemented was this guy here and we've got uh basically in sequel we've got a table that has all the different types of scheduled time and they all have a graphic with them so doing something like this is as easy as kind of making like a gallery and then you reference that line of data but then you just reference the icon in the svg format that we showed with that little stuff and and you've got a thing that's just a nice little graphical representation you know vacation we've got a little palm tree here just just adds a nice little touch that that text doesn't it makes it easy to scan kind of reduces that that cognitive work that you have to do because rather than you know processing the words you just you can say okay well home in a briefcase tim's working from home so um some other areas here um okay this this one's kind of fun um so we've got this task routine here where employees can be assigned tasks and it might be something like you need to do this paperwork or you need to like do this training by such and such date and i've made a little blinker here this is an svg that basically just uses that animate uh very similar to that that loading dot io example um basically just had a thing that animates the opacity and just sits here and blinks and this because this uh this thing right here is a component that thing shows up everywhere so you got just a nice reminder that there's a new task right there and what what doesn't happen with this example one is that when you go to the tasks there's a condition there that just checks the date time that it is right now versus the date time of the newest task and if the date time that you checked it is is later then when that task was created then basis says okay don't blink that anymore um so that's that's kind of a fun way to to incorporate that it's kind of a like a compliance by annoyance thing maybe because it just blinks and blinks and blinks um until you get it but uh but that's that's kind of a fun one there and again it's animating things if we go back to let's see i think i have that still up right here it really is it's as simple as basically saying like i want to animate the opacity of this thing and then you just basically set a time for it and i don't i don't have this begin stuff i don't have the um i don't have the key times either but you can just set the value and the duration and the repeat count and you've got something that's animated right away and you can do that with with nearly any attribute which is the the fun thing and and stuff that i haven't really explored that um you know lends to some really cool things because you could have something shooting across this or you know like bubbling up and hanging out there or something like that there's there's all sorts of things um if you've got the creativity and and you just put a little bit into it you could probably figure out a way to make any kind of icon that you want there um so that's kind of fun i also have one that is for uh that's my overdue task one which is the yeah that basically just looks for overdue tasks and if there is one it just blinks until they complete that task and i'm sure they love that one but some other examples we've got a sharepoint document library here that's plugged in this app and we're going to look at this sds documents that stands for safety data sheets and basically what uh what those are just like um the chemical makeup of all the different things that are used because if there's a spill or if someone gets it on them we need to have a resource to know what it is and basically just have a thing that that looks at the file type and then uses the appropriate icon and all these are just svg icons um and i'll have another thing to show that that's a that's a bit better probably to to display it but then those icons line up with this mobile app download section of this app um so if they if there's a file that's adobe acrobat you know a pdf document they can line up that icon with this icon and then choose their operating system and know which which app they need to download to get that file if they don't have it on their phone um so just yeah kind of a simple way to to use those visuals and time together to help communicate something a little easier um yeah any questions comments anything else coming up i love that it looks like you'd get that app out of ios right from like apple store android store it's this is it like for a small company in wyoming i would never expect like this is the tool we get to use so um i hope they recognize that in your company because i just absolutely love that yeah thank you thank you i'm gonna show um just one more thing that that ties into power bi but there's there's this app right here that is our employee management app and and this thing is more software than an app this is basically where like all of our employee information goes through we handle like our benefits um just just everything through this thing um and i want to show well okay so well since this is up this is what it looks like um when you break your collarbone playing tag at a wedding so that's that thing but let me go over here to our safety incidents section and i've i've pre-filtered this um just so we're we're kind of showing stuff that doesn't actually have um that much information uh with purpose because again we're not gonna dox anything here but we've got this little graphic that can show where injuries have occurred on this body and this thing is is really fun to me because it's it's pretty crazy this is actually a power bi graphic but it's not from power bi if that makes sense and i'll kind of show you what i mean so this is a heavily redacted report that we have and and this is actually on display um in our office usually but i just because it's being recorded and everything i just found it fitting to to kind of redact stuff but if you come into our office um we've got a a hub two on the wall that you can basically see this and interact with it but this is where that graphic came from and these are some svgs that i actually made in powerpoint with the purpose of this report being um our incident information report so any anytime that someone gets hurt any time there is like um a stop work situation where they they caught something and they stop work and you know we we report all these things and this allows us to visualize where on the equipment they're happening if there was an injury um which these ones this this is filtered down by first aid events that have happened within a range of time but this shows where on their body and then we can filter this so say where the shoulder injury is happening well they're helping the tubing board and on the floor of the rig and with that information we can then adjust our training and whatnot because the the fact of the matter is and and this kind of shows this because we track this but historically a lot of injuries happen with people who are really new on the job and that's just something that shouldn't be you know that's something we don't want um so this is something we've really targeted well to get that graphic into power bi i'm going to show you one other thing this will be the last kind of commercial for somebody else's thing but ok viz makes these visuals and this one in particular is called synoptic panel and it has a designer aspect to it the panel is the thing that actually you put into power bi and shows the graphic that you want but the synoptic designer is the thing where you can actually make a graphic that um ties into your data so this one is this human body one and essentially what's what's happened here is and what you do with this tool is you start with an image and then you basically just draw in these sections and you label them um to tie them into your data so what's what's really cool about that then is that we've basically got a table that we track these things in and we can visualize that right away well i thought man that'd be a pretty cool visual to have so i took the visual that um that came from there and just kind of plopped it into um powerapps and i discovered something that's that's pretty crazy about svgs that i did not know what this is is a png image that is embedded into an svg and then each of these sections is an svg object that is basically responding to the data or to the conditions and that's all that is so essentially with with svgs you can actually embed other graphics into them which is wild and i i took this code oh no i didn't that's on my desktop grab that real quick just to show this thing right here it is now this this is ugly it's terrible um don't worry about it though because we're not making anything like this but and and this actually does showcase how graphics are much heavier than the svgs because all this right here is that png ugly ugly all that just yeah ugly terrible we don't want anything to do with that right but once we get down here and you can see the scroll bar that's just moving and moving moving we'll get down to the svg side which is super tiny um it's a fraction of that code and and here's all this is is basically it's in a gallery that's that's got data and so it's just saying hey if that has this body location then we're going to put this chunk of text in which happens to be the head um and so what what it's doing here which which i think is just pretty awesome is again we've embedded a graphic within a graphic and then we're using data to surface other parts of that image to tell us where these injuries happen um and that polygon title is that like the tool tip that kind of comes up right there i've noticed that when you have a round it says like injury wrist on your power app right there yes yeah yep yep that's the tool tip on there yeah and is that embedded in the code as like the polygon title or something i think i saw that in your notepad it it is but that's not i i don't think that's no actually that is where i'm getting it from because i i use those titles so let me get back to this thing and this is part of what that synoptic designer does is that you can give an actual name to things and so there's there's another table that um basically references all of these titles to tie into that and so i'm i'm using a reference from that table um for this thing but but that's how it does make that connection um on the power bi side is yeah through those titles so yeah so that is pretty much um my presentation and this last slide up here thank you so much for attending i i hope that it's been worth your time and that's um not only have i hopefully shown that it's it's easy to get these into your app um using that that app in particular that emanuel used but if you get the creative spark it's actually quite simple to just start making your own and get started with that um but then also i hope that kind of showcased that there actually is a lot of power in those icons um ways to not only have your app be more graphically appealing and visually appealing i mean but to actually get signals and to inform your users about things and to kind of use them for for more than just a static image so yeah thank you so much for coming

Channel: Skypoint

Views: 1,757

Keywords: power platform, power apps, power bi, SVG

Id: NhO35BQPf9A

Length: 71min 49sec (4309 seconds)

Published: Mon Dec 14 2020