Ms crm formlarını javascript ‘le özelleştirmek

Javascript Kodlarıyla crm form larında küçük özelleştirmeler yapacağımızı daha önceki yazımda kısaca bahsetmiştim. Bu yazımda ise form içerisine nasıl JavaScript yazabiliriz, basit örneklerle anlatacağım. Öncelikle Ms crm 4.0 ayarlar (settings) kısmına tıklayarak özelleştirmek istediğim varlığı seçiyorum
( daha önceki makalemde bu konulardan bahsetmiştim bu yüzden kısaca geçiyorum.)
Daha sonra özelleştir(customization) linkine tıklıyorum ve özelleştirmek istediğimi varlığı(entity) seçiyorum . son olarak altaki resimde gördüğünüz gibi form özelliğine tıklıyorum ve özelleştirmek istediğim formu getiriyorum.






Şimdi ise normal özelleştirme standartların biraz dışına çıkarak normalde desteklenmeyen fakat developerların ve kullanıcıların ihtiyaçları doğrultusunda kullanıcılar için esnek özellikleri ve ekranları hazırlayabiliriz. Özellikle bu ekranları hazırlarken komplike kod blokları yazmaya gerek kalmadan işimizi javascript kodlarıyla halledebileceğimizi göreceğiz.
Form üzerinde üç farklı olay(event) için JavaScript yazabiliriz bu olaylar onLoad(yüklendiğinde),onSave(kaydedildiğinde),onChange(değiştiğinde). Öncelikle bu olayları birlikte inceleyelim ve daha sonra form içinde nerelere kod yazacağımızı göreceğiz.

onLoad: Form açıldığında çalışacak olan JavaScript Kodunu bu olaya yazarız.
onSave: Form kaydedildiğinde çalışacak olan JavaScript Kodunu bu olaya yazarız.
onLoad ve onSave için Form Properties butonuna tıklanarak açılan ekrandan seçili event için Edit denir.






Önce onLoad için penceremizi açalım ve ilk örneğimize başlayalım. İlk örneğimiz sayfa ilk yüklendiğinde crm formunda ok/cansel şeklinde Message Box’lar oluşturmak olsun.

var cevap = window.confirm("işleme devam etmek için tamam(OK) basın,işlemi iptal etmek için iptale(Cansel) basın.");
if (cevap) {
//kullanıcı tamama basarsa kodu burada işleyecektir.
}
else {
//kullanıcı iptale basarsa kodu burada işleyecektir.
}



Bu ekranda olay etkindir seçeneğini işaretlemediğimiz zaman yazdığımız scriptleri çalıştırmayacaktır bu yüzden bu seçeneği unutmamalıyız.

Daha sonra Form Properties penceresini de kapatalım. Üst menüden Preview>Create Form seçeneği ile form test penceresini açarak test edelim.



Bu örneği formun onSave olayı içinde uygulaya biliriz.
onChange: alanlar (Field) üzerinde işlem yapıldığında çalışacak olan JavaScript Kodunu bu olaya yazarız.
onChange için alan (Field) üzerine çift tıklanır.


Açılan pencerede Events tabında Edit ‘e tıklarız.

onChange için ilk örneğimize başlayalım bu örneğimiz telefon(mask) formatı olsun. Yeni başlayanlar için biraz uzun bir örnek olabilir fakat bazı projelerde kullandığım için sizlerle paylaşmak istedim. Ayrıca mevcut alanlar ve sonradan eklenen (custom) alanlarıda nasıl kullanacağımızı gelecek dersde göreceğiz.

var objField = crmForm.all.telephone1;//telefon alanımızın alan ismini objfield değişkenine atıyorum
var sText=objField;
try {
if (objField.DataValue == null)//telefon alanımın text’i yani içindeki değer boş ise geri dönüyorum
return true;

var str = objField.DataValue;

// bosluklari kaldir
str = str.replace(/ /g, "");

// eger ilk karakter + ise geri kalanlar için numerik kontrolü yap
if (str.charAt(0) == '+') {
if (!IsNumeric(str.substr(1)))
{
// Hata
alert("Please use only numeric charecters at this field.");
objField.DataValue ="";
return false;
}
str = str.substr(0, 1) +' ' + str.substr(1, 2) + '( ' + str.substr(3, 3) + ') ' + str.substr(6, 3) + ' ' + str.substr(9, 2) + ' ' + str.substr(11, 2);
}
else {
// bosluklar silindikten sonra numerik kontrolü yap
if (!IsNumeric(str.substr(1))) {
// Hata
//alert("Please use only numeric charecters at this field.");
objField.DataValue ="";
return false;
}
else {
// 10 veya 11 karakterse uygun formata sok
if (str.length == 10 || (str.length == 11 && str.charAt(0) == '0')) {
// Formata sok
if (str.length == 10) {
str = "0" + str;
}
str = str.substr(0, 1) + '( ' + str.substr(1, 3) + ') ' + str.substr(4, 3) + ' ' + str.substr(7, 2) + ' ' + str.substr(9, 2);
}
else // 10 veya 11 karakter degilse hata mesaji ver
{
// Hata
alert("Please for domestic phone numbers use only '0 212 444 05 35' or '212 444 05 35' format at this field. for Overseas phone numbers put a '+' sign at the beginnig of Number.");
objField.DataValue ="";
return false;
}
}
}
objField.DataValue = str;
}
catch (err) {
txt = "(initialize) There was an error on this function.\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
function IsNumeric(sText)
{
var ValidChars = "0123456789";
var Char;
for (i = 0; i < sText.length; i++) {
Char = sText.charAt(i);
if (ValidChars.indexOf(Char) == -1) {
txt = " Please enter only numeric charecters at this field. \n\n";
txt += "Click OK to continue.\n\n";
objField.DataValue ="";
alert(txt);
return false;
}
}
return true;
}


Üst menüden Preview>Create Form seçeneği ile form test penceresini açarak test edelim.



Son olarak save and close tuşuna basıp kaydedip kapatıktan sonra form’un üst tarafında bulunan publish buttonuna basarak özelleştirmiş olduğumuz özellikleri yayımlarız. Crm form larında javascript le ilgili örnek kodlar yazmaya diğer makalelerimde devam edeceğim görüşmek dileğiyle....


Ercan Top | CRM Software Developer
ercan.top@crmakademi.net
+90 534 335 6873