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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
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:
|
1
2
3
4
5
6
7
8
9
10
11
|
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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Modal Dialog</title>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css" />
<script type="text/javascript" src="../ClientGlobalContext.js.aspx"></script>
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
<style type="text/css">
.footer {
position: fixed;
bottom: 0;
right: 0;
padding-bottom: 10px;
padding-right: 10px;
}
.footerButton {
width: 150px;
}
</style>
<script type="text/javascript">
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>
<body onload="onPageLoad();">
<div class="footer">
<button class="ms-Button ms-Button--primary footerButton" id="btnOK">
<span class="ms-Button-label">OK</span>
</button>
<button class="ms-Button ms-Button--primary footerButton" id="btnCancel">
<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();
|