SharePoint Haber Uygulaması #9 – XSLT ile Slider Hazırlama

Merhaba Arkadaşlar,
Biliyorum bıktınız benden ama bu makale serisinin son makalesi bu olacak. Bu bölümde bir önceki makalemizde jQuery ile yaptığımız Slider’ı XSLT ile yapacağız. Umarım faydalı olur. Bu makalede desteklerindne dolayı Erdem Avni SELÇUK kardeşime teşekkür ederim. Makalenin esin kaynağı Sharepoint / Office 365 üzerinde XSL Template düzenleme

Let the game begin!
SP Designer’ı açıyoruz ve Site Sayfaları kısmına geliyoruz.
XSLT_01
New kısmından Web part Page’i seçip ilk seçeneği seçiyoruz.
XSLT_02
Daha sonra yeni oluşturduğumuz dosyanın ismini Anasayfa.aspx olarak değiştirip ribbon bar’dan Set as Home Page’i seçiyoruz. Artık açılış sayfamız bu dosya olacak.
XSLT_03
Eğer işlemi başarıyla yaptıysanız yeni oluşturduğumuz dosya isminin başında bir ev ikonu gözükecektir.
XSLT_04
Portalımızın adresini girdiğimiz zaman Anasayfa.aspx sayfasının açıldığını görebileceğiz.
XSLT_05
SP Designer’a dönelim ve ilgili dosyamızın üzerinde sağ tıklayıp “Edit File in Advanced Mode” u seçelim.
XSLT_06
Karmaşık kodların olduğu bir sayfa açılacaktır, benim gibi ilk seferde korkup geri kapatmayın.
Açılan sayfada <div class=”ms-hide”> etiketiyle başlayan kısmı içerisndekilerle beraber silebilirsiniz.
XSLT_07
Sildikten sonra aşağıdaki görüntüyü elde edeceksiniz.
XSLT_08
table etiketininöncesindeki boşluğa tıklayalım. Daha sonra ribbon bardan Insert kısmını açalım. Aman Tanrım didim! O da ne? Data Views & Forms kısmı pasif seçilemez durumda. Benim gibi saç baş yolmayın. Hemen @eravse acil destek hattını arayın ve size ctrl+s tuşuna basarak kaydetmenizi söylesin. Evet sayfayı kaydedince o butonlar tekrar aktif hale geliyor.
XSLT_09
Oradan Display Item Form’u tıklayıp Pages kitaplığını seçin.
XSLT_10
Bu işlemden sonra ilk halinden daha karışık kodlar gelecek. Yine korkmayın! Ben yanınızdayım.
XSLT_11
Daha sonra Options tabında yer alan Paging kısmını seçip Display All Items’ı seçelim.
XSLT_12
Sayfamızı kaydedip tarayıcıda sayfamızı yeniyeleim ki neler olmuş görelim.
Evet iki kaydı göstermiş. Birisi Haberler klasörü ve Page Not Found Error dosyası.
XSLT_13
Bu bizim işimize yaramaz. Hemen Sayfanın sağ tarafında yer alan Data Source Details kısmında bulamayalım diye küçücük yazılan Pages bağlantısına tıklayalım.
XSLT_14
Eğer Data Source Details sizde çıkmıyorsa Ribbon bardaki Options Tabında yer alan Data Source Details butonuna tıklayalım.
XSLT_15
Pages bağlantısına tıkladığımız zaman açılan pencerede gösterilecek olan alanları seçebileceğimiz Fields butonuna tıklayalım.
XSLT_16
Orada hali hazırda eklenmiş olan bütün alanları kaldıralım.
XSLT_17
Bize lazım olan alanları ekleyelim.
XSLT_18
Aynı pencerede Sort butonuna basıp sıralama olarak Haber Tarih’i seçip Decending’i seçelim.
XSLT_19
Item and folder scope kısmında RecursiveAll kısmını seçelim.
XSLT_20
RecursiveAll CAML query yazanlar bilir, bütün dosyalar, klasörler ve alt klsör ve dosyaları listeler.
Kod kısmına bakarsak SPDataSource kısmında RecursiveAll’un eklendiğini görebiliriz.
XSLT_21
XSLT_22
Tarayıcımıza geri dönüp sayfayı yenileyip baktığımızda karşılığı boş birçok kayıt eklendiğini görebiliriz. Ama dikkat ederseniz kayıtlar 15 kere tekrarlanmış. Hatırlarsanız Pages kitaplığında Haberler klasörü, PageNotFoundErro sayfası ve eklediğimiz haberler olmak üzere 15 öğe vardı. Demek ki doğru gidiyoruz.
XSLT_23
Hemen kod kısmına geçiyoruz ve dvt_1.rowview templateimizi bulup görmek istediğimiz alanları ekliyoruz. Olay basit. Erdem hocamın da bahsettiği üzere değeri yazdırmak için <xsl:value-of select=”@Nesne”> yazarak istediğimiz alanları getiriyoruz.
XSLT_25
Sayfamızı yenilediğimizde ID değerlerinni geldiğini görebiliriz.
XSLT_26
Ama halen Haberler klasörü ve PageNotFoundError nesneleri gözüküyor. Sadece Haberler klasörünün altındaki dosyalar gözükmesi için SelectParameters etiketinin içerisinde aşağıdaki kodu ekleyelim.
XSLT_24
Gözükmesi için sırasıyla diğer alanlarımızı da ekleyelim.
XSLT_27
Template’imiz aşağıdaki hali alacaktır.
XSLT_28
Sayfamızı tekrar yenileyelim.
XSLT_29
Şimdi birşeyler ortaya çıkmaya başladı. Ama dikkat ederseniz bazı karakterler html kodu olarak gözüküyor. Bu işlem için vsl:value-of kısımlarına disable-output-escaping attribute’unu ekleyelim ve değerini yes olarak ayarlayalım.
XSLT_30
Son hali aşağıdaki gibidir.
XSLT_31
XSLT_32
Sayfamızı yenilediğimizde yavaş yavaş birşeyler ortaya çıkmaya başlıyor.
XSLT_33
Artık html ve js kısmına geçebiliriz.
PalceHolderAdditionalPageHead kısmının içerisine css ve js dosyalarını referans verelim.
Slider’ımızı çağırdığımız kısmı da ekleyelim.
XSLT_34
Template kısımlarına da slider’ın ihtiyacı olan html etiketlerini ekleyelim ve düzenleyelim.
Normal hali böyleyken,
XSLT_35
Bu hale çeviriyoruz.
XSLT_36
slides ve thumbnails için iki ayrı template kullandım.
XSLT_37
Template’imizin son hali aşağıdaki gibi olacaktır.
XSLT_39
Slider’ın açılışta bozuk gözükmemesi için aşağıdaki stil ve jq kodlarını ekleyelim.
XSLT_40
Sayfamızı yenilediğimizde slider’ımızın çalıştığını görebileceksiniz.
Umarım faydalı bir makale serisi olmuştur. Tek bir örnek üzerinden SharePoint’in birçok yeteneğinden faydalandık.
Bu makalede kullanılan kodların kaynak dosyası için: xslt.zip
Başka makalelerde görüşmek üzere.

TOC

  1. SharePoint Haber Uygulaması #1 – Giriş
  2. SharePoint Haber Uygulaması #2 – Publishing Feature
  3. SharePoint Haber Uygulaması #3 – Custom Master Pages
  4. SharePoint Haber Uygulaması #4 – jQuery News Slider
  5. SharePoint Haber Uygulaması #5 – Content Types
  6. SharePoint Haber Uygulaması #6 – Page Layouts
  7. SharePoint Haber Uygulaması #7 – Image Renditions
  8. SharePoint Haber Uygulaması #8 – Rest Api ile Slider Hazırlama
  9. SharePoint Haber Uygulaması #9 – XSLT ile Slider Hazırlama


 

4 thoughts on “SharePoint Haber Uygulaması #9 – XSLT ile Slider Hazırlama”

Leave a Reply

Your email address will not be published. Required fields are marked *

two × three =