Side Pane Agents

Angeliki PatsiavouDynamics 365, Customer Insights, Dyn365CE1 week ago44 Views

Building Copilot Studio agents is awesome. Of course, to fully serve their purpose, they need to meet their end users in their flow of work. It is part of the customization power. In last week’s blog post, we saw how to integrate, as Iframes, agents in either Power Apps or Power Pages.

An unbelievable, seamless integration

There are a few considerations we must go through when deciding where to place the agent, like:

Do end users need to just interact with the agent and retrieve results solely within it?
What are the most common devices so we can go and adjust dimensions accordingly?
Should there be an active end user choice of popping in and out of the agent?
Do end users need contextual data from the source record e.g. customer displayed simultaneously?

In the latter questions, Iframes may not be enough e.g. in a Dynamics 365 app or any Model-Driven App’s Main Form. Instead, we can use the infamous side pane.

How do we achieve that look?

We know how great side panes are. We have seen it with Copilot for Sales and other role-based Copilots. Of course, they come out of the box configured as such.

How do we achieve this ourselves?

Bit of a short side story. My first time doing this was thanks to the one and only Lewis Baybutt. Of course, Lewis is a brilliant, masterful pro-dev at heart. Whilst I was glad to see how he did it, it was initially looking very pro-dev to absorb. So, this blog post is to break all the code down bringing the magic together!

The components we’ll need:

A Dynamics 365 or Model-Driven App of our choice
A specific HTML script with our agent’s URL as the first Web Resource
Your icon of choice for the agent in the side pane
A specific JavaScript piece as the second Web Resource, which is leveraging the Xrm.App.sidePanes API
An On Load event handler based on the above for the Main Form of a customer record

Step 1:

Let’s start with deciding where and how we will show our agent in the side pane. In this scenario, we will look at how to surface the agent automatically upon loading the Main Form of a specific Customer (contact-like) record.

Step 2:

To create our first web resource, we need for the HTML script the URL of the agent. This was explained how to get it here.

As mentioned, it is key we design an amazing experience for users. We have the option as part of the URL to adjust dimensions like width or height. Here, I have adjusted the height to take up more of the vertical space.

The full HTML script is below. You just replace with your own agent URL in the bold orange bit. Save it as an HTML script. Visual Studio is your friend if you have it. Otherwise, you can also use Notepad.

<!DOCTYPE html>

<html>

<body>

</body>

</html>

Now let’s add it as a Web Resource as part of our solution.

Step 3:

Now it is time for the second Web Resource, the JavaScript one. The full code is below, but let’s go on and explain this line by line.

Please note: You can download this as a text file here for your own updates and customization in Visual Studio.

Line 2 – Defining the function:

This is the function we will use to get the agent to appear in the side pane, and of course as part of the On Load event handler in the Customer table’s Main Form. It will essentially handle the creation and configuration of a side pane within the app environment.

Line 4 to 9 – Creating the side pane:

Line 4: Xrm.App.sidePanes.createPane({…}): We are using this to create a new side pane. The createPane method accepts an object with a series of configuration properties possible.
Line 5: title: "VISTA": Gives a title to the side pane, which will be displayed to users. In this case, the title is set to "VISTA" as it is the name of our agent. In your own solution, you an give it your own name.
Line 6: imageSrc: "WebResources/msdyn_/Icons/AnalysisResult.svg": This points to the icon image for our agent as it will appear on the side pane. In this case, I chose one of the pre-existing Web Resource icons stored within the Power App solution. As you can tell, the file name indicates this is an SVG icon. Please note you can also upload your own or choose another pre-stored icon.
Line 7: hideHeader: true: Hides the header of the side pane. This is going to be useful layout-wise for maximizing space within the pane.
Line 8: canClose: true: Allows the users to close the side pane manually when they wish to.
Line 9: width: 600: Sets the width of the side pane in pixels. This may require some experimentation based on the type and amount of content you plan to display at a time. And of course, the end users’ preferred devices.

Line 10 – Keeping our promise:

The createPane method works in a way that it promises to do something, and when it finishes successfully, the .then() part runs. The pane object allows us to customize the side pane further or decide what content to show in it.

Line 12 to 14 – Populating the side pane with content:

pane.navigate({…}): This method is used to navigate the content of the side pane to a specific resource. In this case, it will be our HTML Web Resource.
pageType: "webresource": Indicates the type of resource to display. Here, it specifies that a web resource will be loaded into the side pane.
webresourceName: "ang_MDAHTML": Refers to the specific web resource title to be displayed. The name ang_MDAHTML corresponds to is the file we stored earlier in our solution. You should update it with your own file name.

Line 18 – Closing the loop:

Completes the definition of the showSidePane function.

Now, let’s save this JavaScript piece as a Web Resource in our solution.

Step 4:

The event handler part is the last piece to see our side pane come to life. As mentioned, we want to launch our VISTA agent from a side pane when a customer record loads. So, we go into its Main Form in the maker portal.

This will be a On Load event in terms of the Event Type.

Please note: In your configuration, just remember to add in your Library your own JavaScript resource name as highlighted by the orange box. You have to select it from the drop down after as second step in that specific process.

With regards to the function we have to enter, this was specified earlier in our JavaScript resource under the name of showSidePane.

Once we have followed thee steps, we can click Done.

The final step, as we are back in the customer record's Main Form in the maker portal, is click Save and publish.

This was indeed the final step.

Now, we are ready to launch our app and marvel at our creation!

A short video demo says it all

A final note – Further resources

Credit to Lewis for being so kind and sharing the art of the possible. He has actually blogged about the general approach here. So, a big thank you again!

You can also find the general Microsoft Learn documentation on about side panes and using the client API here.

Check Angeliki Patsiavou’s original post https://www.empoweredhumans.net/post/side-pane-agents on www.empoweredhumans.net which was published 2025-01-18 20:05:00

Upvote0PointsDownvote

0 Votes: 0 Upvotes, 0 Downvotes (0 Points)