# Model Driven Custom Pages

> Design and implement Microsoft Dataverse model-driven app custom pages. Use for custom page architecture, canvas-app integration, responsive design, Power Fx expressions, and code component extensibility.

- **Type:** Skill
- **Install:** `agentstack add skill-ryanmakesandbreaksstuff-custom-codex-claude-plugins-and-skills-model-driven-custom-pages`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [RyanMakesAndBreaksStuff](https://agentstack.voostack.com/s/ryanmakesandbreaksstuff)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [RyanMakesAndBreaksStuff](https://github.com/RyanMakesAndBreaksStuff)
- **Source:** https://github.com/RyanMakesAndBreaksStuff/Custom-Codex-Claude-Plugins-and-Skills/tree/main/model-driven-custom-pages

## Install

```sh
agentstack add skill-ryanmakesandbreaksstuff-custom-codex-claude-plugins-and-skills-model-driven-custom-pages
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

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

2. **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?

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

4. **Design data binding:**
   - Select tables and connectors
   - Plan form/gallery data sources
   - Define navigation parameters
   - Map Power Fx expressions for interactivity

5. **Extensibility decisions:**
   - Evaluate canvas components (recommended first)
   - Select code components (PCF) only if advanced customization needed
   - Plan styling alignment with Unified Interface theme

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

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

```powerappsfl
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:**

```powerappsfl
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:**

```powerappsfl
Navigate(Defaults(Accounts))
```

**Navigate with field defaults:**

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

**Navigate between custom pages:**

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

**Navigate back (closes custom page unless last page):**

```powerappsfl
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):**

```powerappsfl
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](https://github.com/RyanMakesAndBreaksStuff)
- **Source:** [RyanMakesAndBreaksStuff/Custom-Codex-Claude-Plugins-and-Skills](https://github.com/RyanMakesAndBreaksStuff/Custom-Codex-Claude-Plugins-and-Skills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-ryanmakesandbreaksstuff-custom-codex-claude-plugins-and-skills-model-driven-custom-pages
- Seller: https://agentstack.voostack.com/s/ryanmakesandbreaksstuff
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.