Power Apps View Code and VS Code with YAML

did you know that you can now view the source code in power apps yeah that's right it's in some weird thing called yaml but don't worry we're going to explain all of that today how it works how to copy and paste that code we're even going to talk about how to use Visual Studio code and this red hat yaml extension I don't know what that means but we're going to learn how all of this works to let us start to edit our code for power apps outside of Power app studio and over in just PL text right now if you're thinking Shane I'm not a developer I don't care about this that's fair I'm not a developer either but I spent the last 6 hours learning about this because now it lets me peek under the hood a little further see a little bit more so I feel like this is something all of us want to learn if you are prodev then you're going to want to understand this because you're going to start thinking about GitHub repositories and merges and all that we're not going to get into that but I want to show you the editor the vs code the extensions and all of that so that you can be more powerful when you start doing source code is that fun now let's just switch over to my desktop and ta all right so let's just start here with power apps we had a blank app I've done nothing with it and let's just insert ourselves button right so insert a button here now when you insert a button now one of the new things you can do is if you right click here there is view code when you do this this is going to show you the yaml right we don't care what yaml is it's very similar to Json it doesn't like spaces but like it's just text right but this is the yaml that powers power apps under the hood so these are all the settings now if you're looking at you're saying Shane I know a button has a lot more than that that's right this is only ever going to show you the properties that are non default right like so if we close this and we go back here to the button and let's let's just go over here to the right and change its color from that blue to this orange color right now if we say view code now we see that the fill because that's what that was just changed has been done the other thing you might know like if you go here on the drop down anything see how Phil is bolded and then X and Y don't bold but anything that we change here is going to be changed right let just change the color here let's just change this to be color. black right that right so then now if we look color is there and then of course as you'd expect view code here okay so great who cares right but this is very interesting right because those are all the things have changed you me developers have asked me like hey what all has been changed on this well there you go there's an easy way to look at that but now that we've got this here what we can do is we can copy this code so copy code and for right now let's be simple let's just open notepad and now notepad if we paste that code in so you can see the same exact stuff what's really cool about this though like you know instead of color. black there I want that to be color. blue so we'll just change this to color. Blue and instead of the X being 40 and 40 let's make this X 75 and Y 75 as well right okay so we edited a notepad copy minimize this close this right you can't edit here right it's reason with a notepad you can't edit here but when you close now if you right click on the screen and you say paste you have the old paste now you have paste code and so we paste this in there is our button notice the text is blue but if we do view code the X and the Y is just 60 so it doesn't take the X and the Y's all right it ignores those but it did did take our color change and our fill in this interface if you wanted you could do you could do a crlf and find so if you want to be like Hey where's the X at right and it will take you to that line so you do have the ability to uh find stuff so let's add another button again insert another button and so now we're going to right click on this so I did view code last time if you just know you want the code you can go here to copy and there's a copy code directly and then we'll pull that over here and we could go over here and let's just paste this in the same file button two right and so we just see the properties control classic button properties boom now we know uh for example I want this button to set a variable right so I could just come down here if I know the syntax we could go here and we'll just type in on select right because that's the name of the property and then we' say equals and then it' be set VAR dog comma and then buddy right so just our normal Power FX formula so that's what that's going to look like now in a minute we're going to talk about how to do that easier but I want you to see that was possible what's even cooler right grab this both of these this time so copy so now we've got button one and button two right different properties different things and so now if we minimize this and go over here let's just delete these three real quick and now let's rightclick and say paste and paste code and so look both buttons got created for us so even though you know we pasted two in there like we can paste multiple controls at the same time because it said oh in your yaml because well formatted I understand there's two different controls and they were like that and it wouldn't matter right we could have had another one we could had a date picker in there right if you do the same thing for a date picker view code right so that's what the DAT Pickers one looks like and so if we went and added that obviously I mean just you know this but I just like to kind of reinforce it right we could paste that in here and then maybe we want to set one of the properties of it let's see my properties how about will go we set the color so okay so it has a color property as well so we'll just go copy this color. blue again copy and then we'll go re here enter and paste oh now you want to keep it nice and well formatted and then of course copy paste and if we just do a new screen just so there's no confusion and paste paste code there they are right so very cool all of this works the way that we would expect I think right and so this is the nice one now if you're thinking Shane why would I ever use this right so the best reason that I can think of for us not non developers where would use this well there's two right one is just to understand what's going on right being able to Peak behind the scenes is very helpful but two how many of you every time you go to do like my upload video right like so think of this app right we built this one if you haven't ever seen this video This is how to upload a file the video links up there but so we know that the first step is you have to insert a fake form and then once you have the fake form you steal the attachment control you have to reconfigure right that's just the Hoops we jump through every time so there's one of those attachment controls what if we right click on this this thing and say view code there's all those pieces right it's only 15 lines What If instead of going through the the game that I go through every time what if I just use my little uh one note notebook that I keep all my little code Snippets in and I added this to the code snippet right because I can grab that and so just go straight over here and paste it in right so paste code and there you go no configuration no nothing so even though the attachment control doesn't appear on the attachments um you know it brings it straight over so this might be a way for you guys if you have complex stuff like that you want to store and so now you know there you go or if your buddy is saying Hey how do you do that attachment control again like I can never remember you can just send them this over in teams or in an email right they just need that they paste it in and it goes so I think that's one really nice thing also it can be more complicated than that right so if you think about over here I also in this particular example had a container and so inside this container is you know labels there's another container with attachment like there's a dozen pieces here I can go to that container and I can click here and I can say copy copy code all right go to notepad let's just delete all this so we don't get confused but look at this all of that stuff is in here you can see the container you can see the container has children so you can really see and copy all this so I could send this to someone wants to get in a teams chat but I can edit all of this right if I'm not happy with what's in here or I need to rename everything or whatever whatever Shenanigans you're up to but this is all of the working goodness and so even when we go over here to our brand new app that's never seen it before on a brand new screen we can paste that in paste your code and boom now you're like hey there's errors but if we look in here edit in the formula bar and right I mean even the comments are there oh this one has a flow right I I didn't copy the flow I just copied the control so I need to go add that flow in here right and then this one's built on top of that same flow so that's the reason I'm getting errors it's not anything wrong with the process it's because I now have assets that aren't in this app because the app was blank and brand new 30 seconds ago 3 minutes ago 5 minutes ago who knows now one consideration here right so I just showed you individual controls multiple controls I showed you container with nested stuff inside of it all that works if I go to the screen object here and I say hey Mr screen and view code I can see all the code for a screen okay I can copy the code for a screen but if we go over here and try to like rightclick and say paste paste code it's going to yell at me pasting yo for the screen isn't supported yet right so you can't do it for screens today hopefully that's a feature that's coming but who knows when um that's okay the other thing to keep in mind is that a lot of us are starting to build screens all inside of containers right like the default app from Microsoft now has a container or it starts with a big whole screen container so in those cases you just copy that and be able to kind of jump from point A to point point B but remember also though if you really just want to copy screen three right you can always still just do duplicate screen like that still works so that might be a easier way and then you could kind of go through right screen 311 with all the pieces nothing too crazy here but I you need to kind of start seeing these things right it's just going to help you understand what's going on also keep in mind if you're using the new controls which I'm still not but in case you are right if you go down here to Modern controls and themes turn them on and close right we know if we insert a one of their fancy buttons right it looks different um but if you do the same thing right view code and so it actually is doing the same thing just notice the control here is named button the other one the old one is called classic slash button so not a big deal not important per se but I wanted you to make sure that you understood that you know the classic controls are going to have a little bit of different pieces as well that's the whole fun of this like here I've never done a drop down let's just go look like what's a drop down so insert a drop down and then let's right click on this thing and view its code it's just called a drop down like boring but that has helped me I and there's a variant PCF data set no idea what that is not going to learn but now I see that there's something have I ever seen an error message around PCF data set maybe I'll remember that I saw that a drop down once I don't know so that's the straightforward side of it just grab those edit notepad retain those send them to your friends and teams that stuff hey why you're taking some time by the pool learning all this with me remember we can also do some training classes training. powerapps 911.com we've got live classes on demand classes we got a six-month University we've got some cool Power Pages training coming up and we even even are doing a co-pilot jump start which is super awesome we just spend all day talking about AI who doesn't love that I know anyway back to the video now we're going to put on our braak faces right I'm not a developer you're not a developer it's okay if you are a developer you can laugh at how dumb I am it's fine so what we're going to do is I installed something called VSS code right so vs code is Visual Studio code this is Microsoft's free tool like remember years ago V Visual Studio cost like $10,000 a person to use now it's just free so we can all just get vs code and I went here and set up a workspace and so then now inside my vs code workspace I'm going to go here start a new file okay so we're going to new file and we're just going to go up here and we're just going to call this uh video. yaml now you want to make sure that it's a yaml file and it doesn't have to be all caps I don't want to keep all caping it that I do video. yaml and then we're going to say enter right so it's G to be hey where do you want to save this I'm going to save this in my VSS code folder I just clicked away from for some silly reason right we're going to save right here create the file okay so that's the first we create the file now down at the bottom right I'm going have to move my face you're going to see here that it says set language mode to the yal that's important right it needs to know it's a yaml file you can't just jump in and start using it so it needs to say yaml here and as long as you did a video. yaml and save it it knows it's a yaml because what we really need to do next is see it says no Json schema right this is be the cool thing that the devs are going to be like oh I did not know this right we are going to teach the dev something well what we can do is there is a power apps schema but in order to get it you got to jump through some hoops so what you're going to do is you go here to the left and you click on extensions and you are going to search for yaml this is going to show you all the yaml extensions you're looking for the one that's called yaml from Red Hats now when you get here then there's going to be a thing here that says install right so you can see I have a gear you'll have a blue button set install it takes that long to do it no no questions no nothing it will just instantly happen and then you get the gear icon gear icon we click on that we want to go here to extend settings now here what you want to do is you're going to want to go to workspace okay you go to workspace and you're going to scroll down a little bit and we're going to go here to edit in Json or edit in settings. Json see I told you Json would come up right so why we learn that if you ever learned Json before right there's a video up there all power apps people should know Json like that is not a devie thing that is a we all need to know it okay in here you're going to see different things that's okay everyone's got different things here depending on what extensions they have what settings they have what configurations they have blah blah blah the key one is that you're going to need this okay yaml schemas Curly bracket and then this URL colon and then p pa yaml and then close that right this is the one that we are looking for now I will put a link or I'll put this little chunk down in the description of the video or you can just you know grab a screenshot here grab this but you're going to need this right all this other stuff here like uh um you know I have GitHub co-pilot so I have that ability like you're going to see different things but this is the one that's going to light up what we need so once you've got that in here we're going to x out of here we're going to make sure we save our changes s right so make sure when you put it in there you X out to get the save to happen you can close the settings now if we go back here to my video. yaml go down here to the bottom right under my face again we're going to say no Json scheme we're going to click there we're going to start to type in power and we're going to see that URL okay we're gonna click on it and if it works which I had a hard time with this that's part of my six hours I spent on this you can see down here in the bottom right it now says Microsoft power apps this is going to give you some autocomplete some understanding about what's going on with power apps okay so now that we've got this ready now let's switch back over to power apps and let's take um let's insert classic button right like I I don't like the fancy stuff I like the classic stuff classic button okay there's my classic button button so we're going to do the same thing here copy copy code we're go back over and in here we're going to paste this in look at that so nothing new right we did this with notepad what's really neat here though go here we'll hit enter notice I don't have to all the spacing and understand spacing automatically we could start to say on select oh look at that tab complete nice what do you want to do on Tab select how about let's do a um a set just simple variable right so we'll say set and then oh right it kind of suggests it sometimes understands a little bit sudden and the the the suggestions I should over this real quick the suggestions are coming because I have co-pilot studio right like so if you have GitHub co-pilot not co-pilot Studio GitHub co-pilot um then that's where I'm seeing suggestions if not you're just going to have to paste the code in here yourself but we're going to say Set uh VAR doggy this time and we'll do a comma and then we'll just do buddy that kind of helps me through oh what you want to also add a patch in there no big deal right go here look now this is where GitHub co-pilot kind of understands like oh what if I made one called cat and made it whiskers right like a cat name like that's kind of neat stuff but we're goingon to do now we're gonna say I want to do patch and then we're going to do and look this is pretty close to a correct patch right we don't want that because we're going to do something different but we would have employees it's my data source of choice defaults employees and then name Buddy now when I use the GitHub I hit the tab complete it put all these spaces in here if you get spaces I want you guys to see this this is a common error so this will yell at you as long as you have things configured correctly but if you were notepad it wouldn't have yelled at you if you try to copy this and go back over here and paste it paste code you're going to get this terrible error right while scanning a plain scalar value found in valid mapping what I don't know either right like so just keep that in mind spaces are not valid in yaml so what we need to do here is because I did the whole cut and paste or the whole you know type ahead thing like if I go in I need to blow away all these spaces and then actually we don't want name we would do title because that's the right field but there you go right so I was able to do that code now if we copy this and go back over and we paste our code right there it is now once again we get an error but what's the error it's like hey I don't know what in the world employees is right so what are we going to do to fix that we then just need to add the data source real quick over here I'll edit this out for you so there you go I added my SharePoint employees list and now everything matches and now the button's happy so just keep that in mind if you're you know pasting in things from the outside or you wrote code outside there that's calling data sources this the data source in your app probably a fair question that's kind of the idea right is that we now have the ability to go over here and write Power FX inside of our uh piece here in the yo and then send it over so if you are a proav now then you're thinking okay I could have get repositories I could start to do you know merging in branches and all that deie stuff I don't know what all that is but but you get the idea you guys can start to do true source code editing and control right source code comparisons because it's not just a simple uh you know copy and Pace here right like we've got a full development tool around this for those of us that aren't devs like we're probably just good with notepad but I think you know like it I said it spent me I spent a good part of my day fighting with VSS code to kind of learn this it was good muscle right I got a little smarter today for it so I don't hate the idea of all of you setting up VSS code just to see if you can recreate this demo I think there are good things to be had um you know and like here I've got the whole GitHub co-pilot right so I could do something like this and I could say set the color to Dodger blue and then it should offer me a suggestion and look at that color Dodger blue so it almost got it right uh so we just say accept and then like we'd have to fix all the format you know it it didn't really but it kind of got it right like I don't really think you're going to do much of that um but you know I wanted you to understand it was possible let's just say control Z here there you go put that back um I would also say like maybe a better example would have been this create another button set the variable to chewy and so what this should do look it made button four for us there look at that and instead of set V doggy to chewy this time and then what we can do is we can highlight all this because now it's angry because the tabbing is wrong we'll say shift tab shift tab shift tab there we go and then now we need this one oh just grab all these again and say tab there you go so now it's formatted the right way so it you know Coop GitHub co-pilot did a good job for me but now we could obviously copy both of these and remember even though if we looked over here like we've already got button three and 31 like it's just going to paste paste code so there be button 32 and then button four is still button four but now we've got those two buttons in here all right so I hope that opens some doors for you guys Right View code copy code edit code remember use control fine in there use notepad to edit if you're not comfortable with vs code but as we continue to get better right low code right which is our whole thing like we all learned how to do this low code stuff remember our whole goal like the whole reason we got of this was to learn we keep learning more and more stuff right we've learned Json we've learned about apis now we're kind of seeing some yaml we kind of see this Visual Studio code like we're just making ourselves more valuable and smarter with all this so Embrace some of this complexity even though you're thinking there's no reason I might need this as a nonpr code person it's still worth taking the time to learn questions comments leave them below this was a a departure for us but a hopefully a good one uh shout out to Marcel uh he's the guy on the product team that kind of owns runs this feature he spent way too much time helping me understand this I said I spent six hours to make this 20-minute video for you so but yeah thank you to Marcel and then of course Tasha because she was also facilitating some stuff there you and I guess with that I'm going to say thanks and have a great day

Channel: Shane Young

Views: 6,562

Keywords: Shane Young, powerapps911, PowerApps, Power Apps, visual studio, visual studio code, low-code application, power apps tutorials, canvas apps, how to, vs code, learn powerapps, microsoft powerapps, power apps low code, microsoft power apps low code, power apps code review tool, power apps code view, power apps code, power apps visual studio code, power apps custom code, power apps source code, power apps source code tool, power apps view code, power apps yaml

Id: fTMrS2y6Qew

Length: 20min 33sec (1233 seconds)

Published: Mon Jun 24 2024