Merhaba ,
Yazımızda AngularJS kullanarak SharePoint Suit bar item’larına dinamik olarak link eklemeye çalışacağız. Yararlı olması ümidi ile.
ToDo List
————
1 – Site Contents altında bir custom list oluşturacağız.Bu liste Suitbar da kullanacağımız item’ları içericek.
2 – Kullanmış olduğumuz Master Page’i SharePoint Designer vasıtası AngularJS için biraz modiye Edeceğiz.
3 – SharePoint Web servislerini kullanarak oluşturmuş olduğumuz listeye erişeceğiz.
4 – Gerekli olan AngularJS kodunu yazarak render aşamasını tamalayacağız.
5 – Mutlu son.
1 – Site Content Altına Custom List oluşturma
a – Setting Menümüzden Site Contents kısmına gidiyoruz.
b – Herhangi bir isimle Custom bir List Oluşturuyoruz. Örnekte SiteAdmin_TopRightLinks olarak kullanacağım.
c – Listemize 3 adet daha ekstra kolon ekleyerek işlemimize devam ediyoruz. Bunlardan birincisi URL.Geçerli Link için url mizi bu alana gireceğiz. İkincisi ise Target alanı. Linklerimizin yeni penceredemi yoksa aynı sayfadamı açılması gerektiğini bu kolon da bulunan deper vasıtası ile anlayacağız.3 üncüsü ise Order.
Eğer bu listede sıralama değiştirmek istediğimizi var sayarsal bu kolonu kullanmayı düşünüyoruz.Title alanı sabit olarak geldiğinden dolayı bu alanı ellemeyeceğiz aktif olarak kullanacağız. Linklerimizin görümen text attribute’larını Title kolonundan çekeceğiz.
d- Listemize dönüp birkaç adet kullanıma hazır link ekliyoruz. Örnekte linkler kurumsal kullanıma açık olduğundan kapamak zorundayım ama format olarak https://www.google.com olarak yazmanız yeterli olacaktır.
2 – Master Page üzerine AngularJS tanımlaması
a – Kullanmış olduğumuz Master Page’i Sharepoint Designer yardımı ile Sol panelden Master Page sekmesine tıklayarak sağda listelenen Master Pagelerden kullanılan öğe üzerine sağ tık yaparak “Edit File in Advenced Mode” öğesini kullarak açıyoruz.
b – Dosyanın ilgili satırına aşağıda gösterilmiş olduğu gibi standart AngularJS Cdn tanımlamasını yapıyoruz. Ben genelde SharePoint ve diğer sistemlerde Head tagı arasına koymayı tercih ederim development sürecince.
Daha sonra canlı ortamlara aktarımda tagı üzerine yerleştirmek daha doğru bir yöntemdir. Şimdilik CDN dosyalarımızı Head tagı içerisinde gözümüze hoş gelecek bir noktaya yerleştiriyoruz.
3 ve 4 SharePoint Web Servislerine Erişim ve Listeyi Bind Etme
a – Head Tagı içerisine aşağıdaki kodu yazıyoruz. Bu Kodda sarı olarak gösterilen öğeler oluşturmuş olduğumuz Custom Listeden gelen kolon isimleri.İlk Sarı işaretimiz ise $orderby=Order ise listemize vermiş olduğumuz itemların sıralanmasında kullanacağımız kolon ismidir.
Kod temel işlem olarak Custom Listemize AngularJS vasıtası ile bağlanarak Items ları çekmektedir. Daha sonra Google Chrome developer tool vasıtası ile mevcut SuitBar css kodlarına erişerek elde etmiş olduğumuz item’ların içerisinde foreach yapmaktadır.
En son olarak content değişkenine atadığımız html stringimizi document.getElementById(‘suiteLinksBox’).innerHTML = content; kodu vasıtası ile ekrana yazdırmaktayız.(Html içeriğine yazdırılır.)
b – Yukarıdaki kodun çalışabilmesi için AngularJS controller’ının sayfaya eklenmesi gerekmektedir.Bunun için yapmamız gerekn 2 değişiklik var 1 incisi body tagının Angular App için düzenlenmesidir. Örnekte şu şekilde kullanılmıştır :
. 2 incisi ise gerekli controllerın sayfaya yerleştirilmesi olacaktır.Örnekte hemen body tagı altına yerleştirdim. Size de tavisyem bütün html yüklenmeden önce şu şekilde kontrollerınızı çalıştırabilmeniz için gerekli bir boş div atmanızdır.
5 – Mutlu Son
Evet emeklerimizin karşılığını alma vaktimiz geldi.SharePoint url’mize girerek sağ üst barda esliden duran NewsFeed ve Sky Drive gibi linklerin yerine artık dinamik olarak kurumumuzun kullanabileceği linkleri eklemiş olduk. Sıralam değiştirerek testlerinizi gerçekleştirebilir ve SharePoint’in zevkli dünyasıda dolaşabilirsiniz.
Başarılar.
Not : Sitenizin açılma hızına bağlı olarak bir render ve html değiştirme işlemi gerçekleşecektir. Development sunucularınızda kısa bir süre de olsa newsfeed yada skydrive linkini anlık olarak görebilirsiniz.
