Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities
News and Announcements icon
Power Platform Community / Blogs / Power Apps Community Blog / #12 Side Panes in Model Dri...

#12 Side Panes in Model Driven Apps

Ram Prakash Profile Picture Ram Prakash 5,055

Implementation Steps:

 

Consider a scenario, on click of a Button I need to show a HTML page in the Form. Initially we have used Dialog to display the same in the form but Microsoft have introduced a new feature to display a SIDE PAN in the Form

 

Syntax:

 

 

Xrm.App.sidePanes.createPane(paneOptions)

 

 

PanOptions:

 

Parameter Name Type Required Description
title string No The title of the pane. Used in pane header and for tooltip.
paneId string No The ID of the new pane. If the value is not passed, the ID value is auto-generated.
canClose Boolean No Whether the pane header will show a close button or not.
imageSrc string No The path of the icon to show in the panel switcher control.
hideHeader Boolean No Hides the header pane, including the title and close button. Default value is false.
isSelected Boolean No When set to false, the created pane is not selected and leaves the existing pane selected. It also does not expand the pane if collapsed.
width Number No The width of the pane in pixels.
hidden Boolean No Hides the pane and tab.
alwaysRender Boolean No Prevents the pane from unmounting when it is hidden.
keepBadgeOnSelect Boolean No Prevents the badge from getting cleared when the pane becomes selected.

 

 

Sample Code to Open HTML Page:

 

Check Weather the pane is already opened or not. If opened Close the pane

 

 

 

var currentPane = Xrm.App.sidePanes.getSelectedPane();
if (currentPane !== null && currentPane !== undefined && currentPane.paneId === "PANIDUNIQUENAME") {
var promotionPane = Xrm.App.sidePanes.getPane("PANIDUNIQUENAME");
promotionPane.close();
}

 

 

 

Below code for Opening the HTML page in Side pan

 

 

try { 
 Xrm.App.sidePanes.createPane({
 title: "PANID",
 paneId: "PANIDUNIQUENAME",
 canClose: true
 }).then((pane) => {
 pane.navigate({
 pageType: "webresource",
 webresourceName: "/webresources/yourhtmlpage.html"
 });
 });
 }
 catch (e) {
 throw e;
 }

 

 

If you want to pass any parameter from form to HTML in Side Pan

 

 

try { 
var formContext = primaryControl;
var qs = "guidofRecord=" + formContext.data.entity.getId().replace('{', '').replace('}', ''); // guidofRecord = you can pass any dummy variables
 Xrm.App.sidePanes.createPane({
 title: "PANID",
 paneId: "PANIDUNIQUENAME",
 canClose: true
 }).then((pane) => {
 pane.navigate({
 pageType: "webresource",
 webresourceName: "/webresources/yourhtmlpage.html"
 data: encodeURIComponent(qs)
 });
 });
 }
 catch (e) {
 throw e;
 }

 

 

 

Thats it 🙂

Comments

*This post is locked for comments