SharePoint Farm Solution JQuery BlockUI Kullanımı

SharePoint WebPart JQuery Block Ui kullanımı

Giriş & Proje Oluşturma

Merhaba, daha önceki yazılarımızda SPS kütüphaneleri, Office 365 üzerinde CSOM ve Client Side Bootstrap kullanımları hakkında kullanışlı faydalı bilgiler vermeye çalıştım. Bu yazımızda ise JQuery UI Block UI kullanımını bir web part üzerinde gerçekleştirmeye çalışacağız.

Öncelikli olarak Visual Studio programımızı Administrator yetkilerinde açıyoruz. Bu işlemi yapmak için Visual Studio Iconuna sağ klik ile “Run as Admin” komutunu veriyoruz.

*** WebPart yada Solutionlar uzak sunucuda bulunan SharePointler üzerinde yapılmayacağından bu işlemi aktif on-prem üzerinde bulunan bir SharePoint sunucusu üzerinde Visual Studio kurarak yapmamız gerekmektedir.

Programımız açtıktan sonra File > New > Project menüsü yardımı ile yeni bir proje oluşturuyoruz.

Project linkine tıkladığımızda açılan pencerenin sol tarafında bulunan şablonlar (Templates) alanı altından SharePoint Solutions linkine tıklıyoruz ve sağ kısma açılan listeden SharePoint 2013 – Empty Project şeçeneğini seçiyoruz.

OK butonuna bastığımızda SharePoint Yapılandırma sihirbazı ekranı açılacaktır. Burada Sandbox yada Farm çözümleri seçeneği bulunmaktadır. Siz istediğinize uygun seçeneği işaretleyebilirsiniz ben Farm Solution olarak örneklemeye devam edeceğim.

Finish komutumuz ile beraber artık boş bir SharePoint çözümüne sahibiz. Bu çözüm üzerinde herhangi bir işlem yapmadan Nuget üzerinden referans dosyalarımızı yüklüyoruz.

NuGet Paketi Yükleme

Projemizin üzerine sağ tıklayarak açılır menüden “Manage NuGet Packages” menüsüne tıklıyoruz.

Penceremiz açıldığında bize NuGet üzerinde yüklü olan paketleri yönetebileceğimiz bir pencere açılmaktadır. Bu pencere üzerinde sol kısımda bulunan “Online “ ibaresini seçerek sağ üst kısımda bulunan arama kutusuna “BlockUI” yazıyoruz.

Aramayı tamamladıktan sonra gelen arama sonuçlarından en yukarıda bulunan JQuery.BlockUI paketini “Install” komutunu vererek projemize yüklüyoruz.

Yüklemi işlemi bittikten sonra paketimizin yanında yeşil bir “Check” işareti görülecektir.

Visual WebPart Oluşturma

Proje dosyamıza sağ tıklayarak açılır menünden Add > New Item adımını takip ediyoruz.

Açılan pencere bize SharePoint içerisinde kullanabileceğimiz dosya tiplerini listelemektedir. Biz görsel tabanlı bir işlem yapacağımızdan listede bulunan “Visual Web Part” öğesini seçiyoruz ve isimlendiriyoruz.

Bu seçim esnasında dikkat edilmesi gereken huşu fark ettiğiniz üzere listede iki adet Visual Web Part bulunmakta. Projemizi açarken bize Famd yada Sandbox mı olduğunu sorduğunda biz Farm tipinde bir çözüm üreteceğimizden bu kısımdada Visual Web Part (Farm solution only) ibaresindeki öğeyi seçeceğiz. Eğer çözümünü SandBox ise sizler yanında hiçbir açıklama bulunmayan Visual Web Part öğesini seçmelisiniz.

İsterseniz bu noktada birde oluşturduktan sonra projemizin son haline bakalım.

Scripts klasörü otomatik olarak NuGet paketi ile oluşturuldu. BlockUISampe adında da bir Visual Web Part oluşturduk. Visual Studio bunları bizim için guruplayarak BlockUISample olarak gurupluyor ve BlockUISampeUserControl.ascx adında Custom bir kontrol oluşturuyor

SharePoint Folder Mapping

Bu kısıma kadar SharePoint çözümümüzü oluşturduk ve BlockUI referanslarını projemize yükledik. Şimdi ise Bu dosyalarımızı SharePoint yapısına tanıtmaya geldi sıra.

Gene projemize sağ tıklayarak Add menüsü altından SharePoint “Images” Mapped Folder seçeneğine tıklıyoruz ve Image klasörünü çözüm dosyamıza uyguluyoruz.

Daha sonra indirmiş olduğumuz Script klasörünü bu klasör içine tutup bırakıyoruz. Klasörümüzün taşınmış hali Solution Explorer penceresinde aşağıdaki şekilde gözükecektir.

Kodalama

Projemizi klasorleme ve gereksimlerini tamamladık. Web Partımıza ascx dosyasına gerekli kodları yazmak için dosyamıza çift tıklıyoruz ve açıyoruz. Biraz önce taşımasını gerçekleştirdiğimiz JQ kütüphanesini ve BlockUI kütüphanesini ascx dosyamıza ekliyoruz.

<script src=”../../../../_layouts/15/images/Scripts/jquery-1.7.2.js”></script>

<script src=”../../../../_layouts/15/images/Scripts/jquery.blockUI.js”></script>

Referans eklemelerimizi yaptıktan sonra kodumuzu demo olarak çalıştırabilmek için bir adet HTML Button koyarak client side script tetiklemesini gerçekleştiriyoruz.

<input type=”button” id=”demo” value=”Çalıştır” />

<script>

$(document).ready(function () {

$(‘#demo’).click(function () {

$.blockUI({

css: {

border: ‘none’,

padding: ’15px’,

backgroundColor: ‘#000’,

‘-webkit-border-radius’: ’10px’,

‘-moz-border-radius’: ’10px’,

opacity: .5,

color: ‘#fff’

}

});

setTimeout($.unblockUI, 2000);

});

});

</script>

Kurulum

Kodlamamızı tamamladıktan sonra Visual Studio dan Run komutu vererek Web Partımızı test ediyoruz.

Kurulum ve Demo Videosunu aşağıda izleyebirisiniz.

Block UI Hakkında dokümantasyon için http://malsup.com/jquery/block/ adresini ziyaret edebilirsiniz.

Saygılarımla

 

Yanıt Yaz