DEV Community

Cover image for Power Apps and Yaml
david wyatt
david wyatt Subscriber

Posted on • Updated on

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
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>


Enter fullscreen mode Exit fullscreen mode

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

yaml cheat sheet

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


Enter fullscreen mode Exit fullscreen mode

prints:



hello\nWorld


Enter fullscreen mode Exit fullscreen mode


stringValue: "hello\nWorld"


Enter fullscreen mode Exit fullscreen mode

prints:



hello
World


Enter fullscreen mode Exit fullscreen mode

Multiline

>is used to read text over multiple lines but not print over multiple lines



stringValue: >
  this is
  not on 
  multiple lines


Enter fullscreen mode Exit fullscreen mode

prints:



this is not on multiple lines


Enter fullscreen mode Exit fullscreen mode

| is used to read text over multiple lines and print over multiple lines.



stringValue: |
  this is
  on 
  multiple lines


Enter fullscreen mode Exit fullscreen mode

prints



this is
on 
multiple lines


Enter fullscreen mode Exit fullscreen mode

Arrays
Arrays can be standard [ ] or over multiple lines using - .



array: [one,two,three,four]

or

array: 
  - one
  - two
  - three
  - four


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

But when add : to the string:



  • label: Control: Label Properties: Text: |- ="Text: hello" X: =60 Y: =60
Enter fullscreen mode Exit fullscreen mode



  • How to Use it

To use Yaml in Power Apps simply right click on the component and click 'View Code (preview)'.

yaml menu

Here you can see the code and copy it to your clipboard.

yaml code

You can't edit the code directly but you can paste to your code editor (like vs code or notepad++), and edit it there.

vs code yaml
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.

paste yaml

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.

yaml 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.

paste screen error

So to use the functionality you have to paste each component back individually, its doable but starts to lose the time saving benefits.

copy component from screen

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)

Collapse
 
prusakpl profile image
Piotr Rusak

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 :-/

Collapse
 
balagmadhu profile image
Bala Madhusoodhanan

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