SharePoint 2013 Rest Api ile Yemek Listesi

Merhaba Arkadaşlar,
Bu makalemizde sizlere SharePoint 2013’ün sunmuş olduğu hizmetlerden Rest Api ile mevcut listelerden veri çekme işlemini Yemek Listesi Örneği ile anlatmaya çalışacağım.

Ben bu işlemler sırasında jQuery ile çalışacağım.
İlk işimiz Yemek mönüsünü koyacağımız basit bir liste yapmak.
yemeklistesi01
yemeklistesi02
yemeklistesi03
yemeklistesi04
yemeklistesi05
İlk olarak Title sütunu için değer girilmesi zorunluluğunu kaldıralım.
yemeklistesi11
Tarih isminde bir sütun oluşturalım ve tipini date olarak seçelim.
yemeklistesi06
yemeklistesi07
Menüyü girebileceğimiz bir alan oluşturalım.
yemeklistesi08
yemeklistesi09
yemeklistesi10
yemeklistesi12
yemeklistesi13
Daha sonra Site Pages içerisine, içi boş olan YemekListesi.html adında bir dosya atalım.
Bu işlem için bilgisayarınızda bulunan herhangi bir metin editörü ile boş bir dosya oluşturun ve içerisine aşağıdaki kodları ekleyelim.
[code lang=”html”]
<h2>Bugünün Menüsü</h2>
<p id="YemekListesi"></p>
<script type="text/javascript">
    $(document).ready(function () {
                var days = ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"];
                var months = ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"];
                var today = new Date();
                var dd = today.getDate();
                var mm = today.getMonth() + 1; //January is 0!
                var yyyy = today.getFullYear();
                today = yyyy + ‘-‘ + mm + ‘-‘ + dd + ‘T00:00:00’;
                $.ajax({
                    async: false,
                    dataType: "json",
                    type: "GET",
                    url: "/_api/Web/Lists/GetByTitle(‘YemekListesi’)/Items?$select=Tarih,Men_x00fc_&$filter=Tarih eq datetime’"+today+"’",
                    headers: {
                        "accept": "application/json;odata=verbose"
                    },
                    success: function (data) {
                        var sonuc = data.d.results;
                            var tarih = new Date(sonuc[0].Tarih);
                            var menu = sonuc[0].Men_x00fc_.replace(/\r?\n/g, ‘
‘);
                            tarih = tarih.getDate() + ‘ ‘ + months[tarih.getMonth()] + ‘ ‘ + tarih.getFullYear() +’, ‘ + days[tarih.getDay()];
                            $("p#YemekListesi").html("<b>" + tarih + "</b>
" + menu);
                    }
                });
        });
</script>
[/code]
Bu dosyayı YemekListesi.html olarak kaydedelim ve Site Pages kitaplığına atalım.
Bu işlemlerden sonra master page’imize jQuery kütüphanesini eklememiz gerekiyor.
Bu işlemi yapmak için ilk olarak SharePoint Designer ile portalımıza bağlanalım.
Master Pages bölümünden yapacağımız özelleştirmeler için yeni bir master page oluşturalım. Bunun için seatle.master dosyasını seçelim ve klavyeden CTRL+C ardından CTRL+V tuşlarına basıp basit copy/paste işlemini gerçekleştirelim. Yeni oluşturduğumuz dosyamızın adını değiştirelim. İsmini değiştirdikten sonra dosyayı varsayılan master page olarak işaretleyelim. (Bu işlemlerin naısl yapılacağını görmek için SPMenu makalesine bakabilirsiniz.)
Daha sonra jQuery Core 3.2.1 adresinden jQuery kütüphanesini portalınızın Site Assets bölümüne kaydedin.
SP Designer ile yeni oluşturduğunuz master page i açıp aşağıdaki kod bloğunu yerleştirin.
[code lang=”javascript”]http://portal/SiteAssets/jquery-3.2.0.min.js[/code]
sp.jquery
Bu işlemlerden sonra master page’inizi kaydedin ve kaydederken Major veya minor olarak mı kaydedeyim diye sorarsa “Publish” seçeneğini seçin.
yemeklistesi14
yemeklistesi15
yemeklistesi16
Şimdi bu menüyü anasayfamızda yayınlamamız lazım.
Bu işlem için anasayfamızda Sağ üstte yer alan Edit butonuna basalım ve düzenleme moduna geçelim. Orada menüyü koyacağınız yere gelin ve üst barda yer alan Insert kısmından yeni bir Web part ekleyelim. “Media and Content” kısmından “Content Editor” web partını ekleyelim. Eklenen web partın sağ üst tarafında yer alan küçük ok işaretine basıp “Edit Web Part” ıseçelim. Açılan pencerede Content link kısmına daha önce oluşturduğumuz YemekListesi.html dosyasının adresini yazalım. Sayfayı kaydettiğimizde Yemek menümüz anasayfaya eklenmiş olacaktır.
yemeklistesi17
yemeklistesi18
yemeklistesi19
yemeklistesi20
yemeklistesi21
Afiyet olsun.
Bahsi geçen işlemlerin videosu için