در پست قبلی در مورد نحوه استفاده از توابع داخلی 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>
تمامی اطلاعات داده شده در این پست جهت نمایش دیالوگ مطابق شکل زیر استفاده شده‌اند.
توجه نمایید که سفارشی‌سازی‌های گفته شده پشتیبانی نشده هستند و ممکن است با ارائه Rollup از بین بروند.
این پست قبلاً به زبان اصلی در این پیوند منتشر شده است.
|
