SharePoınt AngularJS Bootstrap Slıder yapımı

Merhaba, SharePoint AngularjS serimizin ikincisi olarak custom listler üzerinden bootstrap slider oluşturma konusunu işlemek istedim.

Faydalı olması dileği ile.

1 – sharePoint Designer kullanarak veya Site contents menüsünü kullanarak yeni bir custom sharepoint list app ekliyoruz. Adını Slider olarak belirliyelim.

slider1

2 – Site Contents menüsünden Slider listimizin özelliklerini açıyoruz.

slider2

3 -Yeni bir kolon eklemek için Create Column linkine tıklayarak yeni bir kolon ekleyeceğiz.
slider3

4 – Kolon ismini Path, tipi single line text ve Required işaretli olacak şeklinde kolonumuzu ekliyoruz.

slider4

5 – Daha sonra yeni eklemiş olduğumuz Slider App’ine giderek demo olarak bir kaç item ekliyoruz.

slider5

6 – Visual Studio 2013 de (Ben Sandbox solution olarak kullandım) Yeni bir WebPart ekliyoruz. Adı SliderPart.

slider6

7 – SliderPart içerisine aşağıdaki şekilde hem angularJS’mizi hemde BootStrap Carousel kodumuzu yerleştirip Angular item özelliklerini yazıyoruz.
slider7

8 – Daha Sonra Portal home page’imize giderek Edit Page sekmesi vasıtası ile Yeni oluşturmuş olduğumuz Webpartı sayfamıza ekliyoruz.
(Bu arada Deploy işlemini tabiki yapmak zorundayız)
slider8

9 – Son Olarak görselimiz aşağıdaki şekilde olacaktır.
slider9

Çalışan versiyonu en kısa zamanda GitHub üzerinden sizlerle paylaşıyor olacağım.

Leave a Reply