show dialog in Dynamics 365/PowerApps

Here are ways that were used by developers to show Modal Dialogs:

Xrm.Internal.openDialog
Alert.js
Custom Dialogs that used different frameworks like jQuery UI Dialog or similar

But the main and common issue of options available was that those approaches can’t be considered as supported.

And it stayed the same for years until Microsoft introduced Xrm.Navigation.navigateTo method.

So what’s new here?

Here is the code that can be used to open a modal dialog:

var sessionId = new Date().getTime() + "";

var data = {

customParameter: "Custom Parameter Value",

sessionId: sessionId

};

//custom parameter that you need in the modal dialog

var dialogParameters = {

pageType: "webresource",//required

webresourceName: "ab_/ModalDialog.html",//Html Webresource that will be shown

data: data//optional

};

var navigationOptions = {

target: 2,//use 1 if you want to open page inline or 2 to open it as dialog

width: 400,

height: 300,

position: 1//1 to locate dialog in center and 2 to locate it on the side,

title: "The Title of the Dialog"

};

Xrm.Navigation.navigateTo(dialogParameters, navigationOptions).then(

function (returnValue) {

//returnValue is blank when "Cancel" button is clicked

if (!returnValue) {

return;

}

console.log(returnValue);

//Add your processing logic here

function(e) {

//put your error handler here

});

So far so good. When this code is called following dialog window is shown:

Next part is the extraction of parameters passed to the webresource. Firstly I tried getQueryStringParameters of GlobalContext in two combinations – GetGlobalContext().getQueryStringParameters and Xrm.Utility.GetGlobalContext().getQueryStringParameters and both calls did not bring the expected result. So… the last resort is explicit parsing of the URL. The following code can be used for parsing:

function getUrlParameters() {

var queryString = location.search.substring(1);

var params = {};

var queryStringParts = queryString.split("&");

for (var i = 0; i < queryStringParts.length; i++) {

var pieces = queryStringParts[i].split("=");

params[pieces[0].toLowerCase()] = pieces.length === 1 ? null : decodeURIComponent(pieces[1]);

}

return params;

}

Now let’s make this dialog look closer to standard dialogs and add “OK”/”Cancel” buttons to it. There are multiple ways of doing this. I decided to use “Office UI Fabric” for this purpose. Here is the code of the dialog page:

<!DOCTYPE html>

<html>

<head>

<title>Modal Dialog</title>

.footer {

position: fixed;

bottom: 0;

right: 0;

padding-bottom: 10px;

padding-right: 10px;

}

.footerButton {

width: 150px;

}

</style>

function onPageLoad() {

var urlParams = getUrlParameters();

var cancelButton = document.getElementById("btnCancel");

new fabric['Button'](cancelButton, function() {

window.close();

});

var okButton = document.getElementById("btnOK");

new fabric['Button'](okButton, function(){

//Put any logic you want here

window.returnValue = "Put the data you want to return here";

window.close();

});

}

</script>

</head>

</button>

<span class="ms-Button-label">Cancel</span>

</button>

</div>

</body>

</html>

Here is how it looks like after modifications:

The following code can be used to close it:

1	window.close();

show dialog in Dynamics 365/PowerApps

Share this: