Model Driven Custom Pages

Model-Driven Custom Pages

Overview

Use this skill when designing and implementing custom pages for Microsoft Power Apps model-driven applications. Custom pages bring canvas app capabilities into model-driven apps with a single-screen architecture optimized for co-development, performance, and responsive design.

This skill is GA-focused for core custom page capabilities. Features marked as preview (such as Teams model-driven apps or mobile support) are acknowledged but presented as optional extensions.

Trigger Conditions

Use this skill when requests include any of:

• custom page architecture and design strategy
• responsive layout planning with container controls
• Power Fx expressions and navigation in custom pages
• data source configuration (Dataverse, connectors, gallery/form bindings)
• code components (PCF) and canvas components integration
• styling and theme alignment with model-driven app Unified Interface
• custom page ALM, solution packaging, and performance optimization
• migration from embedded canvas apps or standalone canvas apps to custom pages
• known limitations and troubleshooting for custom pages

Key Differentiators: Custom Pages vs. Alternatives

| Approach | Best for | Limitations | Reference | | ---------------------- | ---------------------------------------------------------- | ------------------------------------- | ------------------------------------------- | | Custom page | Full-page layouts, tighter MDA integration, co-development | Single-screen default, max 25 per app | references/custom-page-architecture.md | | Embedded canvas app | Form-level canvas embedding, localized UX | Limited integration, count limits | references/custom-page-vs-alternatives.md | | Model-driven form/view | Standard CRUD, supported customizations | Less design flexibility | references/custom-page-vs-alternatives.md | | Standalone canvas app | Full canvas freedom, many screens | No model-driven integration | references/custom-page-vs-alternatives.md |

Decision Workflow

1. Confirm requirement scope:

• Is this a full page, dialog, or pane?
• What tables and data sources are needed?
• Are there responsive requirements?
• What's the integration scope with the model-driven app?

1. Evaluate custom page fit:

• Does the requirement benefit from canvas flexibility?
• Is single-screen (or managed multi-screen) acceptable?
• Is Dataverse and/or connector data sufficient?
• Are code/canvas components required?

1. Plan responsive layout:

• Choose container hierarchy (Vertical + Horizontal containers)
• Set min screen dimensions and parent container stretch properties
• Design for 300px+ minimum content width
• Apply responsive wrapping formulas

1. Design data binding:

• Select tables and connectors
• Plan form/gallery data sources
• Define navigation parameters
• Map Power Fx expressions for interactivity

1. Extensibility decisions:

• Evaluate canvas components (recommended first)
• Select code components (PCF) only if advanced customization needed
• Plan styling alignment with Unified Interface theme

1. Solution and ALM strategy:

• Define component layering (managed vs. unmanaged)
• Plan rollback and versioning approach
• Design observability and monitor points
• Consider deployment order with dependent forms/views

1. Output artifacts:

• Custom page architecture design
• Responsive layout blueprint
• Data binding and expression guide
• Implementation checklist with known issues validation

Responsive Design Playbook

Container Hierarchy Basics:

• Root Vertical Container: X=0, Y=0, Width=Parent.Width, Height=Parent.Height
• All containers below: Justify=Stretch, Align=Stretch
• Flex containers: FlexibleHeight=true or FlexibleWidth=true with Wrap=True

Responsive Wrapping (for horizontal containers with flexible height):

Direction=Horizontal
FlexibleHeight=true
VerticalOverflow=Scroll
Wrap=True
Justify=Stretch
Align=Stretch

Child control minimum width: Ensure child containers/controls have MinWidth >= 300px to allow responsive resizing.

App-level settings:

MinScreenHeight=200
MinScreenWidth=200

Custom page design size: Settings > Display > Custom size (optional, may reset layout after control addition).

Power Fx and Navigation Guide

Navigate to create a new record:

Navigate(Defaults(Accounts))

Navigate with field defaults:

Navigate(Patch(Defaults(Accounts), { 'Account Name': "My company" }))

Navigate between custom pages:

Navigate(PageName, ScreenTransition.None, { parameterName: parameterValue })

Navigate back (closes custom page unless last page):

Back()

Screen management (if multiple screens enabled):

• Navigate() adds to screen stack
• Back() removes from screen stack
• Last screen closes the custom page

Styling and Theme Alignment

Unified Interface theme defaults:

• Font upscaling factor: 1.33x (divide target by 1.33)
• Primary button color: RGBA(41,114,182,1) with white text
• Theme automatically applied; explicit theme selection removed

