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

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

w

Connecting to %s