SharePoint Framework’de Çok Dilli Geliştirme

SharePoint Framework ile uygulama geliştirirken çok dilli bir yapıya ihtiyacımız varsa bunu Resource yapısını kullanarak çok basit bir şekilde yapabiliriz.

Sharepoint Online ile bu özelliği kullanmak çok kolay. Eğer WebPart içerisinde tanımladığınız diller, kullanıcının alternatif olarak seçtiği diğer diller içerisinde yer alıyorsa gerekli dilde gösterim otomatik olarak yapılıyor.

Öncelikle kullanıcımızın varsayılan dil seçeneğinin yanında kullanmak isteyeceği alternatif dili nasıl ayarlayabiliriz bu adımı tamamlayalım. Bunu en kolay şekilde yapabilmek için aşağıda yer alan linki tıkladıktan sonra gereken adımları takip etmeniz yeterli olacaktır. https://eur.delve.office.com


Ben İngilizce diliyle SharePoint kullandığım için örneği de Türkçe ve İngilizce dil seçenekleri üzerinden anlatacağım. Görüldüğü üzere dil seçenekleri ve diğer alanlarla ilgili olarak Privacy(Gizlilik) ayarları da yapmak mümkün görünüyor.Çok dilli portalların yanında, birden fazla ülkeden SharePoint kullanıcısına sahipseniz buradaki ayarları kullanarak belli standartları genel olarak tanımlayabilmeniz mümkün.

Bir önceki SharePoint Framework’e Giriş ve WebPart Geliştirmek
makalesini takip ederek baştan bir WebPart projesi için kurulum yapabilirsiniz. Bu kurulumu yaptığınızı varsayıyorum.

Microsoft’un en son çıkarttığı, kısa sürede çok sevilen IDE diğer adıyla editörü yani VS Code veya Visual Studio kullanarak uygulamalarınızda gerekli kodu çok kolay bir şekilde yazabilirsiniz. Ben hafifliği ve Cross Platform geliştirmenin mümkün olabilmesi için bu makalede şimdilik Visual Studio Code kullanacağım.

Command Prompt ile gerekli klasörün içerisindeyken “code .” komutuyla projeyi VS Code ile açalım.



Kırmızıyla işaretlediğim alandan da görebileceğiniz üzere ağırlıklı olarak çalışacağımız klasör “src” klasörü. Bunun yanında WebPart uygulamaları geliştirirken versiyon kontrol sistemi olarak Git’de kullanabiliriz. Gerekli dosyalar varsayılan olarak gelmektedir.

Makalemizin ana konusu olan çok dilli yaptığı Resource üzerinden sağlayabilmek için src\loc klasörüne bir göz atalım.

mystrings.d.ts dosyamız Resource mantığı içerisinde “Key” bilgilerinin tutulduğu dosyamız. Bu dosyayı çok dilli bir yapı kullanmıyorsanız bile şimdilik silmeminizi tavsiye ederim. Dosya içerisinde varsayılan olarak gelen 3 adet Property yani key bulunuyor. Bunun yanında ben ekstra olarak ApplicationTitle adında, string veri türünde bir Property/Key daha tanımladım.

Şimdi loc içerisinde tr-TR global Locale Standartını kullanarak bizim için gerekli dosyamızı oluşturalım. Burada kullanacağınız tire karakterinin, alttire yerine normal tire olması önemlidir. Dosya içeriğini aşağıda görebilirsiniz.

Artık dil dosyasıyla ilgili olarak tanımlamalarımız bitti. Hemen WebPart uygulaması üzerinde nasıl kullanacağımızı görelim.

Öncesinde bu dosyaların oluşturulması, intellisense desteği alabilmek ve css ile ilgili. Scss uzantılı dosyalardan gelen uyarılardan kurtulmak için “gulp build” komutunu çalıştırarak projemizi derleyelim.

Proje ile ilgili tüm geliştirmeyi yapacağımız HelloWorldWebPart.js dosyasını açalım. Burada HelloWorldWebPart isimi benim kurulum aşamasında verdiğim isim, elbette siz farklı bir isim vermişseniz farklı olacaktır.

Eğer C# veya Java gibi programlama dillerine hakimseniz dosyayı ilk açtığınızda TypeScript yapısı size çok tanıdık gelecektir.

15. satırda yer alan Render methodu tüm C#’daki Console uygulamalarında yer alan Main methodu gibi uygulamanın başladığı Entry Point olarak kabul edilebilir. Burada proje içerisindeki CSS’in dahi çok programatik bir şekilde kullanıldığını görmek mümkün. Oluşturduğumuz Resource dosyası içerisindeki anahtarlara ${strings.PropertyName } notasyonuyla ulaşmak ve bu aşamada intellisense desteği de alabilmek mümkün.

Uygulamamız en basit şekilde görüntülemek için hazır. “gulp serve” komutuyla uygulamayı çalıştıralım ve iki farklı kullanıcı tarafında hangi dillerin kullanıldığını görelim.

İki farklı Browser’da iki farklı hesaptan giriş yapıp Web Part uygulamasını bir sayfaya eklediğimde elde ettiğimiz sonuç aşağıdaki gibidir!

Makalenin kaynak koduna buraya tıklayarak PeakUp Github hesabından ulaşabilirsiniz.

Start typing and press Enter to search

Shared Mailbox’ların Android Cihazlara EklenmesiExchange, Office365
SharePoint Framework (SpFx) İçerisinde jQuery KullanımıSharePoint
X