DataVerse: Model Drive App: Open Custom Page as Model from Ribbon

Open a Model Dialog from DataVerse / Dynamics 365 Ribbon has always been a common requirement to overcome existing OTB Dialogs like Close Opportunity , Deactivate Record where we always wanted to include one or more custom fields.

This feature is now becoming very handy and pretty easy … compared to the old methods trying to achieve this , so after quite bit of search the magic comes around the new Custom Page https://powerapps.microsoft.com/en-us/blog/custom-pages-for-converging-model-driven-apps-and-canvas-apps/ and a really Simple JavaScript attached to the ribbon.

In my example below: I am trying to do a custom dialog similar to the OTB Insert Template Dialog on the Email Entity but using my own custom template (In the cooking!)

Out of the Box: Insert Template Dialog

Let’s Get Started!

Step1: Create the Custom Page

  1. On your Model Driven App ->Click on your Model Driven App and Click Edit in Preview

2. Click on Add Page -> Custom and Click Next , Then you will have the option to Create a new page or use and Existing Page

3. Click On New and this will open a page similar to how the canvas app looks , Go ahead add your data source and make it look Pretty as much as you can!

This is how my custom app looks , the data source is my custom table for Email templates, Radio Group in the left showing the various email templates and a rich edit control showing the template wording .. ! Save and Publish your Page and your App!

Step 2: Customize Ribbon Bar and Add your Script Function

  1. Add a new web resource of type Javascript and add the below function to it

Past Input Parameters:

Page Type = Custom

Name = Custom Page logical name

To get the custom page logical name, open the solution and check the name of your Custom page

function OpenDialog()
{
 
    var pageInput = {
        pageType: "custom",
        name: "cr2d2_inserttemplate_8315a"
    };
    var navigationOptions = {
        target: 2,
        width: 500, // value specified in pixel
        height: 400, // value specified in pixel
        position: 1
    };
    Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
        function success() {
            // Run code on success
        },
        function error() {
            // Handle errors
        }
    );
}

2. To customize the ribbon while opening the Model driven app in Preview, Go to the Email and the 3 dots on the email table and click Edit command bar, this will open the new Command bar

3. Choose Main form and click edit

4. Choose where you want to place the the new command button and click new command , add the label for your new button and choose an icon, you can select of existing items or add a new icon by adding a new web resource

5. On the action click Run Javascript , Choose your library and choose the Open Dialog and you can pass parameters to the function directly if you need from the command or through the Javascript function like the RecordId and Entity Logical Name

6. Here how it looks from the Model Driven App.

Important Notes:

  1. When a custom page is modified, such as saved and published, the model-driven app is not aware of the change and will continue to use the last version of the custom page when the model-driven app was published. A model-driven app publish through app designer or solution explorer will update all custom pages in the model-driven app. This also applies to Publish all.
  2. If you have a button like the cancel one above and you need it to close the Dialog just use the Back() function.
  3. Design Guide: https://docs.microsoft.com/en-au/powerapps/maker/model-driven-apps/design-page-for-model-app?WT.mc_id=DX-MVP-5004221

References:

https://powerapps.microsoft.com/en-us/blog/custom-pages-for-converging-model-driven-apps-and-canvas-apps/

https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/xrm-navigation/navigateto?WT.mc_id=DX-MVP-5004221

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

Create your website with WordPress.com
Get started
%d bloggers like this: