Tatil Eğlencesi: SharePoint JSLink

Merhaba Arkadaşlar,
Sizlere bu makalemizde SharePoint’in JSLink özelliğinden bir örnekle bahsedeceğim.

JSLink Nedir?

JSLink SharePoint 2013 ile birlikte gelen harika bir özelliktir. JSLink ile birlikte JavaScript kullanarak Web Partlarınızı, Listelerinizi, alanlarınızı (fields) işleyebilirsiniz (rendering).
spfield-jslink20templates
Yukarıdaki görselde gördüğünüz üzere normalde SharePoint üzerinde bulunmayan özellikleri JSLink ile sağlayabiliyorsunuz. Hemen bir örnek yapalım.
Senaryomu şu şekilde. Şirketimizde bir telefon rehberi var ve bu rehber Excel içerisinde tutuluyor. Bizlerden bu kayıtları web ortamında grid ile göstermemiz isteniyor. Elimizde sadece excel belgesi var. 10 dakikada hemen bir grid ile bu talebi gerçekleştirelim.
Excelimiz aşağıdaki gibidir. Tabi ki önceden bu belgeyi, excel içerisinden tablo olarak biçimlendirmeliyiz.
JSLink_01
Add an app diyerek bir liste oluşturalım.
JSLink_02
Apps bölümünden Import Spreadsheet’i seçelim ve excelimizi SharePoint Portalimize Liste olarak ekleyelim.

Unutmayın bu işlem Active-X kontrol gerektirdiğinden Internet Explorer’ı kullanmalısınız.

JSLink_03
Listemize biri isim verelim ve excel belgemizi ekleyelim.
JSLink_04
Bu işlemden sonra excel belgemiz açılacak ve bizden import etmek istediğimiz alanı seçmemizi isteyecek. Ben önceden ilgili alanları tablo olarak biçimlendirdiğimden tablomu seçiyorum.
JSLink_05
Excel belgemiz başarılı bir şekilde SharePoint listesine dönüştürüldü.
Aman Tanrım didim, o da ne? Phone sütunumuzdaki kayıtlar rakam olarak algılandığından binlik basamağı işaretlenmiş olarak geliyor. Hemen bu durumu düzeltelim.
JSLink_06
Liste ayarlarından ilgili sütunun tipini string olarak değiştirelim.
JSLink_07JSLink_08
JSLink_09
JSLink_10
Gelen uyarıya Tamam deyip geçelim.
JSLink_11
Rehberimiz artık daha düzgün gözüküyor.
JSLink_12
Bizlere iletilen talepte grid kullanmamız istendiği için hemen googledan aratıp basit ve kullanışlı olan bir grid çözümü bulalım. Ben bu çözüm için https://datatables.net/ adresindeki jQuery ile hazırlanmış plugin’i kullanacağım.
JSLink_13
https://datatables.net/download/download adresinden ilgili dosyaları bilgisayarıma kaydediyorum.
Bu dosyaları SharePoint portalime eklemem gerekiyor. Bu işlem için SharePoint portalinde ilk kurulumda gelen Site Assets kitaplığını kullanacağım.
Site Assets’e ulaşmak için Site Contents kısmından Site Assets kitaplığını seçiyorum.
JSLink_14
Orada dizin mantığım aşağıdaki görselde göreceğiniz üzeredir.
JSLink_15
jQuery dosyasını js klasörüne ekliyorum.
JSLink_16
DataTables için gerekli dosyaları plugins altındaki DataTables içerisinde barındırıyorum.
JSLink_17
Bu dosya kopyalama işlemlerini daha rahat yapabilmek için Explorer özelliğini kullanmak isterseniz, ilgili kitaplık içerisinde Library tabında yer alan Open with Explorer komutunu kullanabilirsiniz.
JSLink_18
Gördüğünüzü üzere portalimize Windows’un Explorer uygulamasından erişebiliyoruz.
JSLink_19
JSLink_20
JSLink_21
Şimdi ne yapacağız?

Let the game begin