Font size mapping: | Element | Target | Use | |---|---|---| | Page title | 17px | 12.75px | | Normal labels | 14px | 10.52px | | Small labels | 12px | 9.02px |

Button styling (primary):

Color=RGBA(255,255,255,1)
Fill=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

Supported Controls and Components

Modern controls (GA): Label, Text Box, Date Picker, Button, Combo Box, Check Box, Toggle, Radio Group, Slider, Rating, Rich Text Editor, Icon, Image

Layout: Vertical Container, Horizontal Container (with responsive properties)

Data: Edit Form, Display Form, Gallery

Extensibility: Code Components (PCF), Canvas Components

See references/supported-controls.md for full feature parity details.

Code-Generation Rules

• Use only documented Power Fx functions and properties; avoid legacy canvas app patterns.
• Prefer canvas components over PCF; escalate to PCF only for advanced interactions or custom rendering.
• Keep expressions in control properties (OnSelect, ItemsSource) minimal and readable; move complex logic to canvas components.
• Use explicit error handling and user-facing messages for data operations.
• Validate responsive behavior on mobile width (300px test).
• Theme colors and font sizes must align with Unified Interface defaults.
• Never manipulate DOM directly; use canvas control APIs only.
• Test accessibility (tab navigation, screen reader compatibility).

Known Limitations & Validation Checklist

Known limitations (from Microsoft Learn):

• Max 25 custom pages per model-driven app
• Single screen by default; multiple screens available but require manual screen stack management
• First app launch after publish may have increased wait time (limited to first user, first load)
• Custom pages in Teams and mobile are preview features
• See references/known-issues.md for complete list

Before handoff, validate:

• ✓ No embedded DOM manipulation (canvas-only API usage)
• ✓ Responsive testing at 300px, tablet, and desktop widths
• ✓ Tab navigation and keyboard accessibility tested
• ✓ Styling aligned with Unified Interface theme
• ✓ All data operations include error handling
• ✓ Code/canvas component lifecycle cleanup implemented
• ✓ Solution packaging and ALM strategy documented
• ✓ No deprecated or unsupported control usage
• ✓ Performance tested (form load, expression evaluation, connector calls)
• ✓ Custom page count < 25 verified in app design

Learn MCP Retrieval Playbook

Start with targeted discovery:

• microsoft_docs_search(query="power apps model-driven custom pages overview")
• microsoft_docs_search(query="custom page design responsive layout power apps")
• microsoft_docs_search(query="model-driven app custom page PowerFx navigation")
• microsoft_docs_search(query="custom page code components canvas components")

Deepen with full page reads:

• microsoft_docs_fetch(url="https://learn.microsoft.com/power-apps/maker/model-driven-apps/model-app-page-overview")
• microsoft_docs_fetch(url="https://learn.microsoft.com/power-apps/maker/model-driven-apps/design-page-for-model-app")
• microsoft_docs_fetch(url="https://learn.microsoft.com/power-apps/maker/model-driven-apps/add-page-to-model-app")
• microsoft_docs_fetch(url="https://learn.microsoft.com/power-apps/maker/model-driven-apps/page-powerfx-in-model-app")

Code examples and best practices:

• microsoft_code_sample_search(query="Power Apps custom page example", language="typescript")
• microsoft_code_sample_search(query="Dataverse Web API model-driven app", language="csharp")
• microsoft_docs_search(query="model-driven app best practices performance troubleshooting")

Reference Files

• references/source-map.md — Quick reference to Microsoft Learn pages
• references/custom-page-architecture.md — Design patterns and architecture principles
• references/custom-page-vs-alternatives.md — Custom pages vs. embedded canvas, forms, views
• references/responsive-design.md — Container layout, wrapping, sizing, and testing
• references/powerfx-and-navigation.md — Navigation, expressions, screen stacks
• references/styling-and-theme.md — Unified Interface alignment, font, colors
• references/supported-controls.md — Control types, features, compatibility
• references/code-canvas-components.md — PCF and canvas component integration
• references/known-issues.md — Limitations, preview features, workarounds
• references/alm-and-solution-design.md — Packaging, ALM, managed behavior, deployment
• references/migration-patterns.md — Embedded canvas to custom pages, standalone to custom pages

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: RyanMakesAndBreaksStuff
• Source: RyanMakesAndBreaksStuff/Custom-Codex-Claude-Plugins-and-Skills
• License: MIT

Install and usage instructions live in the source repository linked above.