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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
var AB = AB || {}; AB.EntityNavigatorRibbon = (function () { async function initialize() { //Checking if the pane is already initialized var pane = Xrm.App.sidePanes.getPane("EntityNavigator"); //If the pane is already initialized, we don't need to do anything, just return false if (pane) { return false; } //If the pane is not initialized, we will initialize it //this function will run asynchronously because initialization //might take more than allowed 10 seconds thresshold initializePane(); //returning false to hide the trigget button return false; } //Function to initialize the pane async function initializePane(){ //Creating the pane var pane = await Xrm.App.sidePanes.createPane({ title: "Entity Navigator", imageSrc: "WebResources/ab_/EntityNavigator/icon.svg", paneId: "EntityNavigator", canClose: false, width: 400 }); //Once pane is created, code navigates it to the webresource pane.navigate({ pageType: "webresource", webresourceName: "ab_/EntityNavigator/index.html" }); //Collapsing the pane by default Xrm.App.sidePanes.state = 0; } return { initialize: initialize }; })(); |
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
How to move this ribbon changes into higher environment
Hello,
In order to move it to higher environment add Application Ribbon to solution with all the dependencies.
Andrew