VS Code içerisinde bir adet js dosyası oluşturalım ve ismini jslink.js olarak belirleyelim.
Aşağıdaki kodları js dosyamız içerisinde ekleyeceğiz.
Kod kısmını parça parça elimden geldiğince anlatmaya çalışacağım.
Aşağıdaki görseldeki kod bloğunda sayfamıza js aracılığı ile datatables ile gelen css dosyamızı ekliyoruz.
JSLink_22
Aşağıdaki görseldeki kod bloğunda sayfamıza js aracılığı ile jQuery sayfamızda ekli değil ise eklenmesini sağlıyoruz.
JSLink_23
Burada ise datatables a ait js dosyasını sayfamıza ekliyoruz.
JSLink_24
Bu kısımda JSLink özelliğini kullanıyoruz. Context’imizin header ve footer kısımlarını belirtip Item kısmında ise bir fonksiyon çağırıyoruz.
dataTemplate(ctx) fonksiyonunda bu dosyanın bağlı olduğı listenin öğelerini istediğimiz şekilde işleyip gösterilmesini sağlıyoruz.
JSLink_25
Son olarak DataTable plugin imizi çağırıyoruz.
JSLink_26
Bu dosyamızda hazır olduğuna göre dosyamızı Site Assets içerisinde yer alan js klasörüne jslink.js olarak atıyoruz.
Portalimizde Grid’i eklemek istediğimiz sayfaya gelip Edit moduna alıyoruz.
JSLink_27
Insert kısmından ilgili listemizi ekliyoruz. Bu örneğimizde ben Telefon Rehberi ismini verdiğim listeyi ekliyorum.
JSLink_28
JSLink_29
Çok güzel. Listemiz sayfamıza geldi.
JSLink_30
Listemizin sağ üst köşede yer alan menüden Edit Web Part seçeneğini seçip Web Part özelliklerini açıyoruz.
JSLink_31
Sağ tarafta açılan Web part özellikleri kısmında en altta yer alan Miscellaneous kısmına geliyoruz.
JSLink_32
Gördüğünüz üzere en altta JSLink kısmı var ve boş.
JSLink_33
Oraya daha önce Site Assets kitaplığına yüklediğimiz jslink.js dosyasına referans verelim.
JSLink_34
Bu işlemden sonra Web part özelliklerine OK deyip kapatalım ve sayfamızı kaydedip Edit Mod’dan normal moda geçelim.

Hala Hopp Tereyağlı Ballı Ekmek!

Gördüğünüz üzere gridimiz oluştu.
Ama bir sorun var. Bizim listemizde 53 kayıt varken burada 30 kayıttan bahsediyor. Kayıtların tamamı gelmemiş.
JSLink_35
Hemen ilgili listemizin Liste Ayarlarından All Items (Tüm Öğeler) görünümünün ayarlarına giriyoruz.
JSLink_36
JSLink_37
İlgili sayfada yer alan Item Limit bölümünden gösterilecek öğe sayısını 3000 olarak değiştirelim.
JSLink_38
JSLink_39

Bitti mi? Tabi ki Hayır!

Daha sonra lsitemizi eklediğimiz sayfaya geri dönüp edit moda alıp Web part Properties’e geri dönelim.
Selected View kısmı Current View olarak gözüküyor. Son değişiklikleri alması için orada All Items görünümünü seçelim.
JSLink_40
JSLink_41
JSLink_42
Ve gridimiz hazır.
JSLink_43
Afiyet olsun!

Kaynaklar:

  • http://www.learningsharepoint.com/2013/04/13/sharepoint-2013-js-link-tutorial/
  • https://social.technet.microsoft.com/wiki/contents/articles/37684.sharepoint-2013-jslink-client-side-rendering.aspx
  • https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a
  • http://sharepointanchor.com/2017/07/21/271/

Örnek Dosyalar

 

One thought on “Tatil Eğlencesi: SharePoint JSLink”

  1. Mükemmel bir makale olmuş. Ellerinize sağlık. Özellikle “hala hoop tereyağlı ballı ekmek” bölümü akıllara zarar!

Leave a Reply

Your email address will not be published. Required fields are marked *