Merhaba, bu yazımız ile beraber Office 365 SharePoint bir diğer adı ile SharePoint Online üzerinde Fast Coding ( Hızlı kodlama ) aşamalarını, en hızlı uygulama oluşturma taktiklerini ve bol bol istemci tabanlı kod yazarak gerçek uygulanabilir fikirler üzerinde pratik tecrübelerimi aktarmaya çalışacağım.
Bu fikirlerden bazıları yeni olan bazıları ise daha önceden uygulamak istediğim ufak yardımcı eklentilerdi. Bunlardan ilk olarak Sweet Alert eklentisini seçmek istedim. Sweet Alert gayet basit kullanımına sahip JQuery kütüphanesini kullanan bir eklentidir.
İsterseniz hemen vakit kaybetmeden ufak uygulamamıza başlayalım. Senaryomuz şu şekilde ;
- Yeni bir Liste oluşturma
- Yeni Sayfa oluşturma
- JQuery ve Sweet Alert entegresi
- Liste ekleme işlemleri için İstemci kodlarının yazılması
- Listeleme işlemleri için İstemci Kodlarının yazılması
Yukarıdaki ikinci madde yeni bir sayfada olabileceği gibi liste görünümü şeklinde de yapılabilmektedir. Biz bu uygulamamızda Fast Coding serisine devam ettiğimiz için direk olarak hızlı bir sayfa oluşturma işlemi ile uygulamamızı oluşturacağız.
Yeni Liste Oluşturmak
Liste oluşturma işlemlerine artık zannedersem makaleleri takip ettiğinizi varsayarak aşina olduğunuzu tahmin ediyorum. Kolon ve özellikleri tek tek anlatmak ile sizleri bu konuda meşgul etmeyip direk listenin senaryosu ve kolonlarını aşağıda paylaşmak istiyorum.
Senaryomuzda bir kategori tablosu yapacağız. Bu kategori tablosunda iki sütün bulunacak bunlardan birincisi sabit gelen Title alanı diğeri ise number olarak Sort Order sütünü olacaktır. Bu uygulamada Sort Order sütünunu kullanmayacağız serimizin bir sonraki yazısında bu alan ile ilgili bir kodlama örneği yapacağız.
Category adında bir liste oluşturduk ( Custom List ) ve bu listeye Sort Order adında bir sütün ekleyerek listemizi kapatarak SharePoint Designer 2013 programımıza giderek ikinci adım olan sayfa oluşturma adımına geçiyoruz.
Yeni Sayfa Oluşturma
Listemizi oluşturmanın ardından hemen SharePoint Designer programımıza geldik ve sitemize bağlantı yaptık. Solda bulunan Navigation > Site Objects panelinden Site Pages linkine tıklayarak site sayfaları klasörünü açıyoruz.
Ribbon menüde bulunan Web Part Page linkine tıklayarak standart şablonda Category.aspx adında boş bir sayfa oluşturuyoruz.
Bu aşamaya kadar standart olarak hızlı bir şekilde listemizi ve sayfamızı oluşturduk. Eğer eliniz bu kısma alışık ise ortalama bekleme süreleri ile beraber 3 dakikalık bir süreçte aşama 1 ve aşama 2 tarafınızdan tamamlanıyor olması gerekmektedir. Üçüncü aşama olan Client Side entegrasyonuna aşama 1 ve 2 tamamlandı ise artık geçebiliriz.
JQuery ve Sweet Alert Entegrasyonu
Aşama 1 ve 2 standart olarak çok fazla zamanınızı almadı. Bu aşamada ise eğer JQ kütüphanelerine aşinalığınız var ise daha hızlı haraket edebilirsiniz. Sweet alert eklentisi için Google yardımı ile sweetalert araması gerçekleştiriyoruz ve çıkan ilk sonuca tıklayarak sayfaya erişiyoruz.
Google sizi https://tristanedwards.me/sweetalert adresine yönlendirecektir. Sayfa ile fazla uğraşmadan direk olarak sağ üst kısımda bulunan DOWNLOAD butonuna basarak ZIP dosyasını makinamıza indiriyoruz.
Tabi eğer örneklere bakmak isterseniz bütün örnekleri inceleyebilirsiniz.
İndirdiğimiz RAR / ZIP dosyasını açarak Lib klasörüne giriyoruz ve burada ekranda gösterilen iki dosyamızı SharePoint Designer da bulunan Site Assets klasörüne kopyalıyoruz.
Dosyalarımızı attık son olarak sayfamızı yapılandırma aşamasına geçmemiz gerekiyor. Site Pages klasörüne tekrar giderek az önce oluşturmuş olduğumuz Category.aspx’i Edit File in Advanced ile açıyoruz.
Açılan sayfamızda PlaceHolderMain Content tagını bularak içini tamamen boşaltıyoruz.
Ardından ilk olarak JQuery kütüphanesini sayfamıza ekliyoruz. Code.jquery.com sitesinden son versiyon JQuery dosyasını çekiyoruz. Burada ister direk link verebilirsiniz yada Site Assets klasörüne atabilirsiniz. Ben direk olarak link vererek sayfama ekliyorum.
Şu anki güncel versiyon https://code.jquery.com/jquery-2.1.3.min.js adresinde bulunmaktadır.
PlaceHolderMain içerisine aşağıdaki şekilde JQuery ve Sweet alert dosyalarımızı yazıyoruz.
Kategori Listesi için Ekleme ve Listeleme İstemci Kodlarının yazılması
Yukarıdaki bölümlerde Sweet alert ve JQuery dosylarının sayfamıza entegrasyonlarını gerçekleştirdik. Artık listemize yeni kayıtlar eklemeye ve bu eklenen kayıtları sayfamız üzerinde göstermeye başlayabiliriz.
HTML Kodları
Sayfamızda listeleme ekleme yapabileceğimiz HTML kodlarını yanı HTML formu oluşturmamız gerekmektedir. Ayrıca listeleme için bir result ID’sinde bir div element oluşturuyoruz.
Java Script Kodları
HTML kodlarımızı da yazmış bulunmaktayız. Bu aşamadan sonra hemen listeleme ve ekleme fonksiyonlarımızı yazıyoruz. Aşağıda listeleme fonksiyonunun sayfa açıldığında tetiklenmesi ve ekleme fonksiyonun tamamı görünmektedir.
Succes eventinde swal adında Sweet alert çalıştırma fonksyionumuz bulunmaktadır. Daha önceden yükleme yaptığımız sayfada bulunan örnekleri direk olarak kopyalama sureti ile bu kodlama içerisinde deneyebilir, kendinize uygun mesaj kutuları gösterebilirsiniz.
Ayrıca Sweet alert için customCss özelliği sayesinde dışarıdan yazmış olduğunuz sitil özelliklerini de uygulayabilirsiniz.
Ekleme fonksiyonumuz tamamlandı şimdide listItem fonksiyonunu yazalım. Bu fonksiyon SharePoint Web API vasıtası ile Category listemize bağlanarak kayıtlı öğeleri çekerek $.each fonksiyonu ile bir şablon HTML içerisinde listeliyoruz.
Kodlamamızı tamamladık. Şimdi isterseniz test etme zamanı. Sayfamızı açarak HTML kodlarımızın öncelik ile temiz ve düzgün görünürlüğünü test ediyoruz .
Daha sonra ise kategori adı yazarak Kayıt ekle butonuna basarak yeni kayıt ekliyoruz. Kayıt eklenmesinin ardından Sweet alert boxımız görünecek ve OK butonuna basmanız ile birlikte kapanacaktır. Aynı anda #result olarak tanımlamış olduğumuz ID’li div elementinde de kayıt listelenecektir.
Yazımızda JQ eklentilerinin entegresi, client side üzerinden listelerimize öğe ekleme hakkında hızlı bir şekilde işlemlerimizi gerçekleştirmeye çalıştık. Yazımda bahsettiğim gibi Sweet Alert eklentisinin diğer kullanım alanları hakkında yazımızın başında belirtilen linkten ayrıntılı detaylara ulaşabilirsiniz.
Aşağıdaki linklerden uygulama sayfasının kodlarına ve çalışan video örneğine ulaşabilirsiniz.
Çalışan Video
Sayfa Kodları
https://1drv.ms/1DH5STs
Saygılarımla
