Carry data to side panes using HTML web resources in model-driven apps

In previous posts on my blog we’ve covered some of the capabilities of side panes in Dynamics 365 apps and model-driven apps built with Power Apps! In this post, I’ll focus on the capabilities around side pane creation to surface HTML web resources which… READ MORE [https://lewisdoes.dev/blog/ca
black server racks on a room
Photo by Manuel Geissinger on Pexels.com
In: Low Code Lewis Content 🚀

In previous posts on my blog we’ve covered some of the capabilities of side panes in Dynamics 365 apps and model-driven apps built with Power Apps! In this post, I’ll focus on the capabilities around side pane creation to surface HTML web resources which we can also send some data to, to be handled within the web resource. 🤩

Canvas powered side panes in model-driven apps – Low Code Lewis

Creating a side pane with a HTML web resource

Okay people, so first let’s look at some JavaScript we could use to create a side pane and then surface a HTML web resource in it…

Xrm.App.sidePanes.createPane({            title: "Sidepane",            imageSrc: "WebResources/iconWebResourceName",            hideHeader: false,            canClose: true,            width: 600,            isSelected: false,            state: 0,            paneId: "Sidepane01"        }).then((pane) => {            //Within the side pane, populate the space with a web resource            pane.navigate({                pageType: "webresource",                webresourceName: "webresourcename"            })        });

We can trigger this code on something like the selection of a ribbon button, or add it to the event that suits your requirement.

How do we pass data in?

So the next part we need to worry about is how we pass data to the HTML web resource so we can surface that context in the side pane that appears let’s say. This is actually very simple! All we need to do is pass the data value to a paramater called data in the pane.navigate method.

Our code will look a little more like this…

Xrm.App.sidePanes.createPane({            title: "Sidepane",            imageSrc: "WebResources/iconWebResourceName",            hideHeader: false,            canClose: true,            width: 600,            isSelected: false,            state: 0,            paneId: "Sidepane01"        }).then((pane) => {            //Within the side pane, populate the space with a web resource            pane.navigate({                pageType: "webresource",                webresourceName: "webresourcename",                data: dataVariableNameHere            })        });

Handling the data in the HTML web resource

The next part we need to worry about is how we actually do something with the data in the HTML web resource! Where does it go? How do we get to it? What happens?!

Effectively here the data we send, gets appended to the URL as a query string. So we need to handle this as we would with any query string using JavaScript as normal! Here’s some code you can use to do that…

const queryString = window.location.search;const urlParams = new URLSearchParams(queryString);const data = urlParams.get('data');

Now following the script above having run, the data we want to access will be stored in the constant variable ‘data’. Continue to write your code based on the logic you want to implement and use this constant where you’d like to utilise the data you sent to the web resource! 🚀

Written by
Lewis Baybutt
Microsoft Business Applications MVP • Power Platform Consultant • Blogger • Community Contributor • #CommunityRocks • #SharingIsCaring
Great! You’ve successfully signed up.
Welcome back! You've successfully signed in.
You've successfully subscribed to LewisDoesDev.
Your link has expired.
Success! Check your email for magic link to sign-in.
Success! Your billing info has been updated.
Your billing was not updated.