Webpart, solution derken aslında SharePoint üzerinde bize sunulan özelliklerin çoğunu unutmuş durumdayız. Birçok Frontend ve Backend yazılımcı daha önceki tecrübelerine dayanarak direk kod yazma odaklı Sharepoint platformuna baktıkları için aslında gözlerinin önünde bulunan ve kolay listeleme , ekleme – düzenleme ve detay ekranlarını kendi çabalarınca aslında Sharepoint üzerinde de çokça uğraşarak yapmaktalar.
SharePoint sayfalarında XSL kodları ile düzenleme yaparak klasik Html kodlarının kombinasyonunu kullanarak çok efektif ve kolay ekranlar tasarlanabilir. Yazımız da basit olarak SharePoint Designer üzerinde XSL şablon kullanımını göreceğiz.
Öncelikli olarak daha önceki makalelerimizde kullandığımız Vehicle Request adlı listemize bütün öğeleri gösterebilen bir ekran yapacağız ve ardında bu liste üzerinden yine bir sayfa oluşturarak bu sayfadan da detay görünümüne geçiş sağlayacağız.
SharePoint Designer vasıtası ile sitemize bağlanarak Site Object > Site Pages menüsünü kullanarak Site Pages ekranımızı açıyoruz.
Menümüzü açtıktan sonra Ribbon da bulunan Pages Tabına geçerek Web Part Page tabına tıklayarak ilk şablonumuzu seçiyoruz. Ben kullanımı kolay olması nedeni ile genelde header bulunan şablon sayfasını kullanmayı seçiyorum. Siz eğer daha önce kullanmadı iseniz hepsine tek tek sayfalar oluşturarak kullanım alanlarını ve tasarımlarını test edebilirsiniz.
Oluşturmuş olduğumuz şablonda otomatik olarak default1.aspx adı ile ekrana yansıyacaktır. İsmini değiştirerek devam ediyoruz.
Sayfamızın ismini değiştirdik. Şimdi sayfamıza sağ tık vasıtası ile açılan menüden Edit File in Advanced Mode menüsü ile SharePoint sayfa düzenleme editörüne geçiyoruz.
Açılan html kodları arasında PlaceHolderMain kelimesini Ctrl + F tuş kombinasyonu ile buluyoruz. Burası bizim bütün içeriğimizin gösterildiği alandır. Diğer alan ise header kontrolüdür. Biz Header kontrolünü düzenlemeyeceğimizden Header kısımı ile hiç ilgilenmeden direk olarak asıl içeriğimizin listeleneceği PlaceHolder’a yönleniyoruz.
Aşağıdaki ekranda Content Place Holder tag’ının içeriği temizlenmiş hali bulunmaktadır. Yaptığımız işlem mevcut standart olarak eklenmiş olan <WebPartPages:WebPartZone> tag’ına sahip kontrolü sayfamızdan kaldırmak oldu.
Temizliğimizi yaptık ve artık sayfamız yeni kontroller için hazır durumda.<Table> tag’ının hemen üzerinde boş bir alana tıklayarak, Ribbon menüden Insert Tabı’na tıklıyoruz. Bu Tab’dan Display Item Form butonuna tıklayarak açılan menüden kullanacağımız listeyi seçiyoruz. Örneğimiz de mevcut Vehicle Request listesini kullanmaktayız.
Web Part’ımız eklenir eklenmez Save komutunu vererek Option , Design , Web Part ve Table tablarının da açılmasını sağlıyoruz. SharePoint designer 2013 de 2010 daki gibi bir görsel Html editör olmadığından bazı buton ve menülere erişmek için ekleme işlemlerinden sonra kayıt etmemiz gerekmektedir.
Option Tab’ına geçerek Paging butonuna tıklıyoruz. Açılan menüden Display All Items’ ı seçiyoruz. Burada var olan seçeneklerin yanı sıra More Paging Options yardımı ile de sayfalama kriterlerinizi genişletebilirsiniz. Tüm Listeyi ekranda göstereceğimizden Display All Items ‘ı seçerek devam ediyoruz.
Paging’i de ayarladıktan sonra Save ediyoruz. Hemen ardından Ribbonda bulunan Design Tab’ına giderek işaretli alanda bulunan ufak Ok’a tıklayarak ekrana daha fazla seçenek gelmesini sağlıyoruz.
Bu seçeneklerden Empty olarak adlandırabileceğimiz boş şablonu seçiyoruz. Bu şablonu seçtiğimizde SharePoint Designer bize tasarımımızı değiştirdiğimizi devam etmek isteyip istemediğimizi sorar. Bu ekrana YES komutunu vererek XSL şablonumuzun şekillenmesini sağlıyoruz.
Ufak ufak XSL düzenleme aşamalarına geçmeye başladık. Ön hazırlıklar SharePoint için her zaman önemli. Bu hazırlıkları yaparken her aşamada Kayıt yapmanızı öneririm. Kayıt etmediğimiz takdirde bazen dalgınlığa düşebilir ve bazı buton ve menülerin neden Disable olduğunu anlamakta zorluk çekebilirsiniz.
dvt_1.rowview alanı bizim liste içindeki satırlarımızın şablon alanıdır. Bu alana birazdan geri döneceğiz. Bu aşamaya kadar her şey tamam ise aşağıdaki gibi bir kod bloğu ile karşı karşıya olmalısınız.
Html kodumuzu biraz daha yukarı kaydırarak name=”dvt_1” alanını buluyoruz. <xsl:otherwise> içindeki işaretli alan harici olan Table kodlarını temizliyoruz.
Şu ana kadar bütün gereksiz html kodlarımızı temizledik. Artık biraz yeni html kodları yazmada ve Xsl kodlarının anlamlarına genel olarak göz atabiliriz.
Tüm temizlenmiş kodlarımız ile birlikte karşımızda olan ekran aşağıdaki gibi olacaktır.
Temizlenmiş kodlarımız yukarıdaki gibi artık ekranımızda hazır olarak bulunmaktadır. Bu noktada biraz XLS tag’larının en çok kullanılanlarından bazılarının ne anlama geldiklerini ve ne için kullanıldıklarını ufak bir tablo ile görelim.
| XSLT <template> | <xsl:template match=”/”> | Bir XSL şablonu oluşturmak için kullanılır. |
| XSLT <value-of> | <xsl:value-of select=”catalog/cd/title”/> | Verilmiş olan data içindeki xpath’e göre data değerni döndürür. |
| XSLT <for-each> | <xsl:for-each select=”catalog/cd”> | Cd listesinin içindeki öğleri döndürür. |
| XSLT <sort> | <xsl:sort select=”artist”/> | Çıktı sıralaması için kullanılır. (Artist’e göre sırala) |
| XSLT <if> | <xsl:if test=”expression“></xsl:if> | Herhangi bir koşul testi oluşturmak için kullanılır. |
| XSLT <choose> | <xsl:choose> <xsl:when test=”expression“> … some output … </xsl:when> <xsl:otherwise> … some output …. </xsl:otherwise> </xsl:choose> |
Choose , when ile birlikte kullanılır eğer koşul tamamlanmıyor ise otherwise ile kesinleştirilir. |
Kısaca anlattığımız bilgiler ışığında yukarıdaki XSL taglarını kullanarak dvt_1.rowview içinde istediğimiz şekilde düzenleme yapabiliriz.
SharePoint XSL kodları içerisinde listemize ait bir data {@Data} key’i ile de ulaşılabilir.XSL kodları kullanarak ekran tasarlamak , size daha özgür bir ortam sağlayacaktır.
Şu ana kadar aktarılmış bilgilerin tüm çözümpark okurlarına faydalı olması dileği ile.
