Power Apps and Yaml

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)

It is not a type safe
Type safe means values are a set type. So in JSON you use a schema to state if the value is string/integer/object/array, this means if you input the incorrect type the interpreter will fail. Yaml does not do this, it dynamically decides on the type when it is inteperted.

Strings
String do not need to be wrapped in ” unless there are escape characters

stringValue: hellonWorld

prints:

hellonWorld

stringValue: "hellonWorld"

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.