Replacing Dialog in Model Driven Apps Part-1: Using Main Form Modal

Since the announcement of dialogue depreciation, I have been trying out different alternatives to replace dialog as I use them extensively in my projects. The first option I tried was using canvas apps as described in this post ,but I was not happy with that approach and tested other options and implemented those in my projects based on customer scenarios. I will be publishing these options as a series. This is the first post and let’s see how we can replace dialog with entity main form.

There are many gaps when we replace dialog with other alternatives, even though these gaps can be filled with workarounds, the maintainability is high when compared to a classic dialog. These issues can be handled to a great extend using main forms.

With the April 2020 preview release of the Unified Interface for model-driven apps in Power Apps you can now open a record in a dialog. The record will open in a modal dialog and users will have access to the command bar, header and tabs that you defined for the records main form.

We can us the above option replace classic dialog.

Scenario:

I have to request HR team to verify certain details about prospects, but HR team is not allowed to access contact details. I also need to capture feedback and remarks from HR team.

So I created an entity called “Requests(nj_dialoguebatchone)” , modified the main form as per my requirements and removed all the unwanted buttons using ribbon-workbench.

Next step is to call this form using JavaScript from contact form.

function loadDialogForm(executionContext) {

    formContext = executionContext.getFormContext();
    var pageInput = {
        pageType: "entityrecord",
        entityName: "nj_dialoguebatchone",
        formType:  2
// formType 2 opens a new record.
    };
    var navigationOptions = {
        target: 2,
        height: {value: 70, unit:"%"},
        width: {value: 35, unit:"%"},
        position: 1
//target: Number. Specify 2 to open the page in a dialog. 
//position:Number. Specify 1 to open the dialog in center.
    };
    Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
        function success(result) {
               
                // Handle dialog closed
        },
        function error() {
                // Handle errors
        }
    );
    

   

}

I hope the code is self explanatory, more details can be found in the following links.

Now you can bind this script with ribbon button or other form events Boom dialog is ready.

You can also use quick create forms, but main form gives you more flexibility in terms using business rule and other form level formatting and validations. You can also easily configure Workflows, FLOWS, or Plugins based on user input in this as record create and update events are available.

See the dialog in Action

P.S. Am a classic dialog fan 🙂

2 thoughts on “Replacing Dialog in Model Driven Apps Part-1: Using Main Form Modal

  1. Matt May 16, 2020 / 3:39 pm

    Look fantastic. I can’t see in the video how the form is opened – is it via a button or changing a field value?

    Like

    • THE PCF GUY May 16, 2020 / 10:07 pm

      It is on field change, you can configure on a button as well based on user scenarios.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s