SharePoint Framework (SPFx)

SharePoint Framework (SPFx) WebPart SharePoint Entegrasyonu Bölüm 1

Önceki makalelerimizde SharePoint Framework SPFx WebPart ın kurulumu ve yapısı üzerine değinmiştik. Şimdi SharePoint ile verileri nasıl alabileceğimize ve WebPart Context ile nelere erişebileceğimize bir göz atalım.

Loading Indicator

Asenkron olarak SharePoint listesinden ya da başka bir web servisten aldığımız dataları gösterirken “loading” işlemlerine ihtiyaç duyarız. Bunun için context içerisindeki “this.context.statusRenderer” kullanabilirsiniz.

  • Loading ibaresini görüntülemek için: displayLoadingIndicator ()
  • Loading ibaresini temizlemek için: clearLoadingIndicator ()
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.context.statusRenderer.displayLoadingIndicator(this.domElement, "message");

Error Indicator

  • Hata göstermek için: renderError
  • Gösterilen hatayı temizlemek için: clearError
this.context.statusRenderer.renderError(this.domElement, err);
this.context.statusRenderer.clearError(this.domElement);

Lodash Utility Library

Arrays, numbers, strings vs. gibi nesneler üzerinde işlem yapmak için SharePoint Framework lodash kütüphanesini içermektedir.

https://lodash.com & https://www.npmjs.com/package/@microsoft/sp-lodash-subset

Page Display Modes

Classic Pages

Page ve WebPart farklı modlarda görüntülenebilir. (Edit & Display gibi)

Modern Pages

Page ve WebPart hep aynı modda görüntülenir.

İhtiyacınıza göre modülünüzü aşağıdaki gibi konfigüre edebilirsiniz.

Classic Page – Page edit modunda değil
Classic Page – Page edit modunda fakat WebPart edit modunda değil
Classic Page – Page ve WebPart edit modunda
Modern Page – Read modu
Modern Page – Edit modu

Page Context

SharePoint Workbench ile çalıştığınızda SharePoint page context sahip değilsiniz, fakat lokalinizde bir çok özelliği kullanabilirsiniz. SharePoint Workbench ile mock datalar ile simule edip WebPart UX anlamında testlerinizi yapabilirsiniz.

Ancak SharePoint Workbench ile bağlandığınızda aşağıdaki özelliklere erişebilirsiniz:

  • Web title
  • Web absolute URL
  • Web server-relative URL
  • User sign-in name
this.context.pageContext.web.title
Local Workbench
SharePoint Workbench

Environment Type

Environment Type ile modülünüzü geliştirirken SharePoint ya da lokal ayrımını yapıp konfigürasyonlarınızı sağlayabilirsiniz.

Logging

JavaScript içerisindeki Alert ya da Breakpoint kullanmak yerine log yazdırıp görüntülemek daha kullanışlı olmaktadır. SharePoint Framework içerisinde built-in logging mekanizmasına sahiptir.

Not: Log sınıfı (class) 4 farklı statik method içermektedir:

  • info: log information
  • warn: log warnings
  • error: log errors
  • verbose: log everythings

SharePoint Framework içerisinde kullanılan tüm log bilgileri JavaScript konsoluna yazdırılmaktadır. Dolayısıyla tarayıcınız üzerinden görüntüleme yapabilirsiniz.

Error dışında diğer 3 method aynı argümanı almaktadır:

  • source: method ya da class name gibi log bilgisini alır (maks. 20 karakter)
  • message: kaydedilecek mesaj (maks. 100 karakter)
  • scope: optional bir parametredir, servis kapsamı

Error methodunda ise message yerine error object almaktadır.

SPComponentLoader

Script lerinizi yüklemek için “SPComponentLoader” class kullanabilirsiniz.

Serdar KETENCİ

Recent Posts

SharePoint TechNet/MSDN Forumları emekliye ayrılıyor

Microsoft SharePoint Technet ve MSDN forumları yerini Microsoft Q&A tartışma panolarına yerini bırakıyor. 10 Ağustos…

4 sene ago

Lokalde React ile uzak SharePoint ortamında Rest API ile çalışmak

Biliyorum, başlık çok garip, ilk bakışta anlaşılması zor. Ama şöyle tarif etmeye çalışayım. Bildiğiniz üzere…

5 sene ago

TypeScript Geliştirme Ortamı Hazırlama

Merhaba Arkadaşlar, Bu yazımızda sizlere TypeScript geliştirme ortamının (TypeScript Development Environment) nasıl hazırlanacağından bahsedeceğim. Öncelikle…

6 sene ago

TypeScript ile SystemJS kullanma

Merhabalar, bu yazımızda sizlere bir TypeScript projesinde farklı ts dosyaları içerisindeki function, class veya interface'lerin,…

6 sene ago

TypeScript – Giriş

Merhaba arkadaşlar, Yakın zamanda TypeScript öğrenmeye başladım. Hem öğrendiklerimi pekiştirmek hem de sizlerle paylaşmak adına…

6 sene ago

SharePoint için Responsive UI

Merhaba Arkadaşlar, Bu yazımızda sizlere mevcut SharePoint portalimizin, tablet, cep telefonu gibi farklı çözünürlükteki cihazlarda…

6 sene ago