Riccardo Gregori

Posted on May 26

Extreme Makeover: Model Driven App edition

#powerplatform #powerapps #powerfuldevs #ui

If you've ever delivered a Model-Driven App in Microsoft Power Platform, chances are you've heard this before: "It looks too plain," or "Can we customize the layout more?" While it's true that Model-Driven Apps follow a consistent, structured UI that prioritizes functionality and data integrity, this often leads to a perception that the interface is rigid or uninspired.

But here's the good news: while you can’t redesign the entire layout from scratch, you can dramatically enhance the look, feel, and usability of your apps—often without writing a single line of code. With the right configuration choices, modern theming tools, and UX-conscious design patterns, you can deliver applications that are not only effective but also visually appealing and intuitive.

In this post, we’ll explore practical techniques and hidden gems to give your Model-Driven Apps a well-deserved facelift—without breaking the platform’s best practices.

Disclaimer: I know the list below can be extended with additional tips and suggestions, but I find it already too long 😅. Drop a comment below if you think I missed something relevant.

🎨 Theme Customization: First Impressions Matter

A visually cohesive theme is the foundation of any modern application. Thankfully, the Power Platform is evolving, and theming options are getting more powerful.

🔧 Modern Theming

The new Modern Theming experience allows you to configure the title bar colors (default, hover, pressed).

We talked about it here. The standard experience to tweak modern themes is quite tricky to use, but XrmToolbox tools like _n.ModernThemeBuilder come to the rescue.

🧠 Version 1.2025.5.4 of the tool is shipped with a really useful AI-powered feature that is able to generate a theme starting from an image (e.g. the company logo, or a screenshot of the company home page).

🧱 Legacy Theme Options

Still supported and useful for branding, you can upload a logo (PNG, JPG, or animated GIF – max 200x50px) to reflect corporate branding or dynamic visual cues.

Even in this case, community tools streamline the activity. If you have the image you want to use as logo in a webresource, you can simply use:

pacx webresources setEnvImage --name your_webresource_name --cloneTheme

To set your logo!

🤞🏻 Preview features

In preview, Microsoft released the possibility to customize:

Font family used by your apps
Accent colors across UI components

Stay tuned because an update on _n.ModernThemeBuilder will be shipped soon, with capabilities to work with this new feature.

💡 Header and Navigation Refresh

The UI tricks described above are environment-wide, it means that are applied for all apps deployed in the environment.

Talking about app-specific settings, using the Settings > Features menu on the App Editor page, you can also enable the new Header and Navigation Refresh for a cleaner Fluent UI look.

It changes the UI of your MDA from this:

To this:

As you can notice from the above screenshots:

The navbar is now placed at the same level of the main background.
The default color for the header is the same of the page background (it can be changed via theme).
The form Ribbon / Command bar is collapsed in the form header, leaving more room for actual data

🧭 Sitemap Design: Less is More

The sitemap defines how users navigate your app. A clean, purposeful sitemap is key to great UX.

✅ Best Practices

🧹 Avoid clutter – limit the number of visible links
🚫 Avoid areas unless necessary – users struggle to find them. Prefer the creation of role-specific apps (e.g., a Configurator app)
📂 Use collapsible groups to save space when you have more than 10-15 menu items.
❌ Hide "Home", "Recent", "Pinned" if they’re not functionally needed
🎨 Don't forget to set the icons on your custom tables. Use meaningful, colorful icons to improve usability.

🛠️ Tools to Help

The process of applying icons to Dataverse tables has become pretty straightforward with tools such as XrmToolbox Iconator or PACX. My personal best, 3 click, way (we talked about it here):

Use any free image library (my favorite is Syncfusion Metro Studio) and save all the images I need calling them as tablename.svg
Call pacx wr push to upload the images as webresources to the Dataverse
Call pacx wr applyIcons to automatically match the tables needing an icon, with the corrisponding webresource.

And le jeux sont faits!

📝 Form Layout: From Functional to Fantastic

Forms are where users interact with data. Improving them can instantly uplift your app's professionalism.

🌟 General Tips

