SharePoint Haber Uygulaması #8 – Rest Api ile Slider Hazırlama

Merhaba Arkadaşlar,
Yavaş yavaş makale serimizin sonuna geliyoruz. Bu makalemizde SharePoint Server Yayımlama Altyapısı ile hazırladığımız haber uygulamamızın anasayfada gözükmesinde kullanacağımız Slider’ı hazırlayacağız.

İlk olarak çalışmamızda kullanmak üzere haber materyallerine ihtiyacımız var. Kullanmanız için bu zip dosyasından faydalanabilirsiniz (Dev Hizmet!).
Örnek bir haber…
RestApi_01
Slider-pro nun css’sinin modifiye edilmiş hali:

.slider-pro {
	font-family: 'Open Sans', Arial;
	margin:0 !important;
}
#SPNews h3.sp-layer {font-size: 17px;}
#SPNews p.sp-layer {font-size: 13px;}
#SPNews .sp-thumbnail-image-container {
	width: 100px;
	height: 80px;
	overflow: hidden;
	float: left;
}
#SPNews .sp-thumbnail-image {height: 100%;}
#SPNews .sp-thumbnail-text {
	width: 300px;
	height: 80px;
    float: right;
    padding: 8px;
    background-color: #F0F0F0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#SPNews .sp-thumbnail-title {
	margin-bottom: 5px;
	color: #333;
	font-size: 12px;
	font-weight: bold;
}
#SPNews .sp-thumbnail-description {
	color: #333;
	font-size: 12px;
}

Dosyayı slider-pro.hk.css olarak kaydedin.
Anasayfayı editleyelim.
RestApi_03
RestApi_08
 
Content Editor web partı ekleyelim.
RestApi_04
RestApi_05
RestApi_06
Web partın özelliklerine girelim.
RestApi_07
Daha önceki makalelerimizde yer alan SPNews.html dosyasını ekleyelim.
Dosyanın urlsini kopyalamak için SiteAssets içerisinden dosyanın özelliklerindne faydalanabiliriz.
RestApi_10
RestApi_11
Sayfamızı kaydedelim.
RestApi_12
Html dosyamızın içerisi aşağıdaki gibi olacak.
RestApi_13
SPNews.js dosyamızı açalım ve url kısmındaki Items kısmından sonrasını silelim ve dosyamızı kaydedelim.
RestApi_14
Sayfamızı yenilemeden önce tarayıcımızdan Developer konsolumuzu açalım ve sayfayı yenileyip, trafiği takip edelim.
RestApi_15
Çıkan URL’ler arasından bizim aradığımız URL’i bulmak için arama kısmında Items yazalım.
RestApi_16RestApi_17
Gördüğünüz üzere birçok istek gidip gelmiş. Oradan Items yazan json kaydını seçelim.
RestApi_18
Sağ tarafta açılan cevap kısmını seçelim ve bize geri dönen sonucu görelim.
RestApi_19
Gördüğünüz üzere 15 obje geri dönmüş. Teker teker objeleri inceleyelim.
RestApi_20
İlk kayıt Haberler klasörüne ait. ContentTypeID’ye dikkat!
RestApi_21
İkinci kayıt varsayılan olarak yer alan Page not found dosyası. Yine ContentTypeID’ye dikkat!
RestApi_22
Diğer kayıtlar ise bizim eklediğimiz haberlere ait kayıtlar. Haberleri ayırt etmek için ContentTypeID’yi kullanacağız. İlgili contentTypeID’yi kopyalayalım ve bir not defterine daha sonra kullanmak üzere yapıştıralım.
RestApi_23
Tekrar SPNews.js dosyamızı açalım ve biraz önce kopyaladığımız ContentTypeID yi kullanarak url ‘i tamamlayalım.
RestApi_24
Bu işlemden sonra tekrar sayfamızı yenilediğimizde biraz önce gelen 15 kayıt yerine bizim haber sayımız kadar olan 13 kayıt geldi ve içeriğine bakarsak sadece url de referans verdiğimiz alanlar geldi.
RestApi_25
 
RestApi_26
Trafiği izlerken bir dosyamızın 404 hatası verdiğini görebiliriz.
RestApi_27
Bu dosya slider-pro nun kullandığı bir imaj.
RestApi_28
slider-pro.min.css içerisinden dosyanın yolunu düzeltiyoruz.
RestApi_29
RestApi_30
RestApi_31
Artık Slider’ımız hazır.
RestApi_32
Güle güle kullanın.
Kaynak dosyalar: SiteAssets

TOC

  1. SharePoint Haber Uygulaması #1 – Giriş
  2. SharePoint Haber Uygulaması #2 – Publishing Feature
  3. SharePoint Haber Uygulaması #3 – Custom Master Pages
  4. SharePoint Haber Uygulaması #4 – jQuery News Slider
  5. SharePoint Haber Uygulaması #5 – Content Types
  6. SharePoint Haber Uygulaması #6 – Page Layouts
  7. SharePoint Haber Uygulaması #7 – Image Renditions
  8. SharePoint Haber Uygulaması #8 – Rest Api ile Slider Hazırlama
  9. SharePoint Haber Uygulaması #9 – XSLT ile Slider Hazırlama

Comments ( 3 )

Leave a Comment

E-posta hesabınız yayımlanmayacak.