Open HTML in modal pop up in D365 CE(CRM)

While opening HTML using JavaScript it opens in another window or in the same window. This can create confusion for the end-user, users can either loose focus or they might need to reopen the page which is not a good practice.

In this blog, we will look at how we can open the modal pop-up on the click of a button.

Implementation

Syntax:

Xrm.Navigation.navigateTo(pageInput,navigationOptions).then(successCallback,errorCallback);

Explanation

Xrm.Navigation.navigateTo requires two parameters.

pageInput
navigationOptions

pageInput: Here you define you want to open HTML Web resource or want to navigate to the entity list(View).

For HTML Web Resource:

pageType: “webresource”, //pass this as it is
webresourceName: “vv_TestHTMLCustomizations” // The name of HTML web resource to load.

navigationOptions: Options for navigating to a page: whether to open inline or in a dialog. If you don’t specify this parameter, the page is opened inline by default.

Below shown is the Code:

loadHTML = function() {
     var pageInput = {
    pageType: "webresource", 
    webresourceName: "vv_TestHTMLCustomizations"
};
var navigationOptions = {
    target: 2,
    width: 700,
    height: 500,
    position: 1
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
    function success() {
     // Handle dialog closed
           console.log("Inside Success");
    },
    function error() {
          Xrm.Navigation.openAlertDialog({ text: error.message });
    }
);
 }

Call the “loadHTML” function on the click of a button.
After doing everything successfully when you will click on a button it will open modal pop up like below.