🧠 Primary field: Always remember to fill it with a proper value. There are cases where a primary field is meaningless (e.g. on explicit N-N relationship tables): use AutoNumber when in doubt
🗃️ Move audit/technical fields (Created By, Created On, ...) to a dedicated Administration tab if not functionally needed.

PACX helps on this too.

pacx forms clean

command will automatically:

set the name attribute on each unnamed tab, starting from the tab label
set the name attribute on each unnamed section, starting from the parent tab name and the section label
Remove the "Owner" field from the first tab, if present.
Create a new tab called "Administration", with a single untitled 2-columns section, containing "Created On", "Created By", "Modified On", "Modified By" and "Owner" fields.

🧱 Layout Optimization

🤼 In case of crowded tabs
- 🧩 Prefer a 3-column layout, with central column slightly larger than the others
- 🏷️ Set labels to appear above fields for readability and mobile support
😀 Use emojis on tab/section labels for semantic clarity and visual effectiveness.

📝 Column definition

In case of OptionSet columns
- 🎨 Remember to set background colors for each option. Background colors can be used by Power Apps Grid Component to improve the look and feel of the typically-boring Dataverse grids.
- 😀 Use emojis on option set labels

For lookups
- 🔀 Use polymorphic lookups where relevant (e.g., Customer field) to avoid unnecessary duplicated fields in forms and grids.

It's a feature that's been around for a while, but I hardly ever see anyone using it... Maybe because as of now it's not possible to create polymorphic lookups via maker portal.

🚨 PACX comes to the rescue even on this topic: pacx rel poly it's an useful command namespace designed used to streamline creation and manipulation of polymorphic lookups, from command line.

📊 Grids: Smarter Data Views with Power Apps Grid Control

The new Power Apps Grid Control adds a modern, interactive experience to traditional list views.

🚀 Features Include

Infinite scrolling (configurable... there are scenarios in which paging is required. You can choose which kind of paging technique to use, for each grid)
Inline editing
Possibility to disable multiple selection
Extremely customizable. See the blog posts from Vinicius Basile on this topic, its Power Apps Grid Extension toolkit is impressive!

💡 Combine grid styling with themed OptionSet colors and emojis for maximum impact!

🚀 Going Beyond: When You're Ready for the Next Level

All the techniques we've covered—modern theming, thoughtful sitemaps, optimized forms, and dynamic grids—can take your Model-Driven Apps from bland to brilliant without writing any code. But if you're ready to go further, the Power Platform has even more to offer.

🎯 Mix and Match: Standard Meets Custom

Model-Driven Apps don’t have to live in a silo. You can seamlessly embed Canvas Apps or Custom Pages to unlock rich UI components and fluid interactivity:

📊 Chart controls for visual storytelling
🎥 Video players for embedded training or media content
👤 Avatars and badges for gamified experiences

These integrations give you pixel-level control where it matters most—right inside your enterprise-grade application.

🧱 Build Your Layer: PCFs and Web Resources

Need even more? For developers comfortable with React and TypeScript, the sky’s the limit:

Create fully custom PCFs (Power Apps Component Framework) to redefine how fields and datasets behave
Inject rich Web Resources that elevate user engagement with animations, visuals, or logic.

✨ These techniques require more advanced skills—but the payoff is huge. When used right, they transform apps into professional-grade digital experiences.

With the right blend of native tools and advanced extensions, your Model-Driven Apps can be fast, functional, and visually stunning—no compromises required.

So go ahead. Mix the polish of out-of-the-box features with the power of custom enhancements. Your users will thank you.

🧰 Wrapping Up: It's Not Just About Looks

While Model-Driven Apps are inherently structured, they aren’t set in stone. With thoughtful configuration and a few modern tools, you can craft apps that are both powerful and polished—without writing custom code.

Theme it.
Trim the sitemap.
Rethink your forms.
Leverage modern controls.
Automate your polish with the right tools.

So the next time someone says Model-Driven Apps are "boring," just smile—you're about to prove them wrong.

💬 Have your own makeover techniques? Share them in the comments or connect with me on LinkedIn
🔧 *Looking for the full set of pacx commands? Check out the official pacx CLI on GitHub.