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:

Örnek Dosyalar

 

Tatil Eğlencesi: SharePoint JSLink” üzerine bir yorum

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

w

Connecting to %s