Open dialog sample

5/10/2016 - 7:55 AM

// this is triggered by ribbon button
function CreateCaseCommand(selectedItems, primaryEntityId)
{
  //CreateCase(selectedItems, primaryEntityId);
  var DialogOption = new Xrm.DialogOptions;
  DialogOption.width = 800; 
  DialogOption.height = 600;
  var dialogArguments = "id="+primaryEntityId;

  Xrm.Internal.openDialog("/WebResources/ad_/html/CreateCase.html", DialogOption, dialogArguments, null, function(resultObj) {
    	var description = resultObj.description;
		var resource = resultObj.resource;
		var selectedItems = resultObj.selectedItems;

		Xrm.Page.ui.clearFormNotification("CREATINGCASE_RESOURCENOTIFICATION");
		Xrm.Page.ui.clearFormNotification("CREATINGCASE_ITEMSNOTIFICATION");
		Xrm.Page.ui.clearFormNotification("CREATINGCASE_ERRORNOTIFICATION");
		
		if (!resource) {
			Xrm.Page.ui.setFormNotification("No resource was selected!", "WARNING", "CREATINGCASE_RESOURCENOTIFICATION");
			return;
		}

		if (!selectedItems || selectedItems.length == 0) {
			Xrm.Page.ui.setFormNotification("No products were selected!", "WARNING", "CREATINGCASE_ITEMSNOTIFICATION");
			return;
		}

		Xrm.Page.ui.setFormNotification("Creating case and activities. Please wait.", "INFO", "CREATINGCASE_NOTIFICATION");

		try {
			CreateCaseForProducts(selectedItems, primaryEntityId, resource, description);
		}
		catch(err) {
			Xrm.Page.ui.setFormNotification("Error occured while creating case. Check that Order is not yet fulfilled.", "ERROR", "CREATINGCASE_ERRORNOTIFICATION");
			Xrm.Page.ui.clearFormNotification("CREATINGCASE_NOTIFICATION");
			return;
		}
		
		Xrm.Page.ui.clearFormNotification("CREATINGCASE_NOTIFICATION");
		Xrm.Page.ui.setFormNotification("Finished creating case.", "INFO", "");		
	});
}


//!!! Place this in your dialog html (InitDialog is our Entry point!!!)
function InitDialog()
{
  var arguments = ParseQueryString(getDialogArguments());

  window.adjQuery = jQuery.noConflict(true);
  window.adjQuery("#error").hide();
  window.adjQuery("#divStatus").hide();
  window.adjQuery("#btnOk").hide();

	window.adjQuery("#source").kendoGrid(createGridObject());
	window.adjQuery("#destination").kendoGrid(createGridObject());			 

	LoadAndFillResources();
  var data = LoadWriteInProducts(arguments.id);
	var dataSource = new kendo.data.DataSource({
  	data: data,
  	pageSize: gridConfig.pageSize
  });

window.adjQuery('#source').data('kendoGrid').setDataSource(dataSource);
window.adjQuery('#source').data('kendoGrid').refresh();

      window.adjQuery("#btnOk").show();
}

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;
}

//This function returns custom returnObj to success callback
function OkButtonClicked() {
    window.adjQuery("#cmdDialogCancel").hide();
    window.adjQuery("#btnOk").hide();
    window.adjQuery("#divStatus").show();

    var resource = window.adjQuery("#selResource option:selected").val(); // text();
    var description = window.adjQuery("#description").text();

    var returnObj = {
        resource: resource,
        description: description,
        selectedItems: GetSelection()
    };

    Mscrm.Utilities.setReturnValue(returnObj);

    CloseDialog();
}

//Close the dialog box
function CloseDialog() {

    try {
        closeWindow(true);  
    }
    catch (e) {
    }
}

