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.
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:
Screen or component name — what to name the output (e.g. ScnDashboard, ScnRequestForm, DlgConfirmDelete)
Component type — full screen, dialog/overlay, form, gallery list, detail view, dashboard, or other
Navigation context — if a sidebar is needed, which nav item should be active; if no sidebar is needed, say so
Screen purpose — one sentence describing what the screen or component does
Data source — SharePoint list, Dataverse table, or collection name and any known column names (if data-driven)
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
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.
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 -.
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:
RULE 5 — Screen-level structure: Properties: + Children: as siblings
Screens support an optionalProperties: 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.
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:
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
- 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):
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:
Always wrap the YAML in a fenced code block using ```yaml and ```. Plain prose or unformatted output collapses indentation and produces an unimportable file.
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:
Is the YAML inside a ```yaml code fence? If not, wrap it now
Is indentation correct — 2 spaces per level, 4 spaces after - for control body? Fix before continuing
Is the value quoted? Remove the quotes
Does the value start with =? Add it (except for Control: and Variant:)
Is the key ControlType:? Change to Control:
Is Variant: inside Properties:? Move it outside as a sibling of Control:
Is this Height, Width, or DisplayName at screen level? Delete it
Is there a Properties: wrapper at screen level? Delete it
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, ,
