SPFx SharePoint Verileriyle Çalışmak

Önceki kısa yazılarımda SPFx’in ne olduğu ve geliştirme ortamını oluşturarak SPFx ile ilk örnek uygulamanın hazırlanması konularından bahsetmeye çalışmıştım. Bu yazılara aşağıdaki bağlantılardan erişebilirsiniz.

Şimdi yine bir örnek ile devam edip SharePoint verisine erişmek noktasında neler yapabiliriz buna değinmek istiyorum. Yeni bir örnek webpart projesi oluşturacağım, sonrasında içerisindeki gereksiz bölümleri temizleyip SharePoint sitesi altındaki liste isimlerini ekrana getiren bir yapı oluşturmaya çalışalım.

Öncelikle npm aracılığı ile gulp yüklemesini yapıyorduk. Bunun için aşağıdaki komut işimizi görecektir.

 

Sonrasında SharePoint generator objelerinin yüklenmesini sağlayabiliriyoruz. Bunun için de aşağıdaki komutu çalıştırmanız yeterli olacaktır.

Ve son olarak webpart’ın yaratılmasını sağlamak için aşağıdaki komut ile ilerliyoruz.

Bu adımların sonrasında gulp serve komutunu çalıştırarak uygulamanın local workbench üzerinde çalışmasını sağlayabiliyoruz. Bu bölümde uygulamayı yaratma kısmını hızlıca geçmeye çalışıyorum, zira yukarıda bağlantısını verdiğim SPFx Merhaba Dünya yazısında bu konunun detaylarına ayrıca değinmiştik.

komutunu çalıştırarak Visual Studio Code içerisinde projemizin açılmasını sağlayabiliriz. Bir önceki örnekte “Merhaba Dünya” demenin yanı sıra ToolPane için yeni propertyler tanımlama, bunlara varsayılan değer girişi ve önyüzde kullanımını örneklemeye çalışmıştık. Şimdi ise projemize yeni class’lar eklemek, buna metodlar yazmak, test verisi oluşturmak ve hem local workbench hem de SharePoint Online üzerinden veriye ulaşmak noktasına bakmaya çalışacağız.

Burada önemli konulardan bir tanesi local Workbench. Çünkü local workbench aslında SharePoint ortamındaymışız gibi bir arayüzü bizim için oluşturan ama aslında SharePoint olmayan bir ortam. Dolayısıyla bir veri, liste, vb söz konusu değil. Peki local workbench ile çalışırken bu veriye nasıl ulaşabileceğiz?

Local Workbench İçin Test Verisi Oluşturmak

Ben bu ismi vereceğim, çünkü yaptığımız iş aslında local workbench’de olmayan bir veriyi kodumuzu test edebilmek adına oluşturmak. Bunu test metodları yazmaya benzetebilirsiniz. Tabi kodumuzun hem local workbench’de hem de SharePoint Online’daki gerçek verilerle çalışabilmesi için bir dizi düzenleme yapmak durumundayız.

Öncelikle bu test verilerini oluşturmak ve metodlara ulaşabilmek için projemize yeni bir class eklememiz gerekiyor. Bunun için webpart dosyanızı seçili hale getirin ve “New File” butonunu tıklayın.

Oluşturacağımız dosyanın adını SampleHttpClient.ts şeklinde verebiliriz. Burada daha sonra oluşturacağımız ve webpart dosyamızın içinde belirteceğimiz ISPList ve ISPLists isimli interfaceler için tanımlamalar ve metodlar hazırlayacağız. Örnek olarak dosya içeriğimiz şu şekilde olacak.

Şimdi webpartımızın içerisinde hem oluşturduğumuz bu yeni class’ı, hem bununla bağlantılı interfacelerimizi, hem de kullanacağımız SPHttpClient nesnesi için gerekli tanımlamaları gerçekleştirelim. Bu bölümde “import” tagını kullanacağız ve kullanmak istediğimiz kütüphaneleri de webpartımızın içerisinde tanımlamış olacağız.

Şimdi iki tane metoda ihtiyacımız var. Bunlardan bir tanesi local workbench üzerinde çalışırken bize örnek verilerle yardımcı olacak olan metod, diğeri ise SharePoint Online’da çalıştığımız senaryoda bize ilgili site altındaki gerçek liste bilgilerini getirecek olan metod.

Gerçek datayı alırken verileri çekmek için web api’yi kullanıyoruz ve sonuç bize json olarak geri dönecek. Bu işlemi yaparken siz farklı filtreler kullanabilirsiniz. Ben sadece hidden listelerin veri olarak gelmesini istemediğimden bu bölümde buna ilişkin bir filtre kullandım.

Tabi kodumuz çalıştığında bizim hangi ortamda olduğumuzu anlamalı ve buna göre yukarıdaki metodlardan hangisini çalıştıracağını algılamalı. Bunun için aslında üst bölümde ilk import ve tanımlamaları yaparken yararlanabileceğimiz bir sp-core-library importu da yapmıştık. Aşağıdaki şekilde;

Buradan alacağımız Environment değerini kontrol eden bir metod ile local workbench’demiyiz yoksa SharePoint ortamında mı anlayabiliriz. Kontrol kodumuz şöyle olacak.

Bu bölümde EnvironmentType.Local enum’u local workbench’i temsil ediyor ve buna göre getSampleListData() metodunu çağırıyor, yani bizim örnek data dediğimiz bölümü. Koşulun ikinci bölümünde ise EnvironmentType.SharePoint ve EnvironmentType.ClassicSharePoint yer alıyor. Bu iki seçenek sizlerinde anlayacağı üzere modern arayüz ve klasik arayüzü temsil ediyor. Ve bu durumda ise web api aracılığı ile getirdiğimiz gerçek ortam SharePoint verileri geliyor karşımıza.

Bu bölümde kullandığımız ama henüz implemente etmediğimiz bir _renderList() metodumuz var. Bu ise artık oluşan çıktıyı html olarak ekrana döndürme bölümümüz ve şu şekilde olacak.

Ve tabi #spListContainer içeriğini body’nin render edildiği zaman ekrana yerleştirmek. Bunun için bir div kullanabiliriz.

Uygulamayı bu şekliyle local workbench’de çalıştırdığımızda aşağıdaki gibi bir çıktı ile karşılaşacağız.

 

Bu işlemi SharePoint Online workbench’de denediğimizde ise kod içinde web api için belirttiğimiz URL’deki sitenin altında yer alan listeleri ekrana getirecektir.

Uygulamaya ilişkin projenin tamamına GitHub üzerinden erişebilirsiniz.

No Comments

Leave a Comment

Please be polite. We appreciate that.
Your email address will not be published and required fields are marked


This site uses Akismet to reduce spam. Learn how your comment data is processed.