# Custom dialogs in Model Driven Apps 💡🚀

## **#1. Introduction - Deprecated dialogs**

Do you still know the old dialogs, which have unfortunately been deprecated for years? 🤔

![https://learn.microsoft.com/en-us/dynamics365/customerengagement/on-premises/developer/understand-dialogs?view=op-9-1](https://cdn.hashnode.com/res/hashnode/image/upload/v1685822188021/5bab9b5e-c18c-4438-89ac-6c3a04f3af51.png align="center")

Source: [https://learn.microsoft.com/en-us/dynamics365/customerengagement/on-premises/developer/understand-dialogs?view=op-9-1](https://learn.microsoft.com/en-us/dynamics365/customerengagement/on-premises/developer/understand-dialogs?view=op-9-1)

It was a very good way to guide users through a process. The user could select different values and based on this, different scenarios could be mapped, such as a case creation, which requires different data from the user as input depending on the selection.

Since the function should no longer be used, there must be a new way to replace this function, or even a better one! Something like that exists. 😉

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685822699187/736e94c5-6ec2-48e7-833b-246ad25b2648.gif align="center")

## #2. Target

Our goal is to create a dialog within Model Driven Apps, empowering users to carry out system-controlled processes. By aligning processes with user actions, we make it easier for users to maintain accurate data 🎯, saving time ⏱️ and delivering valuable results 💪. This has a tangible impact on departments like marketing or service, as better data enables more targeted and successful marketing campaigns or a better case resolution. 📈

In this blog article, for the sake of simplicity (please forgive me 🙏), I do not create a process dialog, but therefore replace a dialog that is provided by the Microsoft standard. The talk is of "Close As Won" in the opportunity form.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685824147731/02004ad2-8c33-4018-8355-45bcd6e24859.png align="center")

So many customers have asked me if this dialog can be modified. Yes❗, it's very easy to do, by ticking a box ✅ in the settings ⚙️ and [editing the quick create form for opportunity close](https://learn.microsoft.com/en-us/dynamics365/sales/customize-opportunity-close-experience), but honestly, is that nice? 💩

## #3. Implementation

### #3.1 Create a canvas page

First, you need to create a canvas page that will later be shown as a modal.

Like this:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685825848901/c0e5f9fc-d4eb-4273-bb45-9ea40918cbd3.png align="center")

Yeah, I know ... I have only removed the competitor, but trust me (❗) customers have many ideas of important data depending on their business💡.

When the page is created, and is more or less beautiful (I hope more 😉), then you have to add logic to the page.

There are some things to do and I will show them all very quickly 🏃:

1. Screen - OnVisible
    
    OR
    
    App - OnStart
    
    ```plaintext
    Set(varRecord, LookUp(Opportunities, Opportunity = GUID(Param("recordId"))))
    ```
    
    ➡️ This code snippet is used to retrieve the opportunity record
    
2. Submit (OK) button ✅
    
    ```plaintext
    // Show a loading spinner to indicate that something is happening
    Set(varLoadingSpinner, true);
    
    // Run a flow for further changes based on the input
    'YOUR FLOW'.RUN(
    
        // pass the arguments you need for your process
    
        varRecord.Opportunity,
        DropdownCanvas_StatusReason.Selected.Value
    
        //    ...    add more :-)
    );
    
    // Hide the loading spinner
    Set(varLoadingSpinner, false);
    
    // Close the dialog
    Back();
    ```
    
    ➡️ This code snippet is used to display a spinner when calling or executing a flow. The flow is not necessary, you could just write the logic in PowerFx, but with flow there are also possibilities e.g. to send data to external systems like an ERP system. 💡
    
3. Cancel button ❌
    

```plaintext
// Go back and do nothing
Back();
```

1. Remember your canvas page name after saving, you'll find it in your solution. 🔎
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685828518415/dd750bb4-1f8a-42c3-a7b5-d03157247367.png align="center")

### #3.2 Create a JavaScript

Now you have to create the JavaScript to call the dialog.

```javascript
function OpenCloseOpportunityDialog(formContext) {

        var pageInput = {
            // open a custom canvas page - do not change this
            pageType: "custom",

            // replace "YOUR_APPNAME" with your app name
            name: "YOUR_APPNAME",

            entityName: formContext.data.entity.getEntityName(),
            recordId: formContext.data.entity.getId()
        };

        var navigationOptions = {
            // open as dialog
            target: 2,
            
            // centered
            position: 1,

            width: { 
                // change this based on your page width
                value: 400, 
                unit: "px"
            },
            height: { 
                // change this based on your page height
                value: 560, 
                unit: "px" 
            }
        };

        Xrm.Navigation.navigateTo(pageInput, navigationOptions)
            .then(
                function () {
                    // reload, because it could be closed by your process
                    formContext.data.refresh(true);
                }
            ).catch(
                function (error) {
                    console.log(error.message);
                }
            );
    }
```

### #3.3 Create a custom command button

In order to be able to call the newly created function to open the dialog, you must create a new command button.

If you don't know how this works, please check my blog post about [How to populate data into navigateTo() ❓✅](https://power-platform-blog.hashnode.dev/how-to-populate-data-into-navigateto).

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685828714619/47d74bda-214f-4211-b091-7ed4ca05c56d.png align="center")

And please remember...

⚠️ Don't forget to set "PrimaryControl" as your first parameter!!!

If you don't want the "old" button to be visible, just open the good old [**Ribbon Workbench**](https://www.xrmtoolbox.com/plugins/RibbonWorkbench2016/) and hide it. If you don't know how to use it: [**click here to get wisdom**](https://www.youtube.com/watch?v=wUiqaR9TruU).

In this case, I was only allowed to display the button when the opportunity was in the "Open" state, so I had to define a visibility expression.

```plaintext
If(Self.Selected.Item.Status = 'Status (Opportunities)'.Open, true, false)
```

### #3.4 Don't forget to add the page to your Model Driven App

I have already wasted a lot of time trying to find the reason why my dialog was not displayed. Each time I had not added the page to the Model Driven App. Be smarter than me and add it immediately.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685829352544/de7c0c02-66d9-41e3-bc02-ad190efc2532.gif align="center")

### #3.5 Result

As a result, we have the finished dialog. It wasn't that difficult, was it? 😎

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685830081435/dbe6c5d3-ebf3-499e-afdb-853c8fc28949.png align="center")

In conclusion, through this little example, we have demonstrated the capability of the Power Platform to enable the creation of dialogs within Model Driven Apps using simple yet powerful tools. 💪

Maybe my example is not that useful 💩, but the goal was to show that such a thing is possible ✅. What you do with it, and how you use the instrument, is another story. 🚀

If you have any cool ideas that can be presented through dialogs, please let me know! 😛

Feedback is absolutely welcome! 🫡

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685830698866/eb37436b-878a-4ab0-a45d-d069e0447a91.gif align="center")