Powerapps Canvas Yaml Generator

Power Apps Canvas App YAML Generator

Generates production-ready Power Apps Source Code YAML for canvas app screens, following the official Power Apps YAML source format rules and a consistent enterprise design system.

Before Starting

Always confirm the following before generating any YAML:

1. Screen or component name — what to name the output (e.g. ScnDashboard, ScnRequestForm, DlgConfirmDelete)
2. Component type — full screen, dialog/overlay, form, gallery list, detail view, dashboard, or other
3. Navigation context — if a sidebar is needed, which nav item should be active; if no sidebar is needed, say so
4. Screen purpose — one sentence describing what the screen or component does
5. Data source — SharePoint list, Dataverse table, or collection name and any known column names (if data-driven)
6. Controls needed — gallery, form fields, dropdowns, status badges, buttons, dialogs, etc.

If any detail is missing, ask before generating.

Step 1: Confirm the Component Type

The component type determines the top-level YAML structure:

• Full screens → wrapped in Screens: block
• Dialogs, popups, components, partial UI → bare container tree, NO Screens: wrapper

Step 2: Design System

Colours

Status Badge Colours

Apply the category that best matches the app's status vocabulary.

Typography

Font-related properties for all classic controls: Font, Size, FontWeight. Note: FontSize does NOT exist — always use Size.

Font: always =Font.'Segoe UI'

AutoLayout Container Properties

When using Variant: AutoLayout, apply these layout properties as needed:

Gallery-specific properties:

Step 3: Power Apps YAML Syntax Rules

All rules are absolute. Violating any one produces a PA1001 import error. Verify every rule before outputting.

RULE 0 — YAML indentation is mandatory and must be exact

The single most common cause of import failure is missing or collapsed indentation. YAML structure is defined entirely by indentation. If indentation is lost, every node appears at the wrong level and the parser rejects the file immediately.

