SharePoint 2013 – Office 365 SPS Services JQ Kütüphanesi Part – 1

Açıklama – SPS Nedir?

Merhaba, bu yazımızdan itibaren SharePoint – Office 365 üzerinde geliştirmelerimize sıkça kullanılan SPS JQuery kütüphanesini tanıtarak ve bu kütüphane üzerinden geliştirme yaparak devam edeceğiz.

SPS JQ kütüphanesi https://spservices.codeplex.com/ adresinden ücretsiz olarak dağıtımı yapılan bir kütüphanedir. Aynı zamanda https://spxslt.codeplex.com/ adresinden SP XSLT adı altına bir de XSL şablonlarını kullanmaya yarayan bir başka proje ile de bağlantılıdır. XSL şablonları üzerinde daha sonraki yazılarımızda duracağız.

SPS JQ Kütüphanesi tamamen istemci ( Client) tarafında çalışır ve mevcut SharePoint web servislerini kullanarak sunucu üzerinde bir yüklemeye gerek duymaz. Böylelikle SharePoint üzerinde bulunan Web Servislerinin de yeteneklerini tamamen kullanır.

SPS Kütüphanesinin en önemli özelliklerinden biri de daha önceleri SharePoint 2013 desteği bulunmamakta idi. Son güncellemelerden itibaren SharePoint 2007, 2010 ve 2013 desteği tam olarak sağlanmış durumdadır.

Ufak bir örnekleme ile SPS kütüphanesinin nasıl çalıştığı konusunda biraz fikir sahibi olabiliriz artık.

Ben örneklerimi her zaman belirttiğim gibi Office 365 SharePoint yapısı üzerinde uygulamaktayım, ama sizler eğer mevcut bir sunucu üzerinde SharePoint kurulumuzu bulunuyor ise onun üzerinden eğer böyle bir ortamınız yok ise Office 365 deneme sürümüne kayıt olarak onun üzerinden de işlemlerinizi gerçekleştirebilirsiniz.

SPS Kütüphanesinin Kurulumu

Yukarıda belirttiğimiz adresten SPS Kütüphanesini indirerek Site Assets klasörümüz içine kopyalıyoruz. Aynı zamanda bu klasör içinde Office 365 üzerinde hazır olarak bulunan birde JQ kütüphanesi bulunmaktadır. Ama siz en son versiyonu elde etmek isterseniz https://code.jquery.com adresinden son kütüphane dosyasını Site Assets klasörünüze kopyalamak vasıtası ile kullanabilirsiniz.

Bu iki dosyayı Site Asset klasörümüze kopyaladıktan sonra bir sonraki adım olan Sayfa düzenlememize geçebiliriz.

Düzenlemeye Giriş

$().SPServices.SPGetCurrentUser

Öncelikli olarak Ana sayfa üzerinde bize mevcut giriş yapan kullanıcıyı veren SPS methodunu kullanacağız.

Ben işlemlerimi genelde daha rahat hissettiğim için SharePoint Designer 2013 üzerinden yapmaktayım. Eğer elinizde bir SharePoint Designer yok ise microsfot’un sitesinden bir tane bilgisayarınıza indirmenizi tavsiye ederim.

SharePoint Designer vasıtası ile sitemize bağlanıyoruz. Site Pages altına SPSPart1.aspx adında bir yeni sayfa ekliyoruz. Daha sonra oluşturduğumuz bu sayfaya sağ tıklayarak Edit File in Advanced Mode menüsü ile sayfamızı düzenleme için açıyoruz.

SPS Kütüphanesini, JQ kütüphanesini ve daha önceden yazılarımızda kullandığımız SharePoint için düzenlenmiş Bootstrap.css dosyamızı sayfamıza ekliyoruz.

Hemen ardından giriş yapan kullanıcının SPS vasıtası ile bir div’e yazılmasını isitiyoruz ve bunun içinde bir div oluşturuyoruz.

<div id=”currentUser”> </div>

Div’imizi de oluşturduktan sonra geliyoruz SPS kütüphanemizde bulunan $().SPServices.SPGetCurrentUser
methodunu sayfamıza ekliyoruz. Methoda birden fazla Field özelliğini döndürebildiği gibi, tek bir özelliğide döndürmektedir. Örnekte birden fazla alanı döndürmek için fieldNames özelliğini kullandık. Siz sadece tek bir özellik döndürecek iseniz fieldName özelliğini kullanabilirsiniz.

Örnek kodumuz ize aşağıdaki şekilde olacaktır.

SPS içinde bulunan webUrl özelliği 2013.01 versiyonunda eklenmiştir. Bundan önceki SPS versiyonların da bulunmamaktadır. Bu özellik sayesinde sitemizin root adresini adresleyerek servislere erişimin daha hızı olmasını sağlıyoruz.

Biraz önce bahsettiğimiz fieldNames özelliği ile de ID , Adı Soyadı , SIP adresi ve Title özelliklerini tek seferde User Profile servisten çekiyoruz.

En son debug özelliği ise SPS kendi içinde bir debug mekanizmasına sahiptir. Eğer bu özelliği true yaparsanız SPS, kendisi ile ilgili hata olduğunda içinde bulunan JQ modaller ile size uyarı verecektir.

Konsola çektiğimiz verileri yazdırıyoruz ve oluşturmuş olduğumuz div içerisine de çektiğimiz verinin Name özelliğini göstermesi için işaretliyoruz.

Buraya kadar yazmış olduğumuz kodu sırası ile azda olsa özetlemeye çalıştım. Şimdi ise ekranda nasıl gözüktüğü ile alakalı hemen demo kısmımıza bakalım

Demo

SPS kütüphanemizi, JQ kütüphanemiz gibi gereksinimleri sayfamıza ekledik .Sonrasında kütüphanemize ait methodlardan SPGetCurrentUser methodu için javascript kodumuzu da yazdık. Bunun ekran çıktısı ise aşağıda gözükmektedir.

Console.log ile çektiğimiz bütün datayı chrome debugger’a bastık ve testimizi gerçekleştirdik, aynı zamanda div içerisinde de name özelliğini gösterdir.

Sizler daha detaylı ekranlar tasarlayarak bu ufak bilgiler ışığında daha efektif kullanımlara imza atabilirsiniz.

Faydalı olması dileği ile.

Leave a Reply