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

 

SharePoint Haber Uygulaması #9 – XSLT ile Slider Hazırlama” üzerine 4 yorum

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

w

Connecting to %s