ایجاد پنجره سفارشی برای دیالوگ‌ها در CRM 2013

در پست قبلی در مورد نحوه استفاده از توابع داخلی Microsoft CRM جهت نمایش Modal دیالوگ‌ها بحث کردیم. در این پست قدم به قدم با نحوه ایجاد دیالوگ‌های سفارشی در CRM 2013 آشنا می‌شویم.

فرض کنید که Web Resource ای از نوع html ایجاد کرده‌ایم و درصدد فراخوانی آن هستیم:

 

//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();

از کدی که در ادامه می‌آید استفاده نمایید و آن را با توجه به نیاز خود تغییر دهید. آن‌چه در ادامه می‌آید، مربوط به ایجاد دیالوگ است. اگر پارامترهایی را در فراخوانی دیالوگ استفاده نموده باشید، از متد زیر جهت دریافت پارامترها می‌توانید استفاده نمایید:

 

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;

}

 

برای دریافت پارامترها از کد زیر استفاده نمایید:

 

var passedparams = ParseQueryString(GetGlobalContext().getQueryStringParameters()["Data"]);

alert(passedparams.Param1);

alert(passedparams.Param2);

 

در ادامه کد مربوط به تمام صفحه دیالوگ آمده است:

 

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

 

تمامی اطلاعات داده شده در این پست جهت نمایش دیالوگ مطابق شکل زیر استفاده شده‌اند.

دیالوگ سفارشی در CRM 2013

 

توجه نمایید که سفارشی‌سازی‌های گفته شده پشتیبانی نشده هستند و ممکن است با ارائه Rollup از بین بروند.

این پست قبلاً به زبان اصلی در این پیوند منتشر شده است.