Output YAML inside a fenced code block (```yaml) so indentation is preserved exactly. Never output YAML as plain prose or a flat list.

The indentation contract for Power Apps Source Code YAML is 2 spaces per level. Every level of nesting adds exactly 2 spaces. No tabs. No 4-space indents.

Copy code
Screens:                          <- level 0, 0 spaces
  ScreenName:                     <- level 1, 2 spaces
    Fill: =RGBA(...)              <- level 2, 4 spaces
    Children:                     <- level 2, 4 spaces
      - ControlName:              <- level 3, 6 spaces (the - counts as part of indent)
          Control: ...            <- level 4, 10 spaces (4 spaces after the -)
          Variant: ...            <- level 4, 10 spaces
          Properties:             <- level 4, 10 spaces
            PropName: =value      <- level 5, 12 spaces
          Children:               <- level 4, 10 spaces
            - ChildName:          <- level 5, 14 spaces
                Control: ...      <- level 6, 16 spaces
                Properties:       <- level 6, 16 spaces
                  PropName: =val  <- level 7, 18 spaces

The rule for list items (controls inside Children:): the - ControlName: line is at the list level, and the control's body (Control:, Variant:, Properties:, Children:) is indented 4 more spaces relative to the -.

Wrong — no indentation (causes immediate PA1001):

Copy code
Screens:
DlgAreYouSure:
Fill: =RGBA(0, 0, 0, 0)
Children:
- conDialogBackdrop:
Control: GroupContainer@1.5.0

Correct — proper 2-space indentation:

yamlCopy code
Screens:
  DlgAreYouSure:
    Fill: =RGBA(0, 0, 0, 0)
    Children:
      - conDialogBackdrop:
          Control: GroupContainer@1.5.0
          Variant: ManualLayout
          Properties:
            Fill: =RGBA(0, 0, 0, 0.4)

RULE 1 — Property values are NEVER quoted

The Source Code schema does not use quoted strings for property values. Quoting causes PA1001.

yamlCopy code
# WRONG — quoted values, all cause import errors
Fill: "=RGBA(13, 44, 84, 1)"
Width: "=230"
Text: "=ThisItem.Title"
Variant: "AutoLayout"

# CORRECT — bare, unquoted
Fill: =RGBA(13, 44, 84, 1)
Width: =230
Text: =ThisItem.Title
Variant: AutoLayout

RULE 2 — Every property value starts with =

Every value inside a Properties: block is a Power Fx expression and must start with =. No exceptions for any type.

The only values without = are the schema declaration keys — Control: and Variant: — which are type/schema keywords, not formulas.

RULE 2b — Font size property is Size:, never FontSize:

The property name for font size on all classic controls (Label@2.5.1, Classic/Button@2.2.0, Classic/TextInput@2.3.2, Classic/ComboBox@2.3.0, etc.) is Size. The property FontSize does not exist and causes PA2108 on import.

yamlCopy code
# WRONG — FontSize does not exist, causes PA2108
- lblTitle:
    Control: Label@2.5.1
    Properties:
      FontSize: =16 # INVALID property name

# CORRECT — use Size
- lblTitle:
    Control: Label@2.5.1
    Properties:
      Size: =16 # correct property name
      Font: =Font.'Segoe UI'
      FontWeight: =FontWeight.Semibold
      Color: =RGBA(15, 23, 42, 1)

This applies to every versioned classic control. Font, FontWeight, and Size are the three font-related properties.

RULE 3 — Use Control: not ControlType:

ControlType: does not exist in the Source Code schema. Always use Control: with the full versioned type string.

yamlCopy code
# WRONG — invalid key, and quoted
- conPanel:
    ControlType: "GroupContainer"

# CORRECT — correct key, unquoted, with version
- conPanel:
    Control: GroupContainer@1.5.0

RULE 4 — Variant: is a sibling of Control:, never inside Properties:

yamlCopy code
# WRONG
- conPanel:
    Control: GroupContainer@1.5.0
    Properties:
      Variant: AutoLayout # inside Properties is wrong

# CORRECT
- conPanel:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout # sibling of Control, outside Properties
    Properties:
      LayoutDirection: =LayoutDirection.Vertical

RULE 5 — Screen-level structure: Properties: + Children: as siblings

Screens support an optional Properties: block for screen-level properties, followed by Children: as a sibling — not nested inside Properties:.

Valid screen-level Properties: keys: OnVisible, OnHidden, LoadingSpinnerColor. That is all. Fill, Height, Width, and DisplayName are still NOT valid here.

Children: is always a direct sibling of Properties: under the screen name — never nested inside Properties:.

yamlCopy code
# CORRECT — Properties: block with OnVisible, then Children: as sibling
Screens:
  ScnMyScreen:
    Properties:
      LoadingSpinnerColor: =RGBA(13, 44, 84, 1)
      OnVisible: |
        =ClearCollect(colItems, MyList);
        UpdateContext({locSearch: ""})
    Children:              <- sibling of Properties:, NOT inside it
      - conShell:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:      <- this Properties: belongs to conShell, not the screen
            Fill: =RGBA(245, 246, 248, 1)
            Height: =Parent.Height
            Width: =Parent.Width
            ...

# ALSO CORRECT — no Properties: block at all (when no screen-level props needed)
Screens:
  ScnMyScreen:
    Children:
      - conShell:
          ...

# WRONG — Fill/Height/Width at screen level (still invalid)
Screens:
  ScnMyScreen:
    Properties:
      Fill: =RGBA(245, 246, 248, 1)   # INVALID screen property
      Height: =App.Height             # INVALID screen property
      Width: =App.Width               # INVALID screen property

# WRONG — Children: nested inside Properties: (structural error)
Screens:
  ScnMyScreen:
    Properties:
      OnVisible: |
        =UpdateContext({locSearch: ""})
      Children:            # WRONG — Children: must be a sibling, not inside Properties:
        - conShell:

RULE 5b —### RULE 5b — Dialogs, popups, and components are NOT wrapped in Screens:

When the request is for a dialog, popup, overlay, reusable component, or any partial UI (not a full standalone screen), do NOT wrap it in a Screens: block. Output a bare container tree starting with a - ContainerName: list item.

Wrong — dialog incorrectly wrapped in Screens:

yamlCopy code
Screens:
  DlgConfirm:
    Children:
      - conDialogBackdrop: ...

Correct — dialog as a bare container tree (no Screens: wrapper):

yamlCopy code
- conDialogBackdrop:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      X: =0
      Y: =0
      Width: =Parent.Width
      Height: =Parent.Height
      Fill: =RGBA(0, 0, 0, 0.4)
      RadiusTopLeft: =0
      RadiusTopRight: =0
      RadiusBottomLeft: =0
      RadiusBottomRight: =0
    Children:
      - conDialogPanel:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            X: =(Parent.Width - 480) / 2
            Y: =(Parent.Height - 240) / 2
            Width: =480
            FillPortions: =0
            Fill: =RGBA(255, 255, 255, 1)
            LayoutDirection: =LayoutDirection.Vertical
            LayoutGap: =16
            PaddingTop: =24
            PaddingBottom: =24
            PaddingLeft: =24
            PaddingRight: =24
            LayoutMinHeight: =16
            LayoutMinWidth: =16
            RadiusTopLeft: =12
            RadiusTopRight: =12
            RadiusBottomLeft: =12
            RadiusBottomRight: =12

Use Screens: only when generating a full standalone app screen. Use a bare container tree for: dialogs, popups, overlays, reusable card components, form panels, and any partial UI meant to be embedded within an existing screen.

RULE 6 — No BorderRadius: — use four Radius* properties

BorderRadius is not a valid property in the Source Code schema.

yamlCopy code
# WRONG
BorderRadius: =6

# CORRECT — always all four, even if all the same value
RadiusTopLeft: =8
RadiusTopRight: =8
RadiusBottomLeft: =8
RadiusBottomRight: =8

Every GroupContainer must include all four radius properties. Use =0 for square corners.

RULE 7 — Multi-line formulas use block scalar; = goes inside the block

Two block scalar styles are used — pick based on content:

|- — for a single expression that spans multiple lines (no ; between statements). The |- strips the trailing newline. Use for Fill, Items, Color, and any single multi-line formula:

yamlCopy code
Fill: |-
  =If(
      locIsActive,
      RGBA(255, 255, 255, 0.08),
      RGBA(0, 0, 0, 0)
  )

Items: |-
  =AddColumns(
      Filter(MyList, Status = "Active"),
      "Extra", Value(ID)
  )

| — for multiple statements separated by ;. Use for OnSelect, OnVisible, OnHidden:

yamlCopy code
OnSelect: |
  =Set(gblSelectedItem, ThisItem);
  Navigate(ScnDetail);
  Set(gblMode, "Edit")

OnVisible: |
  =ClearCollect(colItems, MyList);
  UpdateContext({locSearch: ""})

Both | and |- are accepted by the parser for OnSelect/OnVisible. Either is valid:

yamlCopy code
# Also valid — |- on multi-statement OnSelect
OnSelect: |-
  =Set(gblFrmMode, "New");
  Navigate(ScnDetail)

The = always goes on the first line inside the block, never on the key line itself.

RULE 7b — Formulas containing { (record literals) must use block scalar

YAML treats : (colon-space) as a mapping separator. Power Fx record literals like {varName: value} contain this pattern and will break inline parsing with "found invalid mapping".

Any formula that contains { must use | or |- block scalar.

Single-line formulas WITHOUT { are fine inline:

yamlCopy code
# Fine inline — no { } present
OnSelect: =Navigate(ScnDetail)
OnSelect: =Back()
Items: =Filter('Software Assets', Status.Value = "Active")
Visible: =locDialogVisible

yamlCopy code
# WRONG — colon inside {} breaks YAML parsing (PA1001 "invalid mapping")
OnSelect: =UpdateContext({locDialogResult: false, locDialogVisible: false})
OnSelect: =Patch('My List', Defaults('My List'), {Title: txtName.Text})
OnSelect: =Navigate(ScnHome, {locUser: varCurrentUser})

# CORRECT — use | block scalar whenever the formula contains `: `
OnSelect: |
  =UpdateContext({locDialogResult: false, locDialogVisible: false})

OnSelect: |
  =Patch('My List', Defaults('My List'), {Title: txtName.Text})

OnSelect: |
  =Navigate(ScnHome, {locUser: varCurrentUser})

This applies to any property, not just OnSelect:

yamlCopy code
# WRONG — colon inside formula value
Items: =Filter(MyTable, {Status: "Active"})
Default: ={Value: "All"}

# CORRECT
Items: |
  =Filter(MyTable, {Status: "Active"})
Default: |
  ={Value: "All"}

The safe rule: if the formula contains {, always use | block scalar.

RULE 8 — ManualLayout only for overlays and badges; AutoLayout for everything else

• Variant: ManualLayout — dialog backdrops, dialog panels that need explicit X/Y, status badges
• Variant: AutoLayout — all other containers (shells, sidebars, top bars, body areas, card panels, form rows, button rows)

Using ManualLayout where AutoLayout is needed means children all pile at position 0,0.

RULE 9 — No DisplayName, no # comments in generated YAML

• DisplayName is not a valid property anywhere — never emit it
• Do not add # YAML comments inside the generated YAML block

RULE 10 — Delegable filtering only; no Search() or in operator

yamlCopy code
Items: |-
  =Filter('DataSource',
      (locFilterStatus = "All" || StatusColumn = locFilterStatus),
      StartsWith(TitleColumn, locSearchText)
  )

Never use Search() or the in operator — they are not delegable against SharePoint or Dataverse.

Step 4: Control Reference

GridLayout container properties:

yamlCopy code
- conGrid:
    Control: GroupContainer@1.5.0
    Variant: GridLayout
    Properties:
      LayoutGridColumns: =6
      LayoutGridRows: =1
      Height: =140
      FillPortions: =0
      LayoutMinHeight: =16
      LayoutMinWidth: =16

CanvasComponent usage:

yamlCopy code
- comp_mySidebar:
    Control: CanvasComponent
    ComponentName: sideBar          <- no = prefix, no quotes; this is a schema declaration
    Properties:
      ActiveScreen: =App.ActiveScreen
      Height: =Parent.Height
      Width: =230

Invisible tap-target button (full-width overlay over a gallery row — Text: = with empty formula is valid):

yamlCopy code
- btnRowTapTarget:
    Control: Classic/Button@2.2.0
    Properties:
      Fill: =RGBA(0, 0, 0, 0)
      BorderStyle: =BorderStyle.None
      Height: =Parent.TemplateHeight
      Width: =Parent.Width
      Text: =
      HoverFill: =RGBA(56, 96, 178, 0.1)
      OnSelect: |
        =Set(gblSelectedItem, ThisItem);
        Navigate(ScnDetail)

Naming Conventions

Step 5: Canonical Reference Examples

These are complete, correct examples. Every generated YAML must match this syntax exactly.

Example A: Confirmation Dialog (complete, bare container — no Screens: wrapper)

yamlCopy code
- conDialogBackdrop:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      X: =0
      Y: =0
      Width: =Parent.Width
      Height: =Parent.Height
      Fill: =RGBA(0, 0, 0, 0.4)
      RadiusTopLeft: =0
      RadiusTopRight: =0
      RadiusBottomLeft: =0
      RadiusBottomRight: =0
    Children:
      - conDialogPanel:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            X: =(Parent.Width - 480) / 2
            Y: =(Parent.Height - 240) / 2
            Width: =480
            FillPortions: =0
            Fill: =RGBA(255, 255, 255, 1)
            BorderColor: =RGBA(226, 232, 240, 1)
            BorderThickness: =1
            RadiusTopLeft: =12
            RadiusTopRight: =12
            RadiusBottomLeft: =12
            RadiusBottomRight: =12
            LayoutDirection: =LayoutDirection.Vertical
            LayoutGap: =16
            PaddingTop: =24
            PaddingBottom: =24
            PaddingLeft: =24
            PaddingRight: =24
            LayoutMinHeight: =16
            LayoutMinWidth: =16
          Children:
            - conDialogHeader:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  FillPortions: =0
                  Fill: =RGBA(0, 0, 0, 0)
                  LayoutDirection: =LayoutDirection.Horizontal
                  LayoutAlignItems: =LayoutAlignItems.Center
                  LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
                  LayoutMinHeight: =16
                  LayoutMinWidth: =16
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                Children:
                  - lblDialogTitle:
                      Control: Label@2.5.1
                      Properties:
                        Text: ="Are you sure?"
                        Size: =16
                        FontWeight: =FontWeight.Semibold
                        Color: =RGBA(15, 23, 42, 1)
                        Font: =Font.'Segoe UI'
            - lblDialogMessage:
                Control: Label@2.5.1
                Properties:
                  Text: ="This action cannot be undone. Please confirm."
                  Size: =13
                  FontWeight: =FontWeight.Normal
                  Color: =RGBA(71, 85, 105, 1)
                  Font: =Font.'Segoe UI'
            - conDialogFooter:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  FillPortions: =0
                  Fill: =RGBA(0, 0, 0, 0)
                  LayoutDirection: =LayoutDirection.Horizontal
                  LayoutJustifyContent: =LayoutJustifyContent.End
                  LayoutGap: =8
                  LayoutMinHeight: =16
                  LayoutMinWidth: =16
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                Children:
                  - btnCancel:
                      Control: Classic/Button@2.2.0
                      Properties:
                        Text: ="Cancel"
                        Size: =13
                        Font: =Font.'Segoe UI'
                        Fill: =RGBA(255, 255, 255, 1)
                        Color: =RGBA(13, 44, 84, 1)
                        BorderColor: =RGBA(200, 210, 225, 1)
                        HoverFill: =RGBA(245, 246, 248, 1)
                        RadiusTopLeft: =6
                        RadiusTopRight: =6
                        RadiusBottomLeft: =6
                        RadiusBottomRight: =6
                        OnSelect: =Back()
                  - btnConfirm:
                      Control: Classic/Button@2.2.0
                      Properties:
                        Text: ="Confirm"
                        Size: =13
                        Font: =Font.'Segoe UI'
                        Fill: =RGBA(13, 44, 84, 1)
                        Color: =RGBA(255, 255, 255, 1)
                        HoverFill: =RGBA(8, 30, 60, 1)
                        RadiusTopLeft: =6
                        RadiusTopRight: =6
                        RadiusBottomLeft: =6
                        RadiusBottomRight: =6
                        OnSelect: |
                          =UpdateContext({locConfirmed: true});
                          Back()

Example B: Full Screen with Sidebar (complete shell)

yamlCopy code
Screens:
  ScnExample:
    Properties:
      OnVisible: |
        =ClearCollect(colStatusOptions, {Value: "All"}, {Value: "Open"}, {Value: "Closed"});
        UpdateContext({locSearch: "", locFilterStatus: "All"})
    Children:
      - conShell:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            Width: =Parent.Width
            Height: =Parent.Height
            LayoutDirection: =LayoutDirection.Horizontal
            Fill: =RGBA(0, 0, 0, 0)
            LayoutMinHeight: =16
            LayoutMinWidth: =16
            RadiusTopLeft: =0
            RadiusTopRight: =0
            RadiusBottomLeft: =0
            RadiusBottomRight: =0
          Children:
            - conSidebar:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  Width: =230
                  FillPortions: =0
                  Fill: =RGBA(13, 44, 84, 1)
                  LayoutDirection: =LayoutDirection.Vertical
                  LayoutMinHeight: =16
                  LayoutMinWidth: =16
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                Children:
                  - conNavItem1:
                      Control: GroupContainer@1.5.0
                      Variant: AutoLayout
                      Properties:
                        Height: =44
                        FillPortions: =0
                        Fill: =RGBA(255, 255, 255, 0.08)
                        LayoutDirection: =LayoutDirection.Horizontal
                        LayoutAlignItems: =LayoutAlignItems.Center
                        LayoutGap: =12
                        PaddingLeft: =16
                        LayoutMinHeight: =16
                        LayoutMinWidth: =16
                        RadiusTopLeft: =0
                        RadiusTopRight: =0
                        RadiusBottomLeft: =0
                        RadiusBottomRight: =0
                      Children:
                        - icnNavItem1:
                            Control: Classic/Icon@2.5.0
                            Properties:
                              Icon: =Icon.Waffle
                              Color: =RGBA(255, 255, 255, 1)
                              Width: =18
                              Height: =18
                        - lblNavItem1:
                            Control: Label@2.5.1
                            Properties:
                              Text: ="DASHBOARD"
                              Size: =11
                              Font: =Font.'Segoe UI'
                              Color: =RGBA(255, 255, 255, 1)
                              FontWeight: =FontWeight.Semibold
            - conMain:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  Fill: =RGBA(245, 246, 248, 1)
                  LayoutDirection: =LayoutDirection.Vertical
                  LayoutMinHeight: =16
                  LayoutMinWidth: =16
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                Children:
                  - conTopBar:
                      Control: GroupContainer@1.5.0
                      Variant: AutoLayout
                      Properties:
                        Height: =60
                        FillPortions: =0
                        Fill: =RGBA(255, 255, 255, 1)
                        LayoutDirection: =LayoutDirection.Horizontal
                        LayoutAlignItems: =LayoutAlignItems.Center
                        LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
                        PaddingLeft: =24
                        PaddingRight: =24
                        LayoutMinHeight: =16
                        LayoutMinWidth: =16
                        RadiusTopLeft: =0
                        RadiusTopRight: =0
                        RadiusBottomLeft: =0
                        RadiusBottomRight: =0
                      Children:
                        - lblBreadcrumb:
                            Control: Label@2.5.1
                            Properties:
                              Text: ="APP  /  SCREEN"
                              Size: =12
                              Font: =Font.'Segoe UI'
                              Color: =RGBA(100, 116, 139, 1)
                  - conBody:
                      Control: GroupContainer@1.5.0
                      Variant: AutoLayout
                      Properties:
                        Fill: =RGBA(245, 246, 248, 1)
                        LayoutDirection: =LayoutDirection.Vertical
                        LayoutGap: =16
                        PaddingTop: =32
                        PaddingBottom: =32
                        PaddingLeft: =32
                        PaddingRight: =32
                        LayoutMinHeight: =16
                        LayoutMinWidth: =16
                        RadiusTopLeft: =0
                        RadiusTopRight: =0
                        RadiusBottomLeft: =0
                        RadiusBottomRight: =0
                      Children:
                        - lblPageTitle:
                            Control: Label@2.5.1
                            Properties:
                              Text: ="Screen Title."
                              Size: =28
                              FontWeight: =FontWeight.Bold
                              Color: =RGBA(15, 23, 42, 1)
                              Font: =Font.'Segoe UI'
                        - lblPageSubtitle:
                            Control: Label@2.5.1
                            Properties:
                              Text: ="A short description of this screen."
                              Size: =13
                              FontWeight: =FontWeight.Normal
                              Color: =RGBA(100, 116, 139, 1)
                              Font: =Font.'Segoe UI'

Example C: Standalone Form Screen

yamlCopy code
Screens:
  ScnRequestForm:
    Properties:
      OnVisible: |
        =UpdateContext({locMode: "New"})
    Children:
      - conFormShell:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            Width: =Parent.Width
            Height: =Parent.Height
            LayoutDirection: =LayoutDirection.Vertical
            Fill: =RGBA(245, 246, 248, 1)
            LayoutMinHeight: =16
            LayoutMinWidth: =16
            RadiusTopLeft: =0
            RadiusTopRight: =0
            RadiusBottomLeft: =0
            RadiusBottomRight: =0
          Children:
            - conFormHeader:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  Height: =60
                  FillPortions: =0
                  Fill: =RGBA(255, 255, 255, 1)
                  LayoutDirection: =LayoutDirection.Horizontal
                  LayoutAlignItems: =LayoutAlignItems.Center
                  LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
                  PaddingLeft: =24
                  PaddingRight: =24
                  LayoutMinHeight: =16
                  LayoutMinWidth: =16
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                Children:
                  - lblFormTitle:
                      Control: Label@2.5.1
                      Properties:
                        Text: ="New Request."
                        Size: =28
                        FontWeight: =FontWeight.Bold
                        Color: =RGBA(15, 23, 42, 1)
                        Font: =Font.'Segoe UI'
            - conFormBody:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  Fill: =RGBA(245, 246, 248, 1)
                  LayoutDirection: =LayoutDirection.Vertical
                  LayoutGap: =16
                  PaddingTop: =24
                  PaddingBottom: =24
                  PaddingLeft: =32
                  PaddingRight: =32
                  LayoutMinHeight: =16
                  LayoutMinWidth: =16
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                Children:
                  - conFieldTitle:
                      Control: GroupContainer@1.5.0
                      Variant: AutoLayout
                      Properties:
                        FillPortions: =0
                        Fill: =RGBA(0, 0, 0, 0)
                        LayoutDirection: =LayoutDirection.Vertical
                        LayoutGap: =4
                        LayoutMinHeight: =16
                        LayoutMinWidth: =16
                        RadiusTopLeft: =0
                        RadiusTopRight: =0
                        RadiusBottomLeft: =0
                        RadiusBottomRight: =0
                      Children:
                        - lblTitle:
                            Control: Label@2.5.1
                            Properties:
                              Text: ="Title"
                              Size: =12
                              FontWeight: =FontWeight.Semibold
                              Color: =RGBA(71, 85, 105, 1)
                              Font: =Font.'Segoe UI'
                        - txtTitle:
                            Control: Classic/TextInput@2.3.2
                            Properties:
                              HintText: ="Enter a title"
                              Font: =Font.'Segoe UI'
                              Size: =13
            - conFormActions:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  Height: =64
                  FillPortions: =0
                  Fill: =RGBA(255, 255, 255, 1)
                  LayoutDirection: =LayoutDirection.Horizontal
                  LayoutJustifyContent: =LayoutJustifyContent.End
                  LayoutAlignItems: =LayoutAlignItems.Center
                  LayoutGap: =8
                  PaddingRight: =24
                  LayoutMinHeight: =16
                  LayoutMinWidth: =16
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                Children:
                  - btnCancel:
                      Control: Classic/Button@2.2.0
                      Properties:
                        Text: ="Cancel"
                        Size: =13
                        Font: =Font.'Segoe UI'
                        Fill: =RGBA(255, 255, 255, 1)
                        Color: =RGBA(13, 44, 84, 1)
                        BorderColor: =RGBA(200, 210, 225, 1)
                        HoverFill: =RGBA(245, 246, 248, 1)
                        RadiusTopLeft: =6
                        RadiusTopRight: =6
                        RadiusBottomLeft: =6
                        RadiusBottomRight: =6
                        OnSelect: =Back()
                  - btnSave:
                      Control: Classic/Button@2.2.0
                      Properties:
                        Text: ="Save"
                        Size: =13
                        Font: =Font.'Segoe UI'
                        Fill: =RGBA(13, 44, 84, 1)
                        Color: =RGBA(255, 255, 255, 1)
                        HoverFill: =RGBA(8, 30, 60, 1)
                        RadiusTopLeft: =6
                        RadiusTopRight: =6
                        RadiusBottomLeft: =6
                        RadiusBottomRight: =6
                        OnSelect: |
                          =Patch('My List', Defaults('My List'), {Title: txtTitle.Text});
                          Back()

Step 6: Generate the YAML

Produce the complete YAML starting from Screens:. Follow the canonical examples in Step 5 exactly for syntax. Include:

• The correct component pattern based on Step 1
• All navigation items if a sidebar is present, with exactly one active
• Full top bar if applicable
• Complete page body with all required controls
• All OnVisible logic flat under the screen name (not inside a Properties: block)
• All OnSelect logic for buttons and nav items

Output format requirements — both are mandatory:

1. Always wrap the YAML in a fenced code block using ```yaml and ```. Plain prose or unformatted output collapses indentation and produces an unimportable file.
2. Use exactly 2 spaces per indent level throughout. No tabs. No 4-space indents. Every nesting level adds exactly 2 spaces. Control bodies inside Children: are indented 4 spaces after the - list marker.

Do not add # YAML comments inside the output block.

Before emitting each line, verify:

1. Is the YAML inside a ```yaml code fence? If not, wrap it now
2. Is indentation correct — 2 spaces per level, 4 spaces after - for control body? Fix before continuing
3. Is the value quoted? Remove the quotes
4. Does the value start with =? Add it (except for Control: and Variant:)
5. Is the key ControlType:? Change to Control:
6. Is Variant: inside Properties:? Move it outside as a sibling of Control:
7. Is this Height, Width, or DisplayName at screen level? Delete it
8. Is there a Properties: wrapper at screen level? Delete it
9. Is there a BorderRadius: property? Replace with four Radius* properties

Step 7: Document Assumptions

After the YAML block, output:

Copy code
**Data Source Assumptions**
- `ColumnName` -> what this field represents

**Design Assumptions**
- [layout choices, status values, nav items, sizing, etc.]

Validation Checklist

Before outputting YAML, confirm every item is true:

• YAML is output inside a ```yaml fenced code block — never as plain unformatted text
• Indentation is exactly 2 spaces per level; control bodies inside Children: are 4 spaces after the - list marker
• No FontSize: property anywhere — font size is always Size: (PA2108 otherwise)
• No property value is wrapped in quotes
• Every value inside Properties: starts with =
• Every control uses Control: not ControlType:
• Every Control: value includes the version suffix (e.g. GroupContainer@1.5.0)
• Variant: is a sibling of Control:, not inside Properties:
• Component type determined first: dialogs/popups/components use bare container tree (no Screens: wrapper); only full standalone screens use Screens:
• Screen-level Properties: block (if present) contains ONLY OnVisible, OnHidden, or LoadingSpinnerColor — Fill, Height, Width, and DisplayName are NOT valid screen properties
• Children: is a SIBLING of Properties: at screen level, never nested inside Properties:
• Fill is on the root container inside Children:, NOT in the screen-level Properties: block
• No BorderRadius: — only RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, RadiusBottomRight
• Every GroupContainer has all four Radius* properties
• Fixed-size containers have FillPortions: =0
• AutoLayout containers include LayoutMinHeight: =16 and LayoutMinWidth: =16
• ManualLayout used only for overlays/backdrops and status badges
• Any formula containing { (record literal) uses | block scalar — inline OnSelect: =UpdateContext({...}) breaks YAML parsing with "invalid mapping"
• Multi-line formulas use |- block scalar with = on the first line inside the block
• OnVisible / OnSelect with multiple statements use |; no trailing semicolon after the last statement
• No Search() or in operator — only StartsWith() and Filter()
• No emoji or special Unicode in any Text value
• No DisplayName property anywhere
• No # YAML comments inside the YAML block
• Font is =Font.'Segoe UI' throughout
• Page title label text ends with a full stop
• Data source and design assumptions documented after the YAML block

References

• Power Apps YAML source format
• Power Fx delegable functions for SharePoint
• Power Apps controls reference