Streamlining Power Apps Development with a Custom YAML Generator

When building Power Apps solutions, you quickly learn that many UI patterns repeat across apps. Instead of manually placing controls and configuring each property, you can generate YAML directly from a custom app you build yourself. This article walks you through creating a simple YAML generator that outputs ready-to-paste code for a form layout.

Scenario: Building a Product Input Form

Imagine you need a form for a product catalog with fields like ItemName, Price, Stock, and Category. Instead of dragging and dropping controls for each field, you can define them in a collection and let your generator produce the YAML.

Step 1: Define Field Definitions

Create a collection in your app that stores the field names and their desired control types. For example:

powerfxCollect field definitions

ClearCollect(AllFields,
{FieldName:"ItemName", ControlType:"TextInput"},
{FieldName:"Price", ControlType:"NumberInput"},
{FieldName:"Stock", ControlType:"NumberInput"},
{FieldName:"Category", ControlType:"ChoiceInput"}
);

Tip

If you plan to generate many controls, store field definitions in a Dataverse table for reusability across apps.

Step 2: Generate YAML Code

Add a button and a label to your screen. In the button’s OnSelect, run a Power Fx expression that iterates over the collection and forms a YAML string:

powerfxGenerate YAML from collection

Set(GeneratedYAML,
Concat(AllFields,
  "  " & FieldName & ": !PowerApps.Control" & Char(10) &
  "    ControlType: " & ControlType & Char(10) &
  "    Position: { X: 100, Y: 100 }" & Char(10) &
  "    Properties: {}" & Char(10)
)
);

Set the label’s Text property to GeneratedYAML. When you press the button, the label will display the YAML. Copy it, open the YAML editor in Power Apps Studio (View → YAML), and paste to instantly create the controls.

The output will look something like this:

yamlExample generated YAML

ItemName: !PowerApps.Control
  ControlType: TextInput
  Position: { X: 100, Y: 100 }
  Properties: {}
Price: !PowerApps.Control
  ControlType: NumberInput
  Position: { X: 100, Y: 100 }
  Properties: {}

Indentation matters

YAML indentation must use exactly two spaces per level; using tabs will cause a paste failure. Always check the preview in Power Apps Studio before pasting large blocks.

Common Pitfalls

Missing Required Properties: Controls often need Y, Width, Height, or a Text property. The example sets a minimal default; adjust according to your needs.
Unsupported Controls: Highly complex controls (like galleries or data tables) may not paste correctly from YAML. Test with simple controls first.

Security & Delegation

Because the YAML generation runs entirely client-side, there are no delegation concerns. However, if you load field definitions from a large SharePoint or Dataverse table, be mindful of the default delegation limit (500 or 2000 records). Use Filter or FirstN to limit the data fetched.

Final Thought

A custom YAML generator can dramatically speed up creating consistent UI layouts in Power Apps. It enforces naming conventions and reduces repetitive clicking. Consider building one tailored to your team’s common patterns.

References

Original source: Power Apps YAML Code Generator by Matthew Devaney
Microsoft Docs: Power Apps YAML Overview
Microsoft Power Fx reference: https://learn.microsoft.com/en-us/power-platform/power-fx/overview