Quantcast
Channel: ÇözümPark
Viewing all articles
Browse latest Browse all 4130

SharePoint ve Office 365 News Ticker Uygulaması

$
0
0

SharePoint / Office 365 üzerinde ufak faydalı ve kullanılabilecek uygulamalar serimize SharePoint / Office 365 üzerinde News Ticker uygulaması ile devam ediyoruz. Bu ufak uygulamamız da ;

XSL template edip, oluşturduğumuz sayfa üzerine kaynak olarak kullandığımız temadan CSS ve Java Script dosyalarını ekleyerek listemizi görsek açıdan tamamlayacağız. 

Başlamadan önce SharePoint / Office 365 konusunda 
Kimler Sharepoint Geliştiricisidir. ? (tr-TR) yazımızı okuyarak aslında sizin SharePoint / Office 365 alanında ne yöne yöneleceğinizi seçebilirsiniz.

Öncelikli olarak her zaman ki ilk aşamamız olarak Custom List oluşturma ile başlıyoruz. SharePoint Designer vasıtası ile sunucumuza bir Custom List oluşturuyoruz.

clip_image001
Listemize bir isim vererek işlemimize devam ediyoruz.

clip_image002
Oluşturduğumuz NewsTicker listemize bir adet kolon ekliyoruz. Gene bu işlemi SharePoint Designer vasıtası ile de yapabiliriz. 

clip_image003

Listemize tek tık yardımı ile liste özelliklerine giriyoruz ve ekranda görülen Customization ekranında bulunan Edit list columuns linkine tıklayarak yeni kolon eklemek için olan ekranımıza erişiyoruz. 

clip_image004

Add New Column butonuna tıklayarak yeni bir Single Line of Text tipinde bir kolon ekliyoruz.

clip_image005

clip_image006

ExternalURL adına sahip yeni bir kolon ekledikten sonra artık NewsTicker’ımız için yeni bir View oluşturacağız. Aslında ExternalURL kolonumuzu bu yazı için de kullanmayacağız ama ihtiyacınız olması dahilinde elinizde bulunması için bu kolonu listemize ekledik. Evet View oluşturma ile devam ediyoruz. Listemize tek tık vasıtası ile bu sefer Views alanında bulunan New butonuna tıklıyoruz. Ardından açılan penceremizde View adımızı yazarakOK butonu ile kayıt edip ekranımızı kapatıyoruz.
clip_image007

View’ımızı oluşturduktan sonra Sağ tıklayarak Edit File in Advanced Mode menüsü ile ekranımızı düzenleme için açıyoruz.

clip_image008


Bu noktada daha önceden XSL template ile düzenleme hakkında temel bilgiler verdiğimiz şu Sharepoint / Office 365 üzerinde XSL Template düzenleme (tr-TR) yazımızdan alabilirsiniz.

Oluşturduğumuz View içine advanced mod da girerek aşağıdaki şekilde CSS ve JS dosyalarımızı entegre ediyoruz. Ardından HTML dosyamızı aşağıdaki gibi şekillendiriyoruz. Bu arada kullanmış olduğumuz script dosyasının standart demo temasını copy paste ile yapıştırarak kayıt ediyoruz.

clip_image009

Dinamik olarak kayıtlarımızı eklememiz için menü de bulunan Display Item Form seçeneğini seçerek , NewsTicket listemizi seçiyoruz. Desginer bizim için otomatik olarak XSL kodlarını oluşturuyor ve Bindingleri otomatik olaraDataFields kısmına ekleme yapmaktadır.

clip_image010

clip_image011

dvt_1.body tag’ını aratarak ( CTR+F) buluyoruz ve dvt_1.rowview içerisinde bulunan ekstra kodları silerek aşağıdaki gibi modifiye ediyoruz.

clip_image012

Daha sonra template olarak kullandığımız örnek dosyamızda bulunan JS kodlarını alarak title kısmını istedğimiz şekilde değiştiriyoruz. Örn.Firma Haberleri, Satınalma Duyuruları vb.

clip_image013

Oluşturmuş olduğumuz View’i browser yardımı ile test ediyoruz. Ekranda yaklaşık olarak aşağıdaki şekilde bir görsel ile karşılaşacağız. Bu kısımda aslında CSS düenlemesi yapmıyoruz çünkü zaten kullanmış olduğumuz tema bizim için tasarım olarak hazır.

clip_image014

Eklemiş olduğumuz listemize biraz kayıt giriyoruz.Bunu yapmak için Site Contents menüsünü takip ederek NewsTicker listesine erişiyoruz.

clip_image015

clip_image016

Demo olarak 3 kayıt giroyoruz. Daha fazlada giriş yapabilirsiniz . Tercih tamamen size kalmış. 

clip_image017
SharePoint Designer programımıza geri dönerek NewsTicker da gösterilecek olan öğe sayısını da set ediyoruz. Burada istersek bütün liste öğelerini de döndürebiliriz performans açısından sınırlama olarak 5 ile 10 arası tutmanız faydalı olacaktır. 

clip_image018

Daha sonra kayıt ederek sayfamızı tekrardan çağırıyoruz. 

Kaynak olarak kullanılan JQ ve Tema ise 
https://0.s3.envato.com/files/98201015/index.html adresinden kullanılmıştır.

Faydalı olması dileği ile.


Viewing all articles
Browse latest Browse all 4130

Trending Articles


Mide ağrısı için


Alessandra Torre - Karanlık Yalanlar


Şekilli süslü hazır floodlar


Flatcast Güneş ve Ay Flood Şekilleri


Gone Are the Days (2018) (ENG) (1080p)


Yildiz yükseltme


yc82


!!!!!!!!!! Amın !!!!!!!!!


Celp At Nalı (Sahih Tılsım)


SCCM 2012 Client Installation issue