Quantcast
Channel: ÇözümPark
Viewing all articles
Browse latest Browse all 4130

Sharepoint Nivo Slider Web Part

$
0
0

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.

clip_image001

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.

clip_image002

WebPart’ımızın ismini SliderView olarak verdikten sonra Add diyerek devam ediyoruz.

clip_image003

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.

clip_image004

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.

clip_image005

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.

clip_image006

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.


clip_image007

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.

clip_image008

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. 

clip_image009
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.

clip_image010

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.

clip_image011


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.
clip_image012

clip_image013
Ş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.

clip_image014

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. 

clip_image015
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.

clip_image016

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. 

clip_image017

clip_image018

Bu listenin içine eriştiğinizde ise aşağıdaki gibi öğelerin eklenmiş olduğunu göreceksiniz.

clip_image019
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.

clip_image020

Yazının kaynak kodlarına https://gallery.technet.microsoft.com/SharePoint-2013-Nivo-6f0d3067 Adresinden erişebilirsiniz.

Faydalı olması dileği ile.


Viewing all articles
Browse latest Browse all 4130

Trending Articles


huddam daveti


Tekasür Suresi


"Yâ Kuddûs!" Esması Havâs ve Esrârı


Kasemi Mübelliğa


Peri44


Kuvvetli muhabbet ve aşk tılsımı


El-Mütekebbir


Papaz büyüsü


SCCM 2012 Client Installation issue


Zilhicce Ayının Namaz Duası ÖNEMLİ