In my previous post, I described a way around on how to embed PCFs into MDA. During the investigation of what is possible, I found out that Xrm.Navigation.navigateTo ignores “navigationOptions” so it was not possible to show PCF in modal dialogs. I don’t like limitations, so I was looking for a way around it, and in this post, I will provide a way around to use this pattern.
Panels
With panels, everything is relatively easy. Usage of the following script initializes and shows PCF inside the panel:
|
1 2 3 4 5 6 7 8 9 10 11 |
var pane = await Xrm.App.sidePanes.createPane({ title: "PCF Embedded in Pane", paneId: "PCFEmbeddedPane", canClose: false, width: 400 }); await pane.navigate({ pageType: "control", controlName: "ab_AButenko.EmbeddedPCF" }); |
Dialogs
With the dialogs, everything is not as straightforward as it was with Panels because Xrm.Navigation.navigateTo ignores “navigationOptions” parameter. At the same time, it works fine with HTML webresources, and that was the key clue for me. I will use html webresource in the opening script, and inside of html webresource I will navigate to PCF control. Here is how it might look:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Auto Redirect</title> <script> window.onload = function() { window.location.href = "/main.aspx?pagetype=control&controlName=ab_AButenko.EmbeddedPCF&navbar=off&cmdbar=false"; }; </script> </head> <body> </body> </html> |
And here is the code on how to open the webresource in dialog mode:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var pageInput = { pageType: "webresource", webresourceName: "ab_/PCFRedirector.html" }; var navigationOptions = { title: "PCF in Dialog", target: 2, width: 500, height: 400, position: 1 }; await Xrm.Navigation.navigateTo(pageInput, navigationOptions); |