Friday, June 13, 2014

Dynamics CRM 2013: Step-by-step creating dialog windows

In my previous post I shared how to use Microsoft CRM internal function to show dialog window in Dynamics CRM 2013 inline style. In this post I will write step-by-step guide how to build own dialogs in CRM 2013 style.
Let’s assume that we’ve build html webresource and want to call it. 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";

//First parameter - prepared url of dialog
//Second parameter - control from which you open dialog
//Third and Fourth - width and height
var dialogwindow = new Mscrm.CrmDialog(Mscrm.CrmUri.create(webresourceurl), window, 500, 500);

//use setCallbackReference method to call some handler once dialog is closed
//to result variable would be returned result of dialog call
dialogwindow.setCallbackReference(function (result) { alert(result) });

//call this method to show dialog
dialogwindow.show();



Take this sample code adapt it to your needs and use. Following part is related to building of dialog.

If you used parameters during the call of dialog you can use following helper method to get values of 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 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. In case you want to return something to callback function you’ve declared during call of dialog – use snippet from btnOK button:

Mscrm.Utilities.setReturnValue(ValueToPass);

3. If you want to close dialog from your dialog controls just call closeWindow method.

All of this information I have got during building simple dialog that is shown on 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 in case any of used methods would be changed during installation of updates.