Its been around for a while now and was one of the things I was most excited about from Build back in June, and I realised I haven't really used it. That says a lot, but it also means I needed to take a deep dive to see what I think of it.
- What is YAML
- Yaml Basics
- Power Apps Yaml
- How to Use it
- The Future
What is YAML
Yaml standards for Yet Another Markup Language, so as you can tell its a markup language not a full language. This means it lacks logic and interpretation and is designed to be interpreted externally. Its main usp is to be human-readable, following the same pattern as Python, but as an alternative to xml and json (what JSON is to JavaScript, YAML is to Python).
I'm very comfortable writing and reading json so it took a little getting use to, but after using it for updating custom connectors I'm beginning to like it.
Custom connector Yaml editor
It works on white spaces rather then opening and closing markups.
YAML
parent
child: value
JSON
"parent":{
"child": "value"
}
XML
<parent>
<child>value</child>
</parent>
This definitely makes quicker to type, though it can be harder to read with long nested code, luckily Power Apps components are not very long or deeply nested.
Interesting FYI Power Apps actually saves components as a json inside the .msapp file when you export it.
Yaml Basics
There is a lot to learn about syntax of Yaml (a good cheat sheet I found is here) but the basics are:
Nesting
As stated nesting is done with white spaces, 2 spaces exactly (not a tab)
Strings
String do not need to be wrapped in " unless there are escape characters
stringValue: hello\nWorld
prints:
hello\nWorld
stringValue: "hello\nWorld"
prints:
hello
World
Multiline
>is used to read text over multiple lines but not print over multiple lines
stringValue: >
this is
not on
multiple lines
prints:
this is not on multiple lines
| is used to read text over multiple lines and print over multiple lines.
stringValue: |
this is
on
multiple lines
prints
this is
on
multiple lines
Arrays
Arrays can be standard [ ] or over multiple lines using - .
array: [one,two,three,four]
or
array:
- one
- two
- three
- four
The latter is used for nesting items within the array.
array:
- one
a: 1.1
b: 1.2
- two
a: 2.1
b: 2.2
Power Apps Yaml
Power FX has some additional rules/syntax for its implementation. The first main one is for any expression input there is a leading = .
So in the below example the name (gaGrid), type (Gallery), variant (vertical gallery) and properties do not use =, but as Items is an input expression it does have a =.
- gaGrid:
Control: Gallery
Variant: galleryVertical
Properties:
Items: =colGrid
So the simple rule is = means you can edit it without causing unexpected behaviour
Although Power Apps uses single line and multiline, it will force any single lineusing : or # into multiline.
- label:
Control: Label
Properties:
Text: ="Text hello"
X: =60
Y: =60
But when add : to the string:
- label:
Control: Label
Properties:
Text: |-
="Text: hello"
X: =60
Y: =60
- How to Use it
To use Yaml in Power Apps simply right click on the component and click 'View Code (preview)'.
Here you can see the code and copy it to your clipboard.
You can't edit the code directly but you can paste to your code editor (like vs code or notepad++), and edit it there.
If you have a placeholder yaml file it will format your code
Once edited copy the text and paste back into the app by pressing right mouse button on the design screen.
As you can see, without a built in editor it isn't much use for single components, but it does have its use with the entire screen. All you need to do is right click the screen but not on a component, that will allow you to copy and edit the entire screen.
Now we could do bulk edits in on the components and get a full view of each component. My big use case would be for updating colours on multiple components, setting X and Y positions (so much easier then selecting each parameter), and for updating gallery item.
As you may have noticed, there was a 'could' and a 'would', as unfortunately for now you can't paste the whole screen back in.
So to use the functionality you have to paste each component back individually, its doable but starts to lose the time saving benefits.
The Future
As you can see this is still in preview and it is not fully ready. Not being able to edit the code directly in the maker studio limits is usability to a few niche cases. But as soon as that edit functionality comes available (and I can't see why its not top priority) then this will become incredibly powerful. Typing code is simply quicker and more efficient, and although there is a longer learning curve pro developers will eventually learn the skills and start doing most of their development that way.
Top comments (6)
Additional missing point now is that you cannot paste components from Component Libraries or Code Components (PCF) as Maker Studio states that type of control is not recognized :-/
Love the capability. Thanks for sharing this... Buzzing with Ideas on how to build sharable templates
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more