PowercademyPowercademy
For BusinessesSuccess KitBlogM-AI Accelerator
Log inStart for free
For BusinessesSuccess KitBlogM-AI Accelerator
Log inStart for free
PowercademyPowercademy

The training platform for Power Platform professionals.

Free Success Kit

Cheat sheets, guides & frameworks - plus the weekly briefing.

Get the free Success Kit

Product

  • Courses
  • Community
  • News
  • Blog

For Businesses

  • Overview
  • Workshops
  • Advisory
  • Implementation

Legal

  • Privacy Policy
  • Terms of Service

© 2026 Powercademy. All rights reserved.

All posts

7 Model-Driven App Design Secrets

Howdang Rashid

Saturday, 22 August 2026 · 2 min read

Model-driven apps generate their own UI - which is both their superpower and why so many look identical and slightly dated. These seven design secrets are the gap between a default MDA and one users actually enjoy, from five-minute wins to the new frontier of generative pages.

Model-driven app design secrets carousel

The full carousel with linked tutorials is free in the Powercademy Success Kit.


What are the quick wins?

1. Child subgrids - view related data directly inside your views (Lisa Crosbie's video covers the how). Users stop clicking into records just to see their children.

2. Icons in navigation - replace the default jigsaw-puzzle pieces with relevant icons: app editor → select the view → Settings → Select icon. Crucially, add each icon as a web resource so it survives your deployments.

3. Emojis - in tabs and field labels for a lighter, more scannable app. Don't overdo it.

4. Modern theming - customise title bars to match your organisation's brand (Riccardo Gregori's article is the reference).


What are the power moves?

5. Custom pages - canvas-style design and different data sources inside your MDA (Matthew Devaney's full guide is the deep dive).

6. PCF controls - extend forms with custom controls for unique needs; the PCF Gallery has a library ready to browse. Use with caution and prefer out-of-the-box first.

7. Generative pages - full React and TypeScript flexibility inside model-driven apps, generated from a description. Flexibility like MDAs have never seen, and surprisingly easy to put together.

Howdang’s Implementation Tip

Do secrets 1-4 on every app you ship - they cost an hour total and users notice immediately. Save 5-7 for real requirements: the discipline of "out-of-the-box first, extensions when justified" is itself the biggest design secret in the model-driven world.


FAQ

Why do navigation icons need to be web resources?

So they travel with your solution: icons added ad hoc get lost between environments, while web resources deploy like any other component. Small habit, saves a confused prod deploy later.

Custom page or generative page for a tailored screen?

Need external connectors or Power Fx skills on tap → custom page. Dataverse-only with modern UI ambitions → generative page, and you get editable React out. Both live happily in one app.

Are PCF controls risky?

They're code you now own - maintenance, upgrades, and testing included. The gallery's community controls vary in quality, so vet before adopting, and always ask whether a standard control plus good configuration gets you close enough.

Do these tricks survive Microsoft's updates?

Yes - all seven use supported extension points (settings, web resources, pages, PCF), not hacks. That's exactly why they're the secrets worth learning.


The full carousel is in the Powercademy Success Kit - free, along with hundreds of other cheat sheets, roadmaps, and guides for Microsoft professionals.

Keep reading

The Model-Driven Apps Mastery Roadmap: 9 Stages

Data modelling, forms and views, business logic, security roles, UX and navigation, JavaScript, custom pages and PCF, data import/export, and ALM - the complete model-driven mastery path.

How to Add JavaScript to Model-Driven App Forms (Step by Step)

The four-step pattern for code on model-driven forms: write the .js file, add it as a web resource, attach the library to your form, and wire it to an event with execution context.

Custom Pages vs Generative Pages vs Code Apps: Extending Model-Driven Apps

Power Fx pages, AI-generated React pages, or full pro-code apps - three ways to extend model-driven apps beyond forms and views, and how to choose between them.