27 Ocak 2010 Çarşamba

Sharepoint Modal Dialog Box

Sharepoint 2010 ile gelen yeniliklerden bir tanesi de DialogBox'dır.
Dialog Box; Öğenin detaylarını gösterme, güncelleme vs işlemleri gibi birçok işlemi Popup pencere şeklinde açarak ajax desteğiyle daha esnek ve güzel yapıda göstermektedir.
14 klasörü altında \TEMPLATE\LAYOUTS klasöründe bulunan .js dosyalari ile bu işlemi gerçekleştirebiliriz. Oluşturacağımız Dialog Options'a ait
  • width,
  • height,
  • dialogReturnValueCallback,
  • url,
  • x,
  • y,
  • title,
  • allowMaximize,
  • showMaximized,
  • showClose,
  • autoSize
parametrelerine değer atayabiliriz. Bu parametrelerin varolan değerleri bulunduğundan hepsini kullanmamıza gerek bulunmamaktadır.
DialogBox gösterme işlemini yapabilmek için birden fazla yol bulunmaktadır. Ben bunlardan bir tanesi ile yaptığım örneğe aşağıda yer verdikten sonra kısaca anlatacağım.
<script type="text/javascript">
function openDialog(ID, Title) {
function demoCallback(dialogResult, returnValue) {
SP.UI.Notify.addNotification('Haberler!');
SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
}
var options = {
url: '/sites/adil/Lists/Haberler/DispForm.aspx?ID=' + ID,
title: Title,
allowMaximize: false,
showClose: true,
width: 800,
height: 600,
dialogReturnValueCallback: demoCallback
};
SP.UI.ModalDialog.showModalDialog(options);
}
</script>

<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<a href='' onclick='openDialog(<%# Eval("ID") %>, "<%# Eval("Title") %>");return false;'>
<%# Eval("Title") %></a>
<br />
<%# Eval("Açıklama") %>
</ItemTemplate>
</asp:Repeater>


Oluşturduğumuz VisualWebpart ile "adil" adlı sitenin altındaki "Haberler" Liste'sinden haberleri listeleyip, Haber detaylarını DialogBox ile "url" ve "title" alanı dinamik gösterilecek şekilde oluşturduk.

DialogOptions'ı oluşturup ilgili parametrelere değerlerini atadım.
"SP.UI.Notify.addNotification" ile de DialogBox kapanıp ilgili sayfaya dönüşünde "Operation Successful!" yazısı gibi

"Haberler!" yazısı çıkarttım.


1 yorum:

Adsız dedi ki...

[ ... ] link is being shared on Twitter right now. @zenx, an influential author, said RT @1ndus: Xtreme [ ... ]