Open Multiple Modal Dialogs in Dynamics 365

Some workflows need more than one popup. A user opens a record picker, then a detail editor, then a confirmation — each a separate modal, layered or sequenced. Done carelessly, multiple modal dialogs in Dynamics 365 become confusing and buggy. Done well, they create smooth, guided experiences.

This article — part of our series on hosting PCF controls in modal popups — explains how to open, sequence, and manage multiple Custom Page dialogs cleanly.

Two Patterns: Stacked vs Sequential

• Sequential (recommended): open dialog A, wait for it to close, then open dialog B based on the result. Clean and predictable.
• Stacked: open dialog B on top of dialog A. Powerful but harder to manage — use sparingly, and keep the stack shallow.

Sequential Dialogs with Promises

Because Xrm.Navigation.navigateTo() returns a promise that resolves when the dialog closes, you can chain dialogs with async/await. The result of one decides the next:

async function runFlow(primaryControl) {
    // Step 1: pick a record
    await Xrm.Navigation.navigateTo(
        { pageType: "custom", name: "cr123_picker_page" },
        { target: 2, width: { value: 50, unit: "%" } }
    );

    // Step 2: edit the chosen record
    await Xrm.Navigation.navigateTo(
        { pageType: "custom", name: "cr123_editor_page" },
        { target: 2, width: { value: 60, unit: "%" } }
    );

    // Step 3: refresh the form once the flow is done
    primaryControl.data.refresh(false);
}

Passing Results Between Dialogs

Store each dialog’s output where the next step can read it. A common approach is to have each Custom Page write its result to a lightweight Dataverse row (or pass an ID through the flow) so the next dialog opens with the right context. Keep payloads small — pass IDs, not whole records.

Managing a Dialog Stack

If you truly need stacked dialogs, track them yourself so you always know what’s open and can close them in order:

• Keep a small stack array of open dialog references.
• Give each dialog a clear close/return path (Power Fx Back()).
• Limit depth — two or three levels at most.
• Refresh the parent only after the whole stack unwinds.

Common Problems

• Dialogs opening too early: always await the previous one before opening the next.
• Lost context: pass the needed ID into each page instead of relying on global state.
• Double refresh: refresh the form once, at the end of the flow.
• Users trapped: give every dialog a visible cancel/close action.

Conclusion

Multiple modal dialogs are simple when you lean on the promise returned by navigateTo: sequence steps, pass small results forward, and refresh once at the end. Prefer sequential flows over stacking, and your multi-step experiences will feel guided rather than chaotic.

Related: Open a PCF Control in a Modal Popup Using Custom Pages. Building complex guided flows? Talk to the CloudVerve team.