Adding A Custom Page To A Form Ribbon In A Model-driven App

If you have started creating a custom page, the end goal adding a custom page to a form ribbon in a Model-driven App (Dynamics 365 Customer Engagement, CRM, Dataverse or whatever you want to call it). That is where your users will find it and interact with it. How do you do that? Well there are several options but in this post we will look at how to add it to the ribbon/command bar (top of a record) of a form. A form is the layout for a type of record, so in this case we will look at adding a custom page to the Lead form ribbon in one of my custom Model-driven apps.

First we need to add the custom page to app you want to include it in, so add your model-driven app (MDA) to your solution, then click on Edit and Edit in new tab (always my preference to do so in a new tab).

Once it opens, click on Add page from the top, then click on Custom page.

You can then search for and find the custom page you have created. In this case, we don’t want it to be in the navigation, so make sure you untick the Show in navigation box at the bottom. Click Add.

Even though we didn’t add it to the navigation, it is still there at the bottom in the other pages section on the left hand side. Scroll down to find it and click on it. You need the Name that shows up on the right. Don’t close the screen where you have edited the MDA, you will need to come back here in a moment.

Once you have done that, you can create a JavaScript web resource. Don’t panic because I am sharing the code with you that I have used. In your solution create a new Web Resource. You can simply paste the code in directly, set the File type as JavaScript, then give the file a name and display name.

This is what your code will look like. The name of the custom page you copied when you added it to the Model-driven app will need to be put in place of where you see the name of mine (mvw_returntomarketing_ec879). The function on the first line is called returnToMarketing in my script. Rename that to be something logical for the thing your custom page is doing, same with the bottom line with a console error that would show (for any issues) to make it logicial for your needs. The target of 2 means it will open in the middle of the screen with the width and height set. I have found that 470 by 600 is a good size for custom pages you are using as a quick dialog box, but you can obviously adjust that if it isn’t a good fit for your needs. Save and publish your web resource.

function returnToMarketing(primaryControl) {
   var formContext = primaryControl;
   var entityName = formContext.data.entity.getEntityName();
   var recordId = formContext.data.entity.getId().replace(/[{}]/g, "");

   var pageInput = {
      pageType: "custom",
      name: "mvw_returntomarketing_ec879",
      entityName: entityName,
      recordId: recordId
   };

   var navigationOptions = {
      target: 2,
      width: 470,
      height: 600
   };

   Xrm.Navigation.navigateTo(pageInput, navigationOptions)
      .then(function() {
         // Refresh parent form when dialog closes
         formContext.data.refresh();
      })
      .catch(function(error) {
         console.error("Return To Marketing navigation failed:", error);
      });
}

Now we need to put it all together on what is called the command bar, which you may also hear referred to as the ribbon. In the area where you have edited the MDA, find the entity you want to add the custom page to. Then click on the ellipsis menu (three dots) then Edit command bar.

You will then be promoted to select a specific command bar to edit, select the main form.

Then click on the new button from the top, then click Command.

Once you have added the command, go to the panel on the right hand side to add the details. The label is what will show on the button. You can change the icon used by adding a new web resource with an image, or selecting an existing one. In the Action, select Run JavaScript, then find the new web resource with your script that you created. Add whatever you called in the function in the function name field below where you added the library. Finally, add a parameter and select PrimaryControl from the list of values.

You can drag the button around the command bar to determine where you want it.

As you do that, you will notice that the order number will change right at the bottom of the command panel on the right. You can also set where you want it by editing the number directly.

Save and publish the changes you have made. Once you’ve done that, open the Model-driven app and you should see your button. Cool! You might need to refresh a few times (and maybe clear your browser cache) to see it.

Now press the button and your custom page should open. Hooray! I can then fill out the field and submit it, and see the changes that were made directly on the record.

One thing to note, you might already figure out that users would need security access to all of the tables and either read, create or write access depending on what your Patch statement is doing within the custom page. However, when we are using a Web Resource to open the custom page, users will also need Read access to the Web Resource table so make sure your users have that on one of their security roles or they will get errors.

And finally, if you make changes to your Custom page in the future you would know to publish that, but you should also go and publish the MDA where it has been added to in order for users to see the changes you made on the custom page.

Original Post http://meganvwalker.com/adding-a-custom-page-to-a-form-ribbon-mda/