Introduction

When HTML is opened using JavaScript, it can either open in the same window or a different one. This naturally can create ambiguity for the end-user, as the user can either lose focus or reopen the page, which is not a good practice.

In this blog, we will look at how we can open the model 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 whether you want to open the HTML Web resource or you want to navigate to the entity list(View).

For HTML Web Resource:

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

For entity list:

• pageType: ” entitylist”, //pass this as it is
• entityName: “account” // The logical name of the entity.
• viewId: “00000000-0000-0000-00AA-000010001002″ // Id of view

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

Below shown is the Code:

loadHTML = function() {
     var pageInput = {
     pageType: "webresource",
    webresourceName: "cf_TestHTMLCustomizations"
};
var navigationOptions = {
    target: 2,
    width: 400,
    height: 300,
    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 this function on click of button.

– After doing everything successfully when you will click on button it will open model pop up like below.

Refer for more details: https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/xrm-navigation/navigateto