Skip to Content

How to Open a PCF Control in a Modal Popup Using Custom Pages in Dynamics 365

Replace cramped classic dialogs with modern, responsive modal popups that host rich PCF controls.
31 July 2026 by
How to Open a PCF Control in a Modal Popup Using Custom Pages in Dynamics 365

Classic Dynamics 365 dialogs get the job done, but they feel dated and rigid — a small box with limited layout and almost no room for rich, interactive UI. Modern users expect more. By combining Power Apps Custom Pages with the Power Apps Component Framework (PCF), you can open a full, responsive modal popup that hosts anything from an editable grid to a Kanban board, a file uploader, or an AI assistant — all wired to Dataverse.

This step-by-step guide shows you how to open a PCF control in a modal popup using a Custom Page in Dynamics 365. It’s written in plain language so a beginner can follow along, while still giving experienced Power Platform developers the exact code and configuration they need.

1. Introduction

Let’s start with the “why” before the “how.”

  • Classic CRM dialogs are limiting. They offer small, fixed layouts and little control over the user experience.
  • Modern modal experiences are better. They are responsive, spacious, and can show real, interactive components.
  • Custom Pages are the recommended approach. Microsoft designed them as the modern way to build full-screen or dialog experiences inside model-driven apps.
  • PCF beats plain JavaScript web resources. PCF gives you a proper component model, lifecycle events, type-safe inputs, and reusable UI — far more flexible than hand-written HTML web resources.

2. What You’ll Build

Here is the end result you’re working toward:

  • A user clicks a ribbon (command bar) button on a record.
  • A full-featured modal popup opens on top of the form.
  • The popup hosts a PCF control.
  • The PCF receives the record context (which record the user was on).
  • The user interacts with data inside the control.
  • Changes are saved back to Dataverse.
  • The popup closes and the parent form refreshes to show the new data.

3. Solution Architecture

Every piece has one clear job. Here is how a click travels from the form all the way to Dataverse and back.

Model-Driven App
↓
Ribbon Button
↓
JavaScript
↓
Xrm.Navigation.navigateTo()
↓
Custom Page (Modal)
↓
Power Apps
↓
PCF Control
↓
Dataverse

In short: the ribbon button runs a small JavaScript function, which calls Xrm.Navigation.navigateTo() to open a Custom Page as a modal. The Custom Page (a Power Apps canvas) hosts your PCF control, and the control reads from and writes to Dataverse.

Modern responsive dashboard UI shown inside a modal popup in Dynamics 365
The goal: a modern, responsive modal that hosts a rich PCF control — not a cramped classic dialog.

4. Prerequisites

Make sure you have these ready before you start:

  • Power Platform CLI (pac) — to scaffold and push the PCF control.
  • Visual Studio Code — your editor.
  • Node.js (LTS) — required by the PCF build tools.
  • A PCF control project.
  • A Power Apps Custom Page.
  • A model-driven app.
  • A Dataverse environment with a system customizer or maker role.

5. Create the PCF Control

First, build the component that will live inside the popup.

  1. Generate a PCF project with the CLI:
pac pcf init --namespace CloudVerve --name CustomerDashboard --template field
npm install
  1. Build the UI in index.ts (or with React/Fluent UI) — grids, cards, charts, whatever your scenario needs.
  2. Connect to Dataverse using the WebAPI available through the PCF context object.
  3. Deploy the control to your environment:
npm run build
pac pcf push --publisher-prefix cr123
Developer building a PCF control in an IDE with a successful build
Scaffold, build, and push the PCF control with the Power Platform CLI.

6. Build the Custom Page

The Custom Page is the container that will appear as your modal. Inside Power Apps Studio:

  • Create a Custom Page from your solution (New → Page → Custom Page).
  • Add a responsive layout using containers so it adapts to any dialog size.
  • Insert the PCF control onto the page (enable code components for canvas apps first).
  • Configure parameters the page will accept, such as a record ID.
  • Pass the selected record ID into the PCF control’s input property using Power Fx, for example Param("recordId").

7. Open the Custom Page as a Modal

This is the key step. A small JavaScript function, wired to your ribbon button, opens the Custom Page as a centered dialog with Xrm.Navigation.navigateTo():

function openPcfModal(primaryControl) {
    const formContext = primaryControl;
    const recordId = formContext.data.entity.getId().replace(/[{}]/g, "");
    const entityName = formContext.data.entity.getEntityName();

    // Which Custom Page to open, plus the data we pass in
    const pageInput = {
        pageType: "custom",
        name: "cr123_customerdashboard_b1a2c",  // Custom Page logical name
        recordId: recordId,
        entityName: entityName
    };

    // How the dialog looks
    const navigationOptions = {
        target: 2,                       // 2 = open as a dialog (modal)
        position: 1,                     // 1 = center
        width:  { value: 60, unit: "%" },
        height: { value: 70, unit: "%" },
        title: "Customer 360"
    };

    Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
        function () { formContext.data.refresh(); },   // refresh parent on close
        function (e) { console.error("navigateTo failed:", e); }
    );
}

The important settings:

  • target: 2 — opens the page as a modal dialog instead of full-screen.
  • position: 1 — centers the dialog (use 2 to dock it to the side).
  • Width and height — set in % or px to size the popup.
  • Passing context — recordId and entityName flow into the Custom Page.

8. Pass Data to the PCF Control

Inside the Custom Page, the values you sent are available through Power Fx as Param("..."), and you bind them to the PCF control’s input properties. Common things to pass:

  • Record ID — which record the user was viewing.
  • Entity name — the table (e.g. account).
  • Form mode — create, update, or read-only.
  • User ID — for personalization or permissions.
  • Custom parameters — anything specific to your scenario.
  • JSON payloads — pass a structured object as a string for complex inputs.

9. Build Interactive Features

Because the popup hosts a real component, you can build genuinely rich experiences. Popular ideas:

  • Editable grid
  • Kanban board
  • File uploader
  • Timeline
  • Signature capture
  • Dashboard widgets
  • AI-powered assistant
  • Related records viewer

Each of these is just a component — build it once as a PCF control and reuse it anywhere you can open a Custom Page.

10. Save Changes Back to Dataverse

When the user edits data, you write it back. You have a few options:

  • Dataverse operations via the PCF context.webAPI (createRecord, updateRecord, deleteRecord).
  • Power Fx integration — use Patch() on the Custom Page for simple saves.
  • Web API calls for advanced or bulk operations.
  • Validation before saving so bad data never reaches Dataverse.
  • Error handling that shows the user a clear message if a save fails.
await context.webAPI.updateRecord("account", recordId, {
    name: updatedName,
    telephone1: updatedPhone
});

11. Refresh the Parent Form

After the dialog closes, the underlying form should reflect the changes. Handle this in the navigateTo success callback (shown in Step 7):

  • Close the dialog — the page closes when the user finishes or you call navigation back.
  • Refresh the main form with formContext.data.refresh(false).
  • Refresh subgrids with formContext.getControl("subgridName").refresh().
  • Refresh timelines the same way as subgrids.
  • Update ribbon state with formContext.ui.refreshRibbon().

12. Responsive Design

Your modal should look great everywhere. Plan for:

  • Full-screen dialogs when the content is dense (use target: 2 with large width/height, or full-page navigation).
  • Mobile layouts that stack vertically.
  • Tablet compatibility with touch-friendly controls.
  • Adaptive sizing using containers and relative units instead of fixed pixels.
Responsive UI across desktop, tablet, and mobile devices
Design the dialog to adapt cleanly across desktop, tablet, and mobile.

13. Performance Tips

  • Lazy load data and heavy components only when needed.
  • Minimize API calls — batch requests where possible.
  • Cache data that doesn’t change often.
  • Optimize rendering (virtualize long lists and grids).
  • Reuse components instead of rebuilding them.
  • Keep dialogs lightweight so they open instantly.

14. Common Problems and Solutions

  • PCF not rendering: confirm code components are enabled for canvas apps and the control is published.
  • Record context missing: check that recordId/entityName are passed in pageInput and read via Param().
  • Custom Page not opening: verify the page’s logical name and that it’s added to the app.
  • navigateTo errors: ensure pageType: "custom" and a valid target; check the browser console.
  • Permission issues: confirm the user’s Dataverse security role allows the tables involved.
  • Responsive layout problems: replace fixed sizes with containers and relative units.

15. Real-World Use Cases

Once you can host a PCF control in a modal, the pattern applies almost everywhere:

  • Customer 360 popup
  • Opportunity dashboard
  • AI assistant panel
  • Bulk edit records
  • Related record management
  • Approval workflow
  • Interactive Kanban board
  • Document management
  • Sales analytics dashboard
  • Custom lookup selector

16. Best Practices

  • Make PCF controls reusable so one component serves many scenarios.
  • Pass only the data you need to keep the dialog fast and secure.
  • Handle loading and error states gracefully with spinners and clear messages.
  • Design for different screen sizes from the start.
  • Follow Microsoft’s UX guidelines for a consistent, familiar feel.
  • Secure access with Dataverse roles — never rely on hiding UI alone.

17. Conclusion

Combining Power Apps Custom Pages with PCF controls lets you build modern, responsive, and reusable modal experiences in Dynamics 365. This pattern replaces many legacy dialog patterns, dramatically improves usability, and gives you a scalable foundation for advanced business applications — from a simple bulk-edit popup to a full Customer 360 dashboard or an AI copilot panel.

Part of This Series: PCF + Custom Pages Deep Dives

This is the cornerstone guide. The following in-depth articles build on it — explore the full series:

  1. Build a Reusable PCF Dialog Framework for Dynamics 365
  2. Pass Data Between Custom Pages and PCF Controls
  3. Create an AI Copilot Panel Using PCF Controls
  4. Open Multiple Modal Dialogs in Dynamics 365
  5. Refresh Model-Driven Forms After Closing Custom Pages
  6. Best Practices for Responsive PCF Controls
  7. Power Fx vs JavaScript in Custom Pages
  8. Building Advanced Grids with Fluent UI and PCF
  9. Integrating Azure Functions with PCF Controls
  10. Creating a Multi-Step Wizard Using Custom Pages and PCF

Build Modern Dynamics 365 Experiences with CloudVerve

Need help designing reusable PCF controls, Custom Page dialogs, or a full modal framework for your model-driven apps? At CloudVerve Technologies, we build modern Power Platform and Dynamics 365 solutions end to end. Talk to our team to bring modern popup experiences to your CRM.