How to Open Popup from Ribbon Button in Dynamics 365 CRM

How to Open Popup from Ribbon Button in Dynamics 365

Ribbon buttons in Dynamics 365 provide a powerful way to extend system functionality and improve user experience. One common requirement is opening a popup window when a user clicks a custom ribbon button.

Using JavaScript and the Xrm.Navigation API, you can easily open dialogs, custom pages, web resources, or forms from a ribbon button.

In this article, we'll learn how to create a custom ribbon button and open a popup in Dynamics 365.

Why Use Ribbon Button Popups?

Popup dialogs help users:

Enter additional information.
Confirm actions before execution.
Display important messages.
Open custom forms or pages.
Improve user experience.
Reduce navigation complexity.

Prerequisites

Before starting, ensure you have:

Dynamics 365 environment.
System Customizer or Administrator privileges.
Ribbon Workbench or Command Designer.
JavaScript Web Resource.
Basic knowledge of Dynamics 365 customization.

Business Scenario

Suppose users need to enter comments before closing a Case record.

Requirement

When the user clicks:

Close Case

A popup dialog should appear and collect user input before proceeding.

Step 1: Create a JavaScript Web Resource

Create a new JavaScript Web Resource.

Example:

new_OpenPopup.js

Add the following function:

function openPopup(primaryControl) {

    var pageInput = {
        pageType: "webresource",
        webresourceName: "new_PopupPage"
    };

    var navigationOptions = {
        target: 2,
        width: 600,
        height: 400,
        position: 1
    };

    Xrm.Navigation.navigateTo(
        pageInput,
        navigationOptions
    ).then(
        function () {
            console.log("Popup closed");
        },
        function (error) {
            console.log(error.message);
        }
    );
}

Save and publish the web resource.

Step 2: Create a Web Resource Popup Page

Create an HTML Web Resource.

Example:

new_PopupPage.html

Sample HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Popup Dialog</title>
</head>
<body>

<h2>Dynamics 365 Popup</h2>

<p>Enter your comments below:</p>

<textarea rows="5" cols="50"></textarea>

<br><br>

<button onclick="window.close();">
Close
</button>

</body>
</html>

Save and publish.

Step 3: Create Ribbon Button

Using Ribbon Workbench:

Open Ribbon Workbench.
Select the target entity.
Drag a Button onto the Command Bar.

Configure Button

Property	Value
Label	Open Popup
Command	OpenPopupCommand
Icon	Custom Icon

Step 4: Create Command

Create a new command:

OpenPopupCommand

Add a JavaScript Action:

Library: new_OpenPopup.js
Function: openPopup
Parameter: PrimaryControl

Publish the changes.

Step 5: Test the Popup

Steps

Open a Dynamics 365 record.
Click the custom ribbon button.
Popup window opens.
Enter information.
Close popup.

Result

The popup displays successfully from the ribbon button.

Open a Custom Page in Popup

Power Apps Custom Pages can also be opened.

function openCustomPage() {

    var pageInput = {
        pageType: "custom",
        name: "new_CustomPage"
    };

    var navigationOptions = {
        target: 2,
        width: 800,
        height: 600,
        position: 1
    };

    Xrm.Navigation.navigateTo(
        pageInput,
        navigationOptions
    );
}

Result

Custom Page opens inside a modal dialog.

Open Entity Form in Popup

function openAccountForm() {

    var pageInput = {
        pageType: "entityrecord",
        entityName: "account"
    };

    var navigationOptions = {
        target: 2,
        width: 700,
        height: 500,
        position: 1
    };

    Xrm.Navigation.navigateTo(
        pageInput,
        navigationOptions
    );
}

Result

Account form opens as a popup dialog.

Real-Time Business Scenario

Requirement

Sales users need a quick form to create follow-up activities.

Solution

Add a ribbon button.
Create a popup form.
Open the popup using JavaScript.
Save the activity.

Result

Users can create activities without leaving the current record, improving efficiency and productivity.

Common Errors

1. Function Not Found

Cause:

Incorrect JavaScript function name.

Solution:

Verify that openPopup matches the Ribbon Command configuration.

2. Web Resource Not Found

Cause:

Incorrect web resource name.

Solution:

Verify that new_PopupPage exists and is published.

3. Popup Not Opening

Cause:

JavaScript error.

Solution:

Open Browser Developer Tools → Press F12 → Check the Console tab for errors.

Best Practices

Use descriptive function names.
Keep popup dimensions responsive.
Validate user input before submission.
Handle popup close events properly.
Use Custom Pages for complex business requirements.
Publish all customizations before testing.

Advantages of Popup Dialogs

Better user experience.
Faster data entry.
Reduced navigation.
Improved productivity.
Cleaner interface.
Flexible customization.

Conclusion

Opening a popup from a Ribbon Button in Dynamics 365 is a practical way to improve user interaction and streamline business processes. Using JavaScript and the Xrm.Navigation API, developers can easily launch web resources, custom pages, and entity forms in modal dialogs.

By implementing popup dialogs, organizations can reduce navigation, improve productivity, and provide a more user-friendly experience within Dynamics 365.