🚀 Navigating Between Custom Pages in Model-Driven Power Apps: Elevating UI/UX for Makers

As Power Platform makers, we’re always looking for ways to deliver more intuitive, responsive, and engaging user experiences. With Custom Pages in Model-driven apps, Microsoft has given us a powerful tool to bridge the gap between canvas-like flexibility and model-driven structure.

In this post, I’ll walk you through how to navigate between Custom Pages within a Model-driven app context and why this matters for building modern, user-centric applications.

🧭 What Are Custom Pages?

Custom Pages are a hybrid feature that brings the pixel-perfect design capabilities of canvas apps into the structured world of model-driven apps. They allow makers to:

• Design rich, responsive layouts using the canvas app designer.
• Embed these pages seamlessly into model-driven apps.
• Use them for dashboards, dialogs, or full-page experiences.

🔄 Navigating Between Custom Pages

One of the most powerful features of Custom Pages is the ability to navigate between them—just like you would in a canvas app. This opens up a world of possibilities for creating multi-step processes, custom workflows, or guided experiences.

✅ How to Navigate Between Custom Pages

You can use the Launch function in Power Fx to move between Custom Pages. Here’s a basic example:

Launch("https://{your_host}.crm4.dynamics.com/main.aspx?appid={model-driven_app_id}&pagetype=custom&name={custom_page_logical_name}",{},LaunchTarget.Replace)

• First argument is the url you want to redirect to. For Custom Pages it should have the schema shown in example above.
• Second argument is a record of field values which will be passed as query parameters. Depending on the navigation case, this record could be empty or pass the "id" field and a record guid as a value (shown in the example below).
• Third argument is an Enum for the navigation target:
  • New: url is opened in a new tab
  • Replace: url is opened in the current tab

This can be triggered by a button, icon, or any control with an OnSelect property.

🔗 Passing Parameters

You can also pass record context between pages:

Launch("https://{your_host}.crm4.dynamics.com/main.aspx?appid={model-driven_app_id}&pagetype=custom&name={custom_page_logical_name}",{id:{item_guid}},LaunchTarget.Replace)

Then, in the destination page, use Param("recordId") to retrieve the value for the id.

🎯 Why This Matters for UI/UX

Here’s how this navigation capability enhances the user experience:

1. Guided Experiences Create wizard-like flows that guide users through complex tasks step-by-step, reducing cognitive load.

2. Contextual Interfaces Show only the relevant information or controls based on user input or role, improving clarity and reducing clutter.

3. Faster Interactions Avoid full page reloads or unnecessary navigation to different forms or views—everything feels smoother and more app-like.

4. Custom Dialogs Use Custom Pages as modal dialogs for confirmations, data entry, or quick actions—fully styled and responsive.

🛠️ Best Practices for Makers

• Keep it consistent: Use a consistent design language across Custom Pages and model-driven components.
• Use parameters wisely: Pass only the data you need to keep things performant.
• Test responsiveness: Ensure your Custom Pages look great on all screen sizes.
• Leverage telemetry: Use Monitor and Application Insights to track how users interact with your pages.

🌟 Final Thoughts

Navigating between Custom Pages in Model-driven apps is more than just a technical trick—it’s a design strategy. It empowers makers to build modern, fluid, and user-friendly applications that feel less like legacy systems and more like the apps users love.

If you haven’t explored Custom Pages yet, now’s the time. Start small, experiment with navigation, and see how it transforms your app’s UX.