PowerApps Side Panes Tutorial

A banch of new features were released with the latest PowerPlarform Wave 2 and in this article we are going to discover one of them : Side PanelS

Indeed, Side PanelS ! A similar feature actually existed which allowed us to display any internet page out of an URL and only with one Panel. This is not so known and for good reason as displaying a Youtube video on the side of Dynamics 365 doesn't really enhance the user experience. Isn't it our aim though !?

This new Side Panels feature allow us to display whatever we want from Record to Views and you can even display as many tab as you wish.

In this article we will have a look at this feature. First, we will build a side panel with mutliple tabs displaying Account views, Contact views and Web Resource when the Model Driven App in launched. Then we will see how to enhance the user experience by displaying the record selected within a lookup into a form. 

Side Panels when opening the Model Driven App

The idea here is to display Account views, Contact views and Web Resource in order to allow users to check informations while surfind in Dynamics 365. We will launch this Side Panel through the Model Driven App Event Handler in order to display it when the app is launched.

Build the Javascript

First we want to create three panels :

• Entity Account
• Entity Contact
• Web Resource (to prompt user to visit the our website)

Let's now use the new object Xrm.App.sidePanes in order to create those. We will indicate Title, Image, PaneId and parameter of the panel. Moreover we will point the entity and the desired view in the pane. We will also point Web Resource type in order to show our HTML that we have previously created. Below the code :

function onMdaLoad()
{
	Xrm.App.sidePanes.createPane({
    title: "Account",
    imageSrc: "https://static.thenounproject.com/png/683434-200.png",
    paneId: "AccountList",
    hideHeader: true,
    canClose: true
}).then((pane) => {
    pane.navigate({
        pageType: "entitylist",
        entityName: "account",
		viewId:"4203fcf9-3c56-e411-80ca-00155db9b402",
    })
});

Xrm.App.sidePanes.createPane({
    title: "Contact",
    imageSrc: "https://www.nicepng.com/png/detail/526-5269519_png-file-svg-crm-icon-black-white.png",
    paneId: "ContactList",
    hideHeader: true,
    canClose: true
}).then((pane) => {
    pane.navigate({
        pageType: "entitylist",
        entityName: "contact",
		viewId:"6c9368c3-060a-4324-b934-646ebf232521",
    })
});

Xrm.App.sidePanes.createPane({
    title: "Web Resource",
    imageSrc: "https://upload.wikimedia.org/wikipedia/commons/9/9f/Icon_WebResource_DigitalPreservation.png",
    paneId: "Dynamics Chronicles",
    hideHeader: true,
    canClose: true
}).then((pane) => {
    pane.navigate({
        pageType: "webresource",
        webresourceName: "mxb_dynamicschronicles.html",
    })
});
}

After creating a new webressource containing this logic, we need to register this function in the Model Driven App Event Handler.

This is the same principle than register a Javascript function on a form, unless that we don't try to launch the logic on a form but directly in the Model Driven App.

Model Driven App Event Handler

We can not access this Event Handler directly in Dynamics and register our function as we do it usually with Forms. 

First, make a new solution containing :

• Model Driven App
• Javascript that you are about to register in the Event Handler (not sure that's necessary but better to prevent than to cure)

Export this solution, go in the Zip folder and copy/paste 'customizations.xml' file out of it :

Open this file in a text editor and search for 'AppModule' node (<AppModule></AppModule>)

Within this App Module Node, add the following Event Handler node :

      <EventHandlers>
        <EventHandler eventname="onload" functionname="onMdaLoad" libraryname="mxb_account.js" parameters="" enable="true" />
      </EventHandlers>
    </AppModule>

Notice that I just gave a function name and a library name as I would have done it for a Form. 

You can Save your file and copy/paste it back to the zip file in order to replace the old one.

Now, simply import the solution, publish and test. You should have the same result as below.

We have now a multiple side pane available to any user who want to make a quick check while remaining in Edit mode in another record. Isn't it valuable as I promised it !?

As you can see on the third pane, our web resource prompting the user to visit our website for any help (advertising is important) :

Now let's go a little more far with the next topic.

Side Pane and Lookup within Forms

We want now to display informations regarding the Contact lookup within the Account form. So when user click on the Lookup, instead of leaving the current Account record, there will be the possibility to check Contact informations directly on the side.

Build the Javascript

So as you can imagine, the first thing needed will be the Form Context in order to get the Contact ID and out of this Contact ID, add a new Side Pane called Lookup Details where we will display the record.

Just replace the variable 'columnname' in order to use it with another lookup. Here is the code for the Contact Lookup in the Account form :

function onFormLoad(executionContext)
{
	var columnName = "primarycontactid"; 
	var formContext = executionContext.getFormContext();
	formContext.getControl("primarycontactid").addOnLookupTagClick(
		function(executionContext){
			var formContext = executionContext.getFormContext();
			executionContext._eventArgs._preventDefault = true;
			var pane = Xrm.App.sidePanes.getPane("LookupDetails");
			if(typeof(pane) == "undefined" || pane == null){
				Xrm.App.sidePanes.createPane({
					 title: "Lookup details",
					 paneId: "LookupDetails",
					 canClose: true,
					 width: 400
				}).then((pane) => {
					  displayLookupInPane(pane, 
						 formContext.getAttribute(columnName).getValue()[0].entityType,
						 formContext.getAttribute(columnName).getValue()[0].id);
				   });
			}
			else{
				displayLookupInPane(
				   pane,
				   formContext.getAttribute(columnName).getValue()[0].entityType,
				   formContext.getAttribute(columnName).getValue()[0].id
				);
			}
		}
	);
}
function displayLookupInPane(pane, entityType, id)
{
	pane.navigate({
           pageType: "entityrecord",
           entityName: entityType,
		   entityId: id
        });
}

Now that we have the proper Javascript, let's register the function in Form Event Handler of Account :

And now let's test this ;

As you can see now, when clicking on Lookup Value, another pane is added and shows me the record accordingly.

Conclusion

We saw that many interesting things are possible using this new sidepanes feature.

I have taken a first look through this article and at this state, I am wondering what else would I be able to do with this.

I imagine answering to some limitation we have like the Timeline possibly displayed in one tab within the form.. Would it be possible to display this Timeline in the Side Pane in order to check those informations while being in a Tab not containing this TimeLine !? It raise questions so I am pretty sure that we will hear again about Side Panes in Dynamics Chronicles.

I am convince of one thing after all. Side Panes will become a popular feature as it enhance and ease the user experience in Dynamics 365.

PowerApps Side Panes Tutorial