createcase.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Create Case from Sales Order</title>
	<link rel="stylesheet" href="../css/kendo_common.min.css" />
	<link rel="stylesheet" href="../css/kendo.common.office365.css" />
	<link rel="stylesheet" href="../css/kendo.office365.css" />

    <script src="../../ClientGlobalContext.js.aspx"></script>    
    <script src="../scripts/xrmservicetoolkit.js"></script>    
    <script src="../scripts/jquery1.12.3.min.js"></script>
    <!--script src="../scripts/json2.js"></script-->
	<script src="../scripts/kendo.all.min.js"></script>
	<script src="../scripts/salesorder.js"></script>

    <script language="JavaScript">
		
		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;
		}

        function InitDialog()
        {
            var arguments = ParseQueryString(getDialogArguments());

            window.adjQuery = jQuery.noConflict(true);
            window.adjQuery("#error").hide();
            window.adjQuery("#divStatus").hide();
            window.adjQuery("#btnOk").hide();

			window.adjQuery("#source").kendoGrid(createGridObject());
			window.adjQuery("#destination").kendoGrid(createGridObject());			 

			LoadAndFillResources();
            var data = LoadWriteInProducts(arguments.id);
			var dataSource = new kendo.data.DataSource({
  				data: data,
  				pageSize: gridConfig.pageSize
			});

			window.adjQuery('#source').data('kendoGrid').setDataSource(dataSource);
			window.adjQuery('#source').data('kendoGrid').refresh();
			
            window.adjQuery("#btnOk").show();
        }

		// load write-in products for sales order 
		function LoadWriteInProducts(salesorderid) {
			var data = new Array();
			var products = GetAllWriteInProducts(salesorderid);
					
			if (!products || products.length == 0)
				return data;
				
			for(i=0; i<products.length; i++)
			{
				var p = newProduct(products[i].id, "No product description");
				if (products[i].attributes && products[i].attributes.productdescription && products[i].attributes.productdescription.value) {
					p.Product = products[i].attributes.productdescription.value;
				}
				data[i] = p;
			}
			
			return data;
		}

		// load resources 
		function LoadAndFillResources() {
		debugger;
			var resources = GetResources();
					
			if (!resources || resources.length == 0)
				return data;
				
			for(i=0; i<resources.length; i++)
			{
                window.adjQuery('#selResource').append(window.adjQuery("<option></option>").attr("value", resources[i].id).text(resources[i].attributes.fullname.value));
			}			
		}

		function newProduct(id, description) {
			return { id: id, Product: description };
		}
		

        function WriteMessage(message)
        {
            window.adjQuery("#error").html(message);
            window.adjQuery("#error").show();
        }

        //Close the dialog box
        function CloseDialog() {

            try {

                closeWindow(true);  
            }
            catch (e) {
            }
        }
       
		var gridConfig = {
			columns: [
			{
				field: "id",
				title: "id",
				hidden: true
			},
			{
				field: "Product",
				title: "Product",
				width: 175
			}
			],
			sorting: {
				mode: "single",
				allowUnsort: false,
				field: "Product",
				direction: "asc"
			},
			pageSize: 10,
			selectable: "multiple"
		};	
			
        function createGridObject()
		{
			return {
				dataSource: {
					pageSize: gridConfig.pageSize,
					sort: {
						field: gridConfig.sorting.field,
						dir: gridConfig.sorting.direction
					}
				},
				sortable: {
					mode: gridConfig.sorting.mode,
					allowUnsort: gridConfig.sorting.allowUnsort
				},
				selectable: gridConfig.selectable,
				pageable: {
					buttonCount: 5
				},
				height: 250,
				scrollable: true,
				navigatable: false,
				columns: gridConfig.columns
			};
		}
        
        function GetSelection() {
     		var destination = window.adjQuery("#destination").data("kendoGrid");
     		var selectedItems = destination.dataSource.data();
			var items = new Array();

			for(i=0; i<selectedItems.length; i++)
			{			
				items.push(selectedItems[i].id);
			}

			return items;
        }
        
		function AddToSelection()
		{
			var source = window.adjQuery("#source").data("kendoGrid");
			var destination = window.adjQuery("#destination").data("kendoGrid");
			var items = new Array();

			source.select().each(function() {
				items[items.length] = source.dataItem(window.adjQuery(this));
			});
			
			for(i=0; i<items.length; i++)
			{
				destination.dataSource.add(newProduct(items[i].id, items[i].Product));
				source.dataSource.remove(items[i]);
			}
		}
		
		function RemoveFromSelection()
		{
			var source = window.adjQuery("#source").data("kendoGrid");
			var destination = window.adjQuery("#destination").data("kendoGrid");
			var items = new Array();

			destination.select().each(function() {
				items[items.length] = destination.dataItem(window.adjQuery(this));
			});
			
			for(i=0; i<items.length; i++)
			{
				source.dataSource.add(newProduct(items[i].id, items[i].Product));
				destination.dataSource.remove(items[i]);
			}
		}
		
        function OkButtonClicked() {
            window.adjQuery("#cmdDialogCancel").hide();
            window.adjQuery("#btnOk").hide();
            window.adjQuery("#divStatus").show();

            var resource = window.adjQuery("#selResource option:selected").val(); // text();
            var description = window.adjQuery("#description").text();

            var returnObj = {
                resource: resource,
                description: description,
                selectedItems: GetSelection()
            };

            Mscrm.Utilities.setReturnValue(returnObj);

            CloseDialog();
        }
    </script>

    <link rel="stylesheet" type="text/css" href="/_common/styles/fonts.css.aspx?lcid=1033&amp;ver=-98778785" id="/_common/styles/fonts.css.aspx?lcid=1033&amp;ver=-98778785">
    <link rel="stylesheet" type="text/css" href="/_common/styles/global.css.aspx?lcid=1033&amp;ver=-98778785" id="/_common/styles/global.css.aspx?lcid=1033&amp;ver=-98778785">
    <link rel="stylesheet" type="text/css" href="/_common/styles/theme.css.aspx?lcid=1033&amp;theme=Outlook15White&amp;ver=-98778785" id="/_common/styles/theme.css.aspx?lcid=1033&amp;theme=outlook15white&amp;ver=-98778785">
    <link rel="stylesheet" type="text/css" href="/_forms/controls/controls.css.aspx?lcid=1033&amp;ver=-98778785" id="/_forms/controls/controls.css.aspx?lcid=1033&amp;ver=-98778785">
    <link rel="stylesheet" type="text/css" href="/_controls/notifications/notifications.css.aspx?lcid=1033&amp;ver=-98778785" id="/_controls/notifications/notifications.css.aspx?lcid=1033&amp;ver=-98778785">
    <link rel="stylesheet" type="text/css" href="/_forms/controls/form.css.aspx?lcid=1033&amp;ver=-98778785" id="/_forms/controls/form.css.aspx?lcid=1033&amp;ver=-98778785">
    <link rel="stylesheet" type="text/css" href="/_common/styles/dialogs.css.aspx?lcid=1033&amp;ver=-98778785" id="/_common/styles/dialogs.css.aspx?lcid=1033&amp;ver=-98778785">

    <style type="text/css">
        div.ms-crm-RefreshDialog-Header {
            padding-bottom: 10px;
        }
    </style>

