In my previous post, I shared with you how to use Microsoft CRM’s internal function to show a dialog window in Dynamics CRM 2013 inline style. In this post, I will provide a step-by-step guide on how to build your own dialogs in CRM 2013 style.
Let’s assume that we’ve built an html webresource and want to call it. The following code will help you to do that:
//Passing parameters to webresource
var addParams = "Param1=" + param1 + "&Param2=" + param2;
var webresourceurl = "/webresources/new_/webresource.htm?Data=" + encodeURIComponent(addParams);
//If you don't need to pass any parameters use following code instead:
//var webresourceurl = "/webresources/new_webresource.htm";
var DialogOptions = new Xrm.DialogOptions();
DialogOptions.width = 500;
DialogOptions.height = 500;
Xrm.Internal.openDialog(Mscrm.CrmUri.create(webresourceurl), DialogOptions, null, null, callBackFunction);
function callBackFunction(result) {
alert(result);
}
Take this sample code and adapt it to your needs and use. The following part is related to building the dialog.
If you used parameters while calling the dialog, you can use the following helper method to get the values of the parameters:
function ParseQueryString(query) {
var result = {};
if (typeof query == "undefined" || query == null) {
return result;
}
var queryparts = query.split("&");
for (var i = 0; i < queryparts.length; i++) {
var params = queryparts[i].split("=");
result[params[0]] = params.length > 1 ? params[1] : null;
}
return result;
}
To get parameters, you can use following code:
var passedparams = ParseQueryString(GetGlobalContext().getQueryStringParameters()["Data"]); alert(passedparams.Param1); alert(passedparams.Param2);
Here is the code of the whole dialog page:
<html>
<head>
<title></title>
<script type="text/javascript" src="../ClientGlobalContext.js.aspx"></script>
<style type="text/css">
body
{
direction: LTR;
margin: 0px;
border: 0px;
cursor: default;
font-family: Segoe UI,Tahoma,Arial;
font-size: 11px;
}
.ms-crm-RefreshDialog-Header
{
top: 0px;
position: absolute;
width: 96%;
height: 75px;
padding-top: 10px;
background-color: #FFFFFF;
border-bottom-color: #A4ABB2;
}
DIV.ms-crm-RefreshDialog-Header-Title
{
font-weight: Lighter;
font-size: 27px;
font-family: Segoe UI Light, Segoe UI, Tahoma, Arial;
margin-left: 30px;
margin-right: 30px;
color: #262626;
}
.ms-crm-TextAutoEllipsis
{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ms-crm-RefreshDialog-Header-Desc
{
padding-top: 4px;
font-family: Segoe UI,Tahoma,Arial;
margin-left: 30px;
margin-right: 30px;
color: #666666;
font-size: 12px;
}
.ms-crm-RefreshDialog-Main
{
font-size: 12px;
top: 90px;
position: absolute;
bottom: 49px;
vertical-align: top;
width: 95%;
font-family: Segoe UI,Tahoma,Arial;
color: #444444;
background-color: #FFFFFF;
border-bottom-color: #A4ABB2;
right: 30px;
left: 30px;
}
.ms-crm-RefreshDialog-Footer
{
position: absolute;
bottom: 0px;
width: 100%;
min-width: 288px;
height: 44px;
text-align: right;
background-color: #F8F8F8;
border-top-color: #FFFFFF;
}
.ms-crm-RefreshDialog-Button
{
color: #444444;
background-color: #FFFFFF;
height: 24px;
font-family: Segoe UI,Tahoma,Arial;
border: 1px solid #C6C6C6;
background-image: none;
margin-top: 10px;
width: auto;
min-width: 80px;
white-space: nowrap;
font-size: 12px;
line-height: 16px;
width: 84px;
text-align: center;
cursor: pointer;
background-repeat: repeat-x;
padding-left: 5px;
padding-right: 5px;
}
</style>
</head>
<body>
<div class="ms-crm-RefreshDialog-Main-Container">
<div class="ms-crm-RefreshDialog-Header" id="tdDialogHeader">
<div id="dialogHeaderTitle" class="ms-crm-RefreshDialog-Header-Title ms-crm-TextAutoEllipsis"
title="Your dialog header" style="width: 75%;">Your dialog header</div>
<div id="dialogHeaderDesc" class="ms-crm-RefreshDialog-Header-Desc"
title="Your dialog additional description">Your dialog additional description</div>
<div id="DlgHdBodyContainer" class="ms-crm-RefreshDialog-Main">
Put your controls here
</div>
</div>
<div class="ms-crm-RefreshDialog-Footer" id="tdDialogFooter">
<button id="btnOK" onclick="Mscrm.Utilities.setReturnValue(true); closeWindow();" type="button"
class="ms-crm-RefreshDialog-Button" tabindex="1" style="margin-left: 8px;">OK</button>
<button id="cmdDialogCancel" onclick="closeWindow();" type="button" class="ms-crm-RefreshDialog-Button"
tabindex="1" style="margin-left: 8px; margin-right: 30px">Cancel</button>
</div>
</div>
</body>
</html>
Here are several tips:
1. Remember regarding location of ClientGlobalContext.js.aspx relatively to your webresource.
2. If you want to return something to a callback function you’ve declared during the call of dialog, use this snippet from the btnOK button:
Mscrm.Utilities.setReturnValue(ValueToPass);
3. If you want to close dialog from your dialog controls, use the closeWindow method.
All this information I got while building a simple dialog shown in the following picture (function – possibility to merge Sales Orders that is not available out-of-box):
All provided scripts and approaches are not recommended because internal CRM methods are used and your code could be broken if any of the used methods are changed during the installation of updates.
1 Comment