powerapps-canvas-yaml-generator

name	powerapps-canvas-yaml-generator
description	Generates valid, importable Power Apps Source Code YAML for canvas app screens. Use when asked to create YAML, scaffold, or modify any Power Apps canvas app screen — including full screens, dialogs, forms, galleries, detail views, dashboards, or any layout container — or when asked to generate Power Fx formulas or produce Power Apps source code for import.

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

Type	Screens: wrapper?	When to use
Full screen with sidebar	YES	A primary app screen with global navigation
Full screen without sidebar	YES	A login, splash, or single-purpose screen
Dialog / overlay / popup	NO	A confirmation, quick-entry panel, or modal overlaid on another screen
Reusable component / card	NO	A panel, card, or UI fragment embedded within a screen
Standalone form screen	YES	A dedicated create or edit screen without a sidebar
Gallery list screen	YES	A searchable, filterable list of records
Detail view screen	YES	A read-only or editable single-record view
Dashboard screen	YES	A summary screen with KPI cards
Custom / other	Ask	Describe it

---

Step 2: Design System

Colours

Token	Value	Use
Navy primary	RGBA(13, 44, 84, 1)	Sidebar fill, primary buttons
Navy dark hover	RGBA(8, 30, 60, 1)	Primary button hover
Page background	RGBA(245, 246, 248, 1)	Main content area
White	RGBA(255, 255, 255, 1)	Cards, panels, top bar
Border	RGBA(226, 232, 240, 1)	Card borders, dividers
Table header bg	RGBA(248, 250, 252, 1)	Gallery header row
Text primary	RGBA(15, 23, 42, 1)	Page titles, headings
Text secondary	RGBA(71, 85, 105, 1)	Body text
Text muted	RGBA(100, 116, 139, 1)	Breadcrumbs, subtitles
Nav active fill	RGBA(255, 255, 255, 0.08)	Active nav item background
Nav inactive fill	RGBA(0, 0, 0, 0)	Inactive nav item background
Nav label active	RGBA(255, 255, 255, 1)	Active nav label
Nav label inactive	RGBA(255, 255, 255, 0.65)	Inactive nav label

Status Badge Colours

Category	Fill	Text
Available / Active / Success	RGBA(220, 252, 231, 1)	RGBA(22, 101, 52, 1)
Assigned / In Progress / Info	RGBA(219, 234, 254, 1)	RGBA(30, 64, 175, 1)
Pending / Warning	RGBA(254, 243, 199, 1)	RGBA(146, 64, 14, 1)
Error / Rejected / Urgent	RGBA(254, 226, 226, 1)	RGBA(185, 28, 28, 1)
Inactive / Neutral / Closed	RGBA(241, 245, 249, 1)	RGBA(71, 85, 105, 1)

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.

Use	Size value	FontWeight value
Page title	=28	=FontWeight.Bold
Panel / section title	=16	=FontWeight.Semibold
Body / button	=13	=FontWeight.Normal or =FontWeight.Semibold
Breadcrumb / small label	=12	=FontWeight.Normal
Nav label	=11	=FontWeight.Normal or =FontWeight.Semibold
Table column header	=10	=FontWeight.Semibold (ALL CAPS text)

Font: always =Font.'Segoe UI'

AutoLayout Container Properties

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

Property	Common values
LayoutDirection	=LayoutDirection.Horizontal or =LayoutDirection.Vertical
LayoutAlignItems	=LayoutAlignItems.Center, =LayoutAlignItems.Stretch, =LayoutAlignItems.Start
LayoutJustifyContent	=LayoutJustifyContent.Start, =LayoutJustifyContent.SpaceBetween, =LayoutJustifyContent.End
LayoutGap	=8, =10, =12, =16
LayoutMinHeight	=16 (set on all AutoLayout containers)
LayoutMinWidth	=16 or a meaningful minimum e.g. =100, =200
LayoutMaxHeight	=Self.AllItemsCount * Self.TemplateHeight (galleries)
PaddingTop / PaddingBottom / PaddingLeft / PaddingRight	=8, =16, =20, =24, =32
FillPortions	=0 when container has a fixed Height or Width; omit to flex-fill
AlignInContainer	=AlignInContainer.Start, =AlignInContainer.Center, =AlignInContainer.Stretch
DropShadow	=DropShadow.None (explicit no-shadow), =DropShadow.Light, =DropShadow.Regular

Gallery-specific properties:

Property	Typical value
TemplateSize	=45, =52, =60 (row height in px)
TemplatePadding	=0
LayoutMinHeight	=45 or =200
LayoutMaxHeight	=Self.AllItemsCount * Self.TemplateHeight
Height	=Self.AllItemsCount * Self.TemplateHeight

---

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.

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

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

Correct — proper 2-space indentation:

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.

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

Type	WRONG	CORRECT
String	Text: Hello	Text: ="Hello"
Number	Width: 230	Width: =230
Boolean	Visible: true	Visible: =true
Colour	Fill: RGBA(13,44,84,1)	Fill: =RGBA(13, 44, 84, 1)
Enum	FontWeight: FontWeight.Bold	FontWeight: =FontWeight.Bold
Formula	Height: Parent.Height	Height: =Parent.Height

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.

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

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

# 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:.

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

Screens:
  DlgConfirm:
    Children:
      - conDialogBackdrop: ...

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

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

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

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:

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:

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

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

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

# 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

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

Purpose	Control declaration
Layout container (stack/flex)	Control: GroupContainer@1.5.0 + Variant: AutoLayout
Grid layout container	Control: GroupContainer@1.5.0 + Variant: GridLayout
Overlay / badge (X,Y positioned)	Control: GroupContainer@1.5.0 + Variant: ManualLayout
Button	Control: Classic/Button@2.2.0
Single-line text input	Control: Classic/TextInput@2.3.2
Multi-line text input	Control: Classic/TextInput@2.3.2 + Mode: =TextMode.MultiLine in Properties
Classic dropdown	Control: Classic/ComboBox@2.3.0
Modern dropdown	Control: ModernCombobox@1.1.0
Date picker	Control: Classic/DatePicker@2.6.0
Icon	Control: Classic/Icon@2.5.0
Label	Control: Label@2.5.1
Vertical gallery	Control: Gallery@2.15.0 + Variant: Vertical
Canvas component (reusable)	Control: CanvasComponent + ComponentName: myComponentName
Toggle	Control: Classic/Toggle@2.2.0
Checkbox	Control: Classic/Checkbox@2.1.0

GridLayout container properties:

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

CanvasComponent usage:

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

- 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

Element	Prefix	Example
Containers	con	conTopBar, conDialogPanel
Labels	lbl	lblPageTitle, lblFieldName
Buttons	btn	btnSave, btnCancel
Icons	icn	icnSearch, icnClose
Galleries	gal	galRecordList
Text inputs	txt	txtSearch, txtName
Combo boxes	cmb	cmbStatusFilter
Date pickers	dtp	dtpStartDate
Toggles	tog	togIsActive
Checkboxes	chk	chkAgree
Context variables	loc	locSearchText, locSelectedRecord
Collections	col	colStatusOptions
Global variables	var	varCurrentUser

---

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)

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

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

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:

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