Merhaba, SharePoint üzerinde basit WebPart uygulamalarımıza devam ediyoruz. Bu yazımızdaki konumuz daha önceden Bootstrap ve AngularJS ile yapmış olduğumuz slider benzeri slider’ı Nivo slider kullanarak yapacağız. Daha önceki slider’ımızda AngularJs ve Rest API’lerini kullanarak slider hazırlamıştık. Nivo slider’ımızı tamamen bir web part üzerinde yazarak , C# kodları ile de nasıl SharePoint listelerine erişebileceğimizi göreceğiz.
Başlangıç olarak Visual Studio’muzu açarak New Project menüsünden yeni bir Empty SharePoint Solution serçiyoruz.
Karşımıza gelen ekranda SharePoint sitemizin yolunu ve SharePoint Solution tipi olarak ise Sandbox solution tipini seçerek devam ediyoruz.
Projemiz oluşur oluşmaz ilk yapmamız gereken bir web part ekleme. Projemiz üzerine sağ tıklayarak Add > New Item yolunu izleyerek yeni bir SharePoint WebPart ekliyoruz.
WebPart’ımızın ismini SliderView olarak verdikten sonra Add diyerek devam ediyoruz.
Daha önceden Site Contents alanı altından Custom List eklemeyi de görmüştük. Bu sefer farklı bir yol olarak Add > New item seçeneği ile List tipinde bir dosya ekliyoruz.
Liste oluşturulur oluşturulmaz Visual Studio bize bu listenin adı ile liste tipimize dair sorular sormaktadır. İşaretli alanda Custom ya da daha önceden tanımlanmış listelerin listesini görebilir veya oluşturulmuş bir listedenInstance oluşturabilirsiniz.
Finish butonuna bastığımızda listemiz oluşturulur ve bize Column ekleyebileceğimiz bir pencere açılır. Bu pencerede aynı zamanda View ve List özelliklerini de düzenleyebileceğimiz tab’lar bulunmaktadır. Hemen Columnssekmesinde iki adet Column ekleyerek işlemimize devam ediyoruz. Bu alanlardan biri Slider Image URL si ve diğeri ise bu resim’e link vermek istersek onun için kullanacağımız bir alandır.
Konumuz harici olsa da View düzenlemesinden az da olsa bahsetmek gerekirse, aşağıdaki ekrandan seçili alana isim yazmak sureti ile View oluşturabilir ve bir altındaki ekranda gösterildiği gibi View’ınızda bulunması gereken alanları seçip oluşturmuş olduğunuz view’a atayabilirsiniz.
Liste özellikleri sekmesinde ise listemizin başlığı, Web sitesi url’si ve açıklaması gibi alanları da düzenleyebilirsiniz. Ayrıca Quick Lunch da göster veya tarayıcılarda bu listeyi gösterme seçeneğini de işaretleyebilirsiniz.
Sıra geldi Nivo Slider paketini elde etmeye. Eğer elinizde lisanlı bir sürümü var ise bunu kullanmanız gerekmektedir. Nivo slider belli bir süreden beri plug-in olarak ücretli haldedir.
Masaüstü’müze dosyaları indirdikten sonra bu dosyaları WebPart’ımız içine aktarmaya geldi. Projemize sağ tıklayarak Add > New Item seçeneği vasıtası ile bu sefer SharePoint modül türünde dosyamızı ekliyoruz. Bu Modül bizim için gerekli olan bütün içerikleri kendi içerisinde barındıracak olan bir paket dosyası da diyebiliriz.
Modül dosyamızı oluşturduktan sonra Add > Existing Item.. seçeneği ile aşağıdaki şekilde masaüstümüze indirmiş olduğumuz nivo slider dosyalarından bizim için gerekli olanları bu modül içine ekliyoruz. Sırası ile hepsi için tek tek yapmamız gerekmektedir. Sıkılmayın sabır gösterin.
Son olarak gerekli dosyaların tamamını aktardıktan sonra WebPart içeriğimize giderek Pick Url komutu vasıtası ile açılan Selet Item From Project Server penceresinden, eklemiş olduğumuz modül’ü seçiyoruz ve biraz önce modül içine aktardığımız dosyaları tek tek linkliyoruz.
Şu anda html kısmımız ve modül oluşturmamızı tamamladık. Ortalama olarak benim html WebPart içeriğim aşağıdaki gibi. Gayet sade. Sizler istediğiniz taktirde slider’ın tüm özelliklerinide html dosyanızda kullanabilirsiniz.
Gelelim projemize birkaç slide eklemeye, daha önceden olduğu gibi Site Content alanı altından eklemede yapabiliriz ama WebPartlarda her çalışma esnasında oluşturmuş olduğumuz SliderContent listesinin içi tamamen boşalacağından bunu aşağıdaki gösterildiği şekilde sabit öğeler ekleyerek hata vermemesini sağlayabiliriz.
Listemizi oluşturduk ,WebPart’ımızı tasarladık ve build etme zamanı geldi .Build etmeden önce az da C# kodu yazmamız gerekmekte. Çünkü mevcut html tasarımımız için asp:repater kontrolü kullandık ve buna bir data ataması gerçekleştirdik.
WebPart’ın cs dosyasına geçerek Form Load altına kodumuzu yazıyoruz. Kodun tamamını makale sonunda paylaşacağımdan direk olarak kod ekran görüntüsünü paylaşıyorum.
Burada yaptığımız mevcut SharePoint sitesine bağlanarak SliderContent listesinin içindeki öğeleri kendi oluşturmuş olduğumuz bir class vasıtası ile yeni bir listeye almak. Burda yeni bir class oluşturmamızın sebebi dinamik olarak oluşturulmuş kolonlara direk olarak erişemiyeceğimizden kendimize erişebileceğimiz bir ortam hazırlamaktır.
Kodumuzu build ederek çalıştırıyoruz. İlk önce isterseniz eklemiş olduğumuz öğeler nereye ve nasıl eklendi ona bakalım.
Site Settings > Site Contents menüsünü kullanarak uygulama havuzuna geliyoruz. Burada yeni bir list olarak Slider Content’i görüyor olmanız gerekmektedir. Aksi takdirde birşeylerin yanlış gittiğini söyleyebiliriz. Adımları tekrar kontrol etmenizde fayda olacaktır.
Bu listenin içine eriştiğinizde ise aşağıdaki gibi öğelerin eklenmiş olduğunu göreceksiniz.
En son noktada ise Site Pages altına bir web page oluşturarak partımızı sayfaya ekliyoruz. Partımız herhangi bir değişiklik yapmadığımız için Custom alanı altında duracaktır. Ekleme ardından kayıt işlemi yaparak aşağıdaki şekilde 3 adet öğeye sahip Nivo slider’ımızı kullanabiliriz.
Yazının kaynak kodlarına https://gallery.technet.microsoft.com/SharePoint-2013-Nivo-6f0d3067 Adresinden erişebilirsiniz.
Faydalı olması dileği ile.