</head>

<body onload="InitDialog();">
        <div class="ms-crm-RefreshDialog-Main-Container">
            <div class="ms-crm-RefreshDialog-Header" id="tdDialogHeader">
                <a class="ms-crm-RefreshDialog-FirstTopButton" href="#" id="btnCross" title="Cancel">
                    <img onclick="if (!Mscrm.Utilities.resetValidationFailedElement()) { CloseDialog(); return false; }"
                         src="/_imgs/CloseDialog.png?ver=-98778785" style="height:16px;width:16px;">
                </a>

                <div class="ms-crm-RefreshDialog-Header-Title ms-crm-TextAutoEllipsis" id="dialogHeaderTitle" style="width:85%;width:calc(100% - 95px) !important;" title="Create Case">
                    Create Case
                </div>

                <div class="ms-crm-RefreshDialog-Header-Desc" id="dialogHeaderDesc"
                     title="Create new payment reminder">
                    Create Case from Sales Order.
                </div>
            </div>

            <div class="ms-crm-RefreshDialog-Main" id="DlgHdBodyContainer">
                <div class="ms-crm-RefreshDialog-Warning" id="divWarning">
                    <div class="ms-crm-IE7-Height-Fix-Dummy-Container" id="dummyDivforIE7">
                        <table width="100%" cellspacing="3" cellpadding="0">
                            <colgroup>
                               <col width="100">
                               <col>
                               <col width="20">
                               <col>
                            </colgroup>

                            <tbody>
                                <tr>
                                  <td class="ms-crm-Field" colspan="3"><label>Products</label></td>
                                  <td class="ms-crm-Field"><label>Selected products</label></td>
                               </tr>
								<tr>
                                  <td colspan="2">
                                  	<div id="source"></div>
								  </td>
                                  <td>
                                  	<button id="add" class="k-primary" onclick="AddToSelection()" style="margin-bottom: 10px;"><font size=4><b> >>> </b></font></button>
									<button id="remove" class="k-primary" onclick="RemoveFromSelection()"><font size=4><b> <<< </b></font></button>
                                  </td>
                                  <td>
									<div id="destination"></div>
								  </td>
                               </tr>
                                <tr>
                                  <td class="ms-crm-Field"><label for="selResource">Resource</label></td>
                                  <td colspan="3">
                                     <select name="selResource" class="ms-crm-SelectBox " id="selResource" style="-ms-ime-mode: auto; width: 100%" req="0">
                                     </select>
                                  </td>
                               </tr>
                               <tr>
                                  <td style="padding-top: 20px;" colspan="2"><label for="description">Description</label></td>
                               </tr>
                               <tr>
                                  <td colspan="4">
                                     <div class="ms-crm-Input-Container" style="height: 75px;"><textarea class="ms-crm-Input " id="description" style="height: 75px; position: relative;" maxlength="256"></textarea></div>
                                  </td>
                               </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div id="divFillBg" style="display:none;position:absolute;top:80px;left:20px;height:23px;width:360px;background-color:#ffffff;">
                &nbsp;
            </div>

            <div id="divFill" style="display:none;position:absolute;top:80px;left:20px;height:23px;width:0px;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#00ff00, EndColorStr=#00cc00);background: -ms-linear-gradient(top, #00ff00, #00cc00);background: -webkit-gradient(linear, left top, left bottom, from(#00ff00), to(#00cc00));background: -moz-linear-gradient(top, #00ff00, #00cc00);">
                &nbsp;
            </div>

            <div id="divStatus" style="position:absolute;top:120px;left:19px;height:23px;width:360px;">
                <table class="ms-crm-LoadingContainer" style="width:100%;height:100%">
                    <tbody>
                        <tr class="ms-crm-LoadingContainer">
                            <td style="vertical-align: middle" align="center">
                                <img id="DialogLoadingDivImg" alt="" src="/_imgs/AdvFind/progress.gif">
                                <br>Loading...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="ms-crm-RefreshDialog-Footer" id="tdDialogFooter">
                <button class="ms-crm-RefreshDialog-Button" id="btnOk" onclick="OkButtonClicked();" style="margin-left:8px;" type="button">Create Case</button>
                <button class="ms-crm-RefreshDialog-Button" id="cmdDialogCancel" onclick="CloseDialog();" style="margin-left:8px;margin-right:30px" type="button">Cancel</button>
            </div>
        </div>
    </body>

</html>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Open dialog sample