How to display external webpage inside Dynamics 365/ CDS model driven app

Do you have the following requirements?

• Your customer have a web application built on MVC or ASP.NET classic and they want to show up a webpage of that application embedded in your Dynamics 365 App.
• Your customer have a non .NET web application which they want to show embedded on a Dynamics 365 record on demand

If your requirement is similar to the ones I mentioned, you will have a solution at the end of this blog. And I had exactly the same requirement for my customer where they needed to show up a different application to approve an account on click of a button on the account form.

As you can see from the screenshot below, we have a button – “BING SEARCH” on the account form. When the button is clicked, we will display the BING search with a custom search, embedded on the account. One way is showing the search page as pop-up but pop-up window designs are something out of fashion now.

Turned out it’s actually quite easy and Microsoft infact have an API to do just that. But this API is not explored much. The documentation for the same is right here. While it is neatly documented, the purpose of certainly demands a few more lines.

Xrm.Panel.loadPanel(url, title)

For this example I am going to show on how to display BING search page with customized search query string. I will take the value in Account name field and search with the value. But you can literally show up any page here. Below is the code on button click. Notice how I sent custom search parameter. You can also do the same for your requirement if it necessitates.

// JavaScript source code
function showAccountApprovalPage(fc) {
   var searchString = fc.getAttribute("name").getValue();
   var url = "https://bing.com/search";
   Xrm.Panel.loadPanel(url + "?q=" + searchString, "BING SEARCH");
}

And below is the behavior when I click on ribbon button.

Cool isn’t it? However you should be aware of few things before you use this. All these statements are valid as of the time of writing this blog.

• The function is only available in WebClient
• There is no function to hide the panel once the panel is shown.
• The webpage is shown inside a iframe. So you cannot display any web site which does not allow itself to be loaded inside iframe (like GOOGLE, GMAIL etc.)
• This can be displayed anywhere on Model driven apps
• Not supported on mobile devices.

Hope this helps!

You should also like the below posts

Debajit Dutta
(Business Solutions MVP)