Custom page dialogs inside model-driven apps using a Ribbon Workbench smart button

Now that custom pages are released (in preview), we are one step closer to the convergence towards a single app type that has the best of model-driven apps and canvas apps.

Previously, I had released a Ribbon Workbench smart button that allowed opening a canvas app as a dialog via a command bar button. With the latest release of the smart buttons solution you can add a button to open a custom page as a dialog box or sidebar. This creates a really native feel to the dialog since it's included inside the page rather than an embedded IFRAME, and the good news is that it's really easy to upgrade from the previous Canvas App dialog smart button!

Step 1: Add a custom page to your solution

Open the make.preview.powerapps.com, and open the solution that contains your model-driven app.

Inside the solution, select  + New -> App -> Page. 

The page editor will open, which is essentially a single Screen canvas app. In this example, I create a dialog to update the Credit Hold flag on a record and add some notes to the Description. In order to do this, we need to get a reference to the record that the dialog is being run on. Inside the App OnStart event, add the following code:

Set(varRecordId, If(
    IsBlank(Param("recordId")),
    GUID("d2f2d759-8ef8-eb11-94ef-0022486dba07"),
    GUID(Param("recordId"))
    ));
Set(varSelectedRecord, LookUp(Accounts, Account = varRecordId))

Notice that there is a hard-coded GUID there - this is simply for testing purposes when running inside the designer. You can replace it with the GUID of a record in your dev environment - or you could use First(Account) to get a test record. When the dialog is opened inside the app, the recordid parameter will contain the GUID of the current record.

The size of the screen needs to be adjusted to accommodate the borders of the dialog - so edit the Screen Width and Height properties to be:

Height: Max(App.Height, App.MinScreenHeight)-24
Width: Max(App.Width, App.MinScreenWidth)-10

Now we can add a root container with a width and height set to Parent.Width & Parent.Height - this will result in a responsive layout. You can then add child layout containers that hold the dialog controls. The layout might look like the following:

Notice the nested horizontal and vertical layout containers which work great for creating responsive layouts. This is especially important because we want our dialog to work both as a popup modal dialog as well as a sidebar dialog. The sidebar dialog will fill the available height and so our dialog content should also expand to fill the available height. 

We can use the name of the account selected by using the variable we set in the App OnStart, by setting the Text of a label to the expression:

Concatenate("Are you sure you want to submit the account '",varSelectedRecord.'Account Name',"' for credit check?")

The Cancel button can close the dialog using:

Back()

Note: This is slightly different from a canvas app smart button that would call Exit().

The Confirm button that can run the expression:

Patch(Accounts,varSelectedRecord,{'Credit Hold':'Credit Hold (Accounts)'.Yes,Description:txtNotes.Value});
Back();

This will simply update the credit hold and description columns for the selected record and then close the dialog.

You can download my example dialog from here - https://github.com/scottdurow/RibbonWorkbench/raw/master/SmartButtonsUCI/SampleCustomPageSmartButton.zip 

When you Save and Publish your custom page, it will be given a unique name that we will use when creating the smart button:

Unfortunately, you can't copy this unique name from the solution editor, but in the next step once it is added to the app designer it can be selected and copied!

Step 2: Add a custom page to the app

The custom page preview allows you to add the custom page to the app in the model-driven app navigation, but we can also add it to the app without it being visible. This is required to enable opening the custom page as a dialog.

Open your model-driven app in the preview editor (Open in preview) and select Pages -> Add Page -> Custom (preview) -> Next -> Use and existing Page

Select the page you created in step 1. Uncheck Show in navigation, and then click Add.

You can now easily copy the unique name of the custom page that you'll need in the next step when adding the smart button.

You now need to Save and Publish the app.

Note: You will need to Save and Publish each time you make a change to your custom page.

Step 3: Install the latest smart button solution

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

Step 4: Add dialog smart button

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.

Set the smart button properties to be:

Title: The text to display on the button
Dialog Url/Custom Page Unique name: The unique name copied from the app designer. E.g. dev1_pageaccountsubmitforcreditcheck_e748f
Width: 470
Height: 350 (or zero to show the dialog as a sidebar)
Dialog Title: The name to show at the top of the dialog. E.g. Credit Check 

Now you just need to save and publish and that's it!

Note: You might need to enable Wave 2 2021 depending on which release your environment is on. I have seen some environments not work correctly when using custom pages due to the recordId parameter not being correctly passed to the custom page.

Migrating from canvas app dialog smart buttons

If you have been using the canvas app dialog smart button approach, then you can very easily migrate to this custom page technique by performing the following:

1. Create a custom page as described above, but copy and paste the screen contents from your existing canvas app. It's cool that you can copy and paste controls between custom pages and canvas apps!
2. Update the layout to use the new responsive containers.
3. Add the custom page to your model-driven app.
4. Update the Open Dialog smart button with the unique name of the custom page instead of the canvas url.

Remember that this feature is still in preview and does not work inside the native mobile/tablet apps at this time. You can read more about how this smart button works in the docs topic: Navigating to and from a custom page using client API (preview).

In my next post, I'll show you how to do this using the Commanding V2 designer rather than the Ribbon Workbench!

See more at community Summit NA!

Those nice people at Dynamic Communities have asked me to be a Community Ambassador for SUMMIT NA 2021. This is going to be an exciting in-person event (fingers crossed) where I'll be speaking about custom pages and Power FX command buttons - it would be great to see you there if you are at all able to travel to Houston, Texas. Can't wait to show you all the cool new features. You can also register using the Promo code Durow10 to get a 10% discount if you've not already registered!