Merhaba,
Bu yazımda sizlere SharePoint / Office 365 üzerinde bir liste üzerinden dinamik tab oluşturmayı ve içeriklerinin düzenlenmesini kısa şekilde anlatmaya çalışacağım.
Daha önceden de kullandığımız bootstrap dosyamızı bu yazımızda da kullanacağımızdan modifiye edilmiş bootstrap dosyamı daha önceden edinmedi iseniz https://1drv.ms/1vuHpJ3 linkinden indirebilirsiniz.
Öncelikli olarak her zaman, yada şöyle diyelim kişiselleştirme yaptığımız ve özel listeler oluşturduğumuz için bir Custom List oluşturarak işe başlıyoruz. Her yazımızda bu adımı anlatmaya gerek duymadığımdan eğer bu konu hakkında fikriniz yok ise SharePoint 2013 / Office 365 Custom List Oluşturma (tr-TR) konulu yazımı da inceleyebilirsiniz.
Liste Oluşturma ve Kolon Oluşturma
Listemizi oluşturuyoruz ve ismini TabAndContents olarak ayarlıyoruz.
Listemizi ekledikten sonra uygulama havuzuna geliyoruz. Ekleme işlemi ardından sistem bizi otomatik olarak bu ekrana yönlendirecektir. Yeni eklenen listemizin sağ kısmına tıklayarak açılan popup ekranından settings linkine tıklıyoruz.
Mevcut Title alanını çoğu zaman kullandığımızı yazılarımıza takip edenler bilirler. Genelde bu alanın ismini değiştirmeden kullanmayı tercih ediyorum. Tab ismimiz için Title kolonunu kullanıyoruz. Fakat içerik eklemek için bize bir de Contents adı altında bir kolon daha gerekecektir. Bunu eklemek için açtığımız ekranda Columns alanı altında bulunan Create Column linkine tıklıyoruz.
Hemen ardından açılan penceremizde Column Name alanine Content ismini vererek Multi Line olarak set ediyoruz. Aynı zamanda ekleme ekranımızın altında bulunan Enhanced rich text (Rich text with pictures, tables, and hyperlinks) radio butonunu da seçiyoruz.
Ok butonu vasıtası ile kolon ekleme işlemimizi tamamlıyoruz.
Kayıt Ekleme
Şimdi ise tablarımızı oluşturmaya geldi sıra. Birkaç kayıt ekliyoruz. Bunu yaparken demo kayıtları hızlıca ekleyebilmek için listemizin ana görünümüne geçerek edit linkine tıklamak vasıtası ile aşağıdaki Spreadsheed görünümüne geçip hızlıca kayıt ekleyebilirsiniz.
SharePoint Designer ile Kişiselleştirme
SharePoint Designer 2013
Genelde kişiselleştirme için SharePoint designer kullanmaktayız. Eğer elinizde mevcut bir versiyon bulunmuyor ise Microsoftdan indirme ve kurulum ile alakalı bilgilere erişebilirsiniz.
Görünüm Oluşturma
SharePoint Designer programımızı açarak sitemize bağlanıyoruz. Eğer SharePoint designer vasıtası ile sitenize bağlanma konusunda bir bilginiz bulunmamakta ise SharePoint Designer 2013 – Site Bağlantısı (tr-TR) adresinden bilgi edebilirsiniz.
Evet, Designer programızı açarak listeye erişiyoruz.
Listemizin ana ekranına erişim sağladıktan sonra Views bölümünden yeni bir Görünüm ekleyerek Gelişmiş modda düzenlemek için açıyoruz.
Gelişmiş modda açabilmek için oluşan görünümümüzün üzerine sağ tıklarayar Edit File in Advanced Mode menüsünü tıklıyoruz.
Kişiselleştirme
Gelişmiş mod da açtığımızı görünümü, yazımızın başında indirmiş olduğumuz modifiye bootstrap dosyasını sayfamız içerisine ekliyoruz.
Bu aşamada görünümümüz için iki aşamadan oluşan bir html kodlaması yapacağız. Birinci aşamada Tab isimlerini ekrana basan, ikinci aşamada ise içeriklerini ekrana basan html kodlaması yapacağız. Tabi bu aşamada her bir step içinde iki adet liste şablonunu XSL olarak ekranımıza ekleyeceğiz.
Tab İsimlerinin Ekranda Gösterilmesi
Düzenleme işlemimiz sırasında ilk olarak bir adet Display Item Form ekliyoruz ve Paging olarak bütün öğelerin gösteriyoruz.
Sayfalama ayarını ve şablon dosyamızı sayfamızın içine aldık. Biraz XSL kodlarında temzileme yapmak zorundayız. Standart olarak gelen XSL kodları Table html tagları ile beraber gelmektedir. Bizim bu html taglarına ihtiyacımız şu an için bulunmamaktadır. O yüzden bunların hepsini temizliyoruz. Temizlenmiş hali ile XSL kodumuz aşağıdaki gibi olmalıdır.
Burada aslen yaptığımız dvt_1.rowview içerisinde olan gösterim için eklenmiş tablo kodlarını temizlemek oldu.
Ve sıra geldi bootstrap tab kodlarını görünümümüze eklemeye. https://getbootstrap.com/javascript/#tabs linkinden faydalanarak tablarımızın başlık kısımları için olan kodu alıp, Görünüm içerisine yerleştiriyoruz.
Hemen ardından script tagımızı ekliyoruz. Bootrast.js için gerekli js dosyalarını ise sayfanın başında bulunan PlaceHolderAdditionalPageHead tag’I arasına yerleştiroyoruz.
<script>
$(‘#myTab a’).click(function (e) {
e.preventDefault()
$(this).tab(‘show’)
})
</script>
Buraya kadar olan işlemlerin Js yerleştirme harici bütün XSL edit olarak Content kısmı için baştan tekrarlıyoruz. XSL şablon kısmına ise gene bootstrap.com dan aldığımız tab içeriği için olan div kodlaırnı yerleştiriyoruz. İkinci şablon dosyamızın dvt_1.rowview kısmı ise şu şekilde olmalıdır.
Kişiselleştirme ayarlarımız buraya kadar. Aslında ufak tefek bir kaç dokunuşumuz daha bulunmaktadır. İsterseniz o detayları da aşağıdaki video dosyasından takip ederek daha fazla efektif düzenlemeler yapabilirsiniz.
Faydalı olması dileği ile
