Look, I admit, a concept like Code View can be scary to someone who already thinks the concept of "Low-Code" already had too much code. And then you find out that it is YAML and you are like, I am out! Well calm down a minute.
Remember, I am not a pro developer either. I don't write C# or Python or whatever. It is okay. YAML is very similar to JSON and remember how happy we all were when we learned that? It is all just text with a specific format. So, let's learn what does code view get us.
How about the ability to quickly see what has been modified in a control. How about the ability to copy that code and send it to a co-worker in a Teams chat or email and then they can paste it straight into their app and it just works. How about the ability to paste that code into Notepad or VS Code and edit that code before pasting it back into Power Apps.
This opens a lot of doors!
Below let's talk about it a bit and give you some examples. But if you are thinking I want to see a deeper dive and I want to see it in action then check out this video Power Apps View Code and VS Code with YAML
View Code and Copy Code in Power Apps
This one is pretty simple. Now anytime you want to know what properties have been set for a control, right click on it and select View code. Works for controls, containers, and even screens!
Once you click you now see all of the non-default properties for that control. Meaning if you have set the Color, you will see the Color, if you are using the default, you will not.
You cannot edit through this experience, but you can click Copy Code in the bottom left which will put the code in your clipboard. If you know you want to just copy thecode,e then you can also right click on the control and select Copy > Copy Code.
Edit Power Apps code with Notepad
Now that you have copied the code you can edit it with any text editor, like Notepad. (In a later section we will talk about VS Code but for now let's keep it easy.)
Open up Notepad and paste it in. This text, formatted the way it is, is called YAML. Like JSON, it is just a fancy name for text with some formatting rules. Don't over think it, it is just text.
The cool thing is you can edit it and then take it back to Power Apps. In the screenshot below I pasted in our boring button code and added an OnSelect property to create a global variable called varDog and set its value to Buddy. 🐶
Now highlight all of that code and copy it back to your clipboard.
Enjoying this? Then you will love our training! Click training at the top of the page and join us for live or on demand training. Everything from intro Power Apps to Copilot AI or even a full 6-month deep dive University!
Paste Code in Power Apps
Head back over to Power Apps, right click on your screen and select Paste > Paste Code
And now look. It creates the button, automatically updated the button name to avoid duplicate Button1 and the OnSelect property is set to Set(varDog, "Buddy")
When it comes to pasting in code you can paste single controls, multiple controls, and even containers with all of their child objects. The only thing you cannot paste right now is a whole screen. Very cool.
One of the neat scenarios this opens is if I want to give you a control configured with a bunch of awesome settings, I can just give you the text now. 😎 So take this cool image of Buddy going for a swan dive into the pool.
All you need to do to get it is steal this fancy YAML. 😜
- Image1:
Control: Image
Properties:
Image: ="https://static.wixstatic.com/media/263017_282af94507eb474d8a8a6dc99e1e7586~mv2.jpg"
BorderColor: =RGBA(246, 88, 16, 1)
BorderThickness: =10
Height: =277
RadiusBottomLeft: =100
RadiusBottomRight: =100
RadiusTopLeft: =100
RadiusTopRight: =100
Width: =336
X: =40
Y: =36Boom! You have the diving pup!
What about Pro Developers
Truth be told, you are why they started all of this. Why? This will open doors for you using Source Control like Github with all of your branches and forks and stuff. And if you install the YAML extension from Red Hat, you can even add the Power Apps Schema. 🤯 Allowing more IntelliSense, throw in some Github Copilot and now you are cooking!
To see how to get all of that fun configured check out the video list at the top of the article. This blog post has gotten too long to explain VS Code, and if you are a pro dev, you probably know more than I do anyway. 🙃
Summing it up
This is an interesting twist, which opens new doors of understanding and sharing controls for all of us. Yes, it is also meant to power pro developers to do more powerful stuff but doesn't mean the rest of us cannot benefit.
If you need help with any of your Power Platform projects let us know, we have lot of options from training, to mentoring, to full scale consulting to help you out. Scroll down a bit more and fill out that contact form and we will be happy to help.