Ufuk Aytaş

Bu makalede, SharePoint 2010 ile gelen Model Dialog ile çalışmak için gerekli bilgileri ve örnekleri inceleyeceğiz.

Sharepoint 2010 ile birlikte gelen Model Dialog ile dialog pencereleri açarak gereksiz postback ve sayfa yönlendirmelerinden kurtulmaktayız.

Peki Model Dialog ile neler yapabiliriz:

* Model Dialog içerisinde html bir içerik, resim görüntülenebilir.
* Herhangi bir web sayfasını model dialog içerisinde gösterebiliriz.
* Dilersek web part içerisinden application page bir sayfayı çağırabiliriz.
* Göster kapat düğmesini açık/kapalı konumda gösterebiliriz.

Kullanım Yöntemlerine geçmeden önce SP.UI.ModalDialog.showModalDialog’un aldığı parametere değerlerini inceleyelim.

* width: açılan formun genişliğini ayarlama
* height: açılan formun yüksekliğini ayarlama
* Html: HTML içeriği pop up form da göstermek için kullanılır
* Url: Sayfa url
* DialogReturnValueCallback: Form kapatıldığında çağıralacak olan javascript functionı.
* AllowMaximize: True/false değerleri alır
* ShowClose: True/false değerleri alır

Kullanım Yöntemleri :

1 – P.UI.ModalDialog.ShowPopupDialog Javascript Function çağırma yöntemi.

Açılacak sayfa Url’i ni tanımlayıp diğer genişlik ve yükseklik değerlerinin otomatik olarak tanımlandığı yöntemdir.

<a href="javascript:SP.UI.ModalDialog.ShowPopupDialog('/sites/test_page.aspx');" >Open Pop Up Yöntem 1</a>

2 – Javascript çapırma yöntemini OpenPopUpPage ile parametre göndererek çalıştırma.

<a href=”javascript:SP.UI.ModalDialog.OpenPopUpPage(‘/sites/test_page.aspx’, null, 600, 300);” id=”A2″>Open Pop Up Yöntem 2</a>

3 – Bu yöntemde javascript function çağırarak modal dialog penceresi açmaktayız. url ile model dialog da çağıracağımız sayfayı tanımlıyoruz.

width ve height’i function da tanımlayarak istediğimiz değerleri atayabiliriz.

<script language=”javascript” type=”text/javascript”>

function OpenModalDialog() {
var dialogOptions = SP.UI.$create_DialogOptions();
dialogOptions.url = ‘/Pages/test_page.aspx’;
dialogOptions.width = 650;
dialogOptions.height = 300;
SP.UI.ModalDialog.showModalDialog(dialogOptions);
return false;
}

</script>

<a href=”#” onclick=”javascript:OpenDialogUsing_showModalDialog(); return false;”>Open Pop Up Yöntem 3</a>

4- Form içinde HTML gösterme

<div id=”DialogContent”>Hello World</div>

<script type=”text/javascript”>

function openHelloDialog() {
var options = SP.UI.$create_DialogOptions();
options.title = “My Dialog Title”;
options.width = 600;
options.height = 400;
options.html = document.getElementById(‘DialogContent’);

SP.UI.ModalDialog.showModalDialog(options);
}

</script>

<input type=”button” onclick=”openHelloDialog();” value=”Open Dialog”/>