New Smart Button – Custom Dialogs in Model Driven Apps using Canvas Apps

One of the most requested features of Model-Driven Apps ‘back in the day’ was to edit the popup dialog boxes that do actions such as Closing Opportunities or Cases. These were ‘special’ dialogs that had a fixed user interface.

There were a few workarounds that involved either using dialogs (now deprecated) or a custom HTML web resource.

More recently, the ability to customize the Opportunity Close dialog was introduced (https://docs.microsoft.com/en-us/dynamics365/sales-enterprise/customize-opportunity-close-experience) however this is very limited in what you can actually do.

Canvas Apps are a great way of creating tailored specific purpose user interfaces and are great for this kind of popup dialog type action. If only there was a way to easily open a Canvas App from a Model-Driven Command Bar. Well, now there is!

Open Dialog Smart Button

I’ve added a new smart button that allows you to easily provide the URL to the Canvas App to use as a dialog and pass the current record or selected record in a grid.

Step 1. Create a Canvas App Dialog

Your Canvas App will be responsible for performing the logic that your users need. The information that is passed to it is in the form of the record Id and logical name parameters. You can grab these values in the Canvas App startup script and then load the record that you need:

Set(varRecordId, If(
    IsBlank(Param("recordId")),
    GUID("780bb51e-961e-ea11-a810-000d3ab39933"),
    GUID(Param("recordId"))
    ));

Set(varRecordLogicalName, Param("recordLogicalName"));

Set(varSelectedRecord, LookUp(Accounts, Account = varRecordId))

Replace the GUID with the id of a record you want to use as a test when running inside the Canvas App Studio.

Any buttons that perform actions on the data or a cancel button that just closes the dialog, simply use the Exit() function:

// Do some stuff
Patch(Accounts,varSelectedRecord,{
    'Invoice Date':dpkInvoiceDate.SelectedDate
});
Exit();

The smart button listens for the result of the Exit() function to close the dialog.

One of the challenges of adding a Canvas App to a Model-Driven app is styling it to look like the out of the box Model-Driven App dialogs. I have created a sample app that you can import and then use as a template - https://github.com/scottdurow/RibbonWorkbench/blob/master/SmartButtonsUCI/SampleDialogSolution_unmanaged.zip

Step 2. Publish and grab the App Url.

Publish your Canvas App in a solution, and then grab the App Url from the details. Select the … from the Canvas App and then select ‘Details’

Then copy just the Url of the App that is displayed:

You could create an environment variable to hold this similar to the WebHook smart button - http://develop1.net/public/post/2020/09/11/environment-variables-in-smart-buttons This is because the url to the Canvas App will be different in each environment you deploy to.

Note: Make sure you share your Canvas App with the users that are going to be using your Model-Driven App! (https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/share-embedded-canvas-app) 

Step 3. Install the Smart Buttons solution

You will need the latest smart buttons solution – https://github.com/scottdurow/RibbonWorkbench/releases

Step 4. Open the Ribbon Workbench and add the buttons

When you open the Ribbon Workbench for the environment that the Smart Button solution and Canvas App is installed into, you can then drop the ‘Open Dialog’ button on either a Form, SubGrid, or Home Grid.

The properties for the Smart Button might look something like:

Note: I've used an environment variable reference in the Dialog Url parameter - but equally, you could just paste the URL of your canvas app in there if you didn't want to deploy to multiple environments such that the app URL would be different.

And that's it!

It’s really that simple. Now you will have a dialog that allows you to take actions on records from forms or grids using a Canvas App. The data is then refreshed after the dialog is closed.

Mobile App Support

At this time, due to cross-domain restrictions inside the Power Apps Mobile App, this technique will not work. The user will simply be presented with a login message, but the button will not do anything. If you would like to unblock this scenario – please vote this suggestion up!  https://powerusers.microsoft.com/t5/Power-Apps-Ideas/Support-Canvas-App-modal-popup-inside-Model-Driven-Mobile-App/idi-p/704962#M31952

Let me know how you get on over on GitHub - https://github.com/scottdurow/RibbonWorkbench/issues 

@ScottDurow