Blog, Customization, Development

Creating Model Driven Apps Side Panels like a boss

If you use model-driven applications regularly you might notice a “Copilot” Side Pane that appears immediately after your app (Sales/Service/Marketing/Something Else) is loaded:

I decided to investigate and share how to create a similar functionality in this blog post.

Approach

There are 3 components that make this solution complete:

  • Html/JS webresource that will be shown in the panel (I will use my Entity Navigator page as an example, you can use any page you want to embed in that panel)
  • JS webresource that will load and configure the side panel
  • Global Ribbon button that will not be visible to a user and will serve a load trigger role in this solution

Script

The whole idea of this script is to load and configure the Side Panel leaving no traces. Here is the code with the comments:

Ribbon

Create an empty solution and add “Application Ribbons” (Add Existing -> More -> Other -> Application Ribbons) into it:

Once that’s done – open this new solution using “Ribbon Workbench”, locate “Mscrm.GlobalTab” in the “Home” ribbon, and add a button to it (I added my button nearby “Copilot” button):

Add a command where the key element is a “Custom” enable rule that references the WebResource resource created on the previous step:

Save and publish the ribbon. If everything is done right you will see your panel automatically loading.

Demonstration

You can find the source code and solution in this GitHub repository – https://github.com/AndrewButenko/EntityNavigator

Cover photo by Luke Peters on Unsplash

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.