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! 🚀