JavaScript arşivleri - Yunus Emre Araç

JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaretleyicisine (Marker) Bilgi Penceresi (Info Window) Ekleme İşlemi

yunusemrearac — Fri, 07 Feb 2020 12:48:41 +0000

Merhaba arkadaşlar bugün sizlere daha önceki yazımda bahsettiğim JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaret (Marker) Ekleme İşlemi sonrasında bu işaretleyiciye bilgi penceresi yani info window nasıl ekleyeceğinizden bahsedeceğim.

Mesela haritada iş yerlerinizi adreslerinizi vs işaretlediniz ve tıkladığınızda burası ile ilgili adres iletişim bilgisi website adresi gibi bilgilerin çıkmasını istiyorsunuz. Bu durumda google maps apinin InfoWindow özelliğini kullanabiliriz.

Daha önceki bahsettiğimiz yazı da Ankara iline bir marker eklemiştik ve bu marker için farklı bir icon tanımlamıştık şimdi işe ona bir info window yani bilgi penceresi ekleyelim.

İlk olarak bu pencerede nasıl bir veri gözükecek onu ayarlamamız lazım burada html olarak bilgiyi gösterebilmekteyiz.

var AnkaraInfo = "Ankara" +
"Ankara, Türkiye'nin başkenti ve en kalabalık ikinci ili.[6] Nüfusu 2019 itibarıyla 5.639.076 kişidir. Bu nüfus; 25 ilçe ve bu ilçelere bağlı 1425 mahallede yaşamaktadır. İl genelinde nüfus yoğunluğu 215'tir. Coğrafi olarak Türkiye'nin merkezine yakın bir konumda bulunur ve Batı Karadeniz Bölgesi'nde kalan kuzey kesimleri hariç, büyük bölümü İç Anadolu Bölgesi'nde yer alır. Yüzölçümü olarak ülkenin üçüncü büyük ilidir. Etrafı Bolu, Çankırı, Kırıkkale, Kırşehir, Aksaray, Konya ve Eskişehir illeri ile çevrilidir. " +
"Referans: Vikipedi
";

Ankara ile ilgili yukarıdaki gibi bir bilgi hazırladım. Başlık olarak kalın ve ortada olacak şekilde “Ankara” yazacak ve wikipedia üzerinde yazan bir bilgi ekleyip sonundada referans olarakta bilgiyi aldığım web sitesi adresini linkleme işlemini yaptım. Bunların hepsini html olarak hazırlayıp değişkenime ekledim.

Daha sonra info window için bir değişken tanımlıyorum ve google maps apiden oluşturduğum methodunun “content” parametresine göstereceğim içeriği tanımlıyorum.

var AnkaraInfoWindow = new google.maps.InfoWindow({
  content: AnkaraInfo
});

Bundan sonra yapacağımız işlem ankara için oluşturduğumuz marker tıklanması durumunda bu info window tanımlamamızı açmasını sağlamamız gerekmektedir.

marker.addListener('click', function() {
    AnkaraInfoWindow.open(map, marker);
});

Önceki kod tarafında Ankara için oluşturduğumuz marker değikenine “click” için bir listener ekliyoruz ve bunun fonksiyonunda oluşturuduğumuz ankara detay değişkeninin open methodu ile içine haritayı ve markerı ekleyerek açıyoruz.

Son durumda tamamlanan güncel kodumuz aşağıdaki gibi olacaktır.

Bu işlemi sorunsuz bir şekilde tamamladıktan sonra haritamızı açıp marker üzerine tıkladığımız zaman bilgi penceremiz açılacaktır.

Yukarıda da gördüğünüz gibi işlemleri sorunsuz bir şekilde tamamladıktan sonra marker bilgi ekranımız tıklandığı zaman gelmektedir.

The post JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaretleyicisine (Marker) Bilgi Penceresi (Info Window) Ekleme İşlemi appeared first on Yunus Emre Araç.

JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaret (Marker) Ekleme İşlemi

yunusemrearac — Sun, 19 Jan 2020 20:31:10 +0000

Merhaba arkadaşlar bugün sizlere Javascript ile google maps api kullanarak haritaya nasıl işaretleyici yani marker ekleme işleminden bahsedeceğim. Daha önce JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritanın Görünümünü Yakınlaştırıp Uzaklaştırma Özelliği konusunu anlatmıştım şimdi o kodlar üzerinden devam edeceğim.

Şimdi haritamıza herhangi bir konum için işaretleyiciyi yani marker nasıl ekleyeceğimizden bahsedeceğim. Bunun için google.maps.Marker servisini kullanmamız gerekmektedir. Burada bu servise işaretlenecek konum için “Laitude” ve “Longitude” konum bilgilerini işaretleme yapılacak harita bilgisini ve fare ile üstüne gelindiğinde çıkacak title bilgisini girmeniz gerekmektedir. Ben örnek olarak Ankara ilimize bir işaretleyici ekleyerek devam edeceğim.

var marker = new google.maps.Marker({
  position: {lat: 39.925533, lng: 32.866287},
  map: map,
  title: 'Ankara'
});

Yukarıda da gördüğünüz gibi “marker” diye bir değişken oluşturarak bu değişkene “position” parametresine lokasyon bilgimizi, “map” parametresine de harita değişkenimizin bilgisini ve en son olarakta “title” bilgisine de yazmak istediğimiz detayı ekledik.

Bunun altermatifi olarak harita setleme işlemini daha sonra da yapabiliriz.

var marker = new google.maps.Marker({
  position: {lat: 39.925533, lng: 32.866287},
  title: 'Ankara'
});

marker.setMap(map);

Yukarıda da gördüğünüz gibi harita bilgisini parametre olarak vermedim ama daha sonra haritamda görünebilmesi için marker bilgimizde haritamızı tanımlamamaız gerekmektedir. Ben ilk adımdaki kod ile ilerliyorum ve haritam yüklendiğinde işaretleyicimin de gelmesini istediğim için bunu haritamın yüklenmesini sağlayan “initMap” methodunun içine ekliyoruz.

Son durumda güncel kodumuz aşağıdaki gibi olacaktır.

Bu kodu çalıştırdığımız zaman haritamız ilk yüklendiğinde aşağıdaki gibi görünecektir.

Gördüğünüz gibi marker yani işaretleyicimiz tam Ankara ilinin üstünde ve fare ile üstüne geldiğimizde yazdığımız bilgi görünmektedir.

Siz bu işaretleyiciye ekstra olarak anmimasyonda ekleyebilirsiniz. Bunun için marker servisine “animation” parametresine nasıl bir animasyonla yükleneceği bilgisini girmeniz gerekmektedir.

var marker = new google.maps.Marker({
  position: {lat: 39.925533, lng: 32.866287},
  map: map,
  animation: google.maps.Animation.DROP,
  title: 'Ankara'
});

yukarıda gördüğünüz gibi parametreye yine google maps api tarafından bir değer vermek gerekmektedir. Bu animasyon özelliği için iki tane seçenek vardır. Bunlar:

google.maps.Animation.DROP
google.maps.Animation.BOUNCE

Bunun dışında birde eklediğiniz marker yani işaretleyicinin fare yardımı ile yerinin değiştirilip değiştirilmeyeceği özelliğini ekleyebilirsiniz. Bu özellik genellikle harita üzerinde konum seçme gibi durumlarda ihtiyaç duyulmaktadır. Bu özellik parametresi belirtilmediği zaman kapalı olarak gelmektedir. Bu özelliği açmak için “draggable” parametresini “true” olarak tanımlamamız gerekmektedir.

var marker = new google.maps.Marker({
  position: {lat: 39.925533, lng: 32.866287},
  map: map,
  draggable: true,
  title: 'Ankara'
});

Bu özellik kullanım örneğini de yukarıda görebilirsiniz.

Bunların yanı sıra en güzel özelliklerden biride bu marker yani işaretleyici görseli olan iconu değiştiebiliyor olmanız. Bunun için ise marker servisine “icon” parametresini icon url adresini vererek yapılabilmektedir. Eğer bu parametere hiç kullanılmazsa direk olarak yukarıda gördüğünüz gibi default google maps marker iconu gelecektir.

var marker = new google.maps.Marker({
  position: {lat: 39.925533, lng: 32.866287},
  map: map,
  icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
  title: 'Ankara'
});

Yukarıdaki icon özelliğini sadece kullandığımız zaman haritamızdaki icon aşağıda görüldüğü gibi değişecektir.

Bu durumda sadece icon değiştirme özelliğini kullanarak yaptığımız google maps api haritamızın son güncel kodu aşağıdaki gibi olacaktır.

Burada marker parametresine isteğe bağlı diğer iki özellikte eklenebilir.

The post JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaret (Marker) Ekleme İşlemi appeared first on Yunus Emre Araç.

JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritanın Görünümünü Yakınlaştırıp Uzaklaştırma Özelliği Ekleme

yunusemrearac — Thu, 16 Jan 2020 11:08:14 +0000

Merhaba arkadaşlar bugün sizlere sayfamıza eklediğimiz google maps haritasında zoom özelliğinin kontrollünü nasıl özelleştirebileceğinizden bahsedeceğim. Daha önceki yazılarımda JavaScript ile Google Maps Api Kullanarak Sayfaya Google Haritaları Ekleme İşlemi ve JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritanın Görünümünü Değiştirme işlemlerinden bahsetmiştim.

Daha önce son güncel kodumuzda harita da gelen özellikleri kapatarak bu özelliklerden harita görünümünü değiştirme işlemini kendimiz eklemiştik. Şimdi de bu özelliğimize ek olarak zoom yapma özelliğini ekleyeceğiz.

İlk olarak ben sayfama range html kodunu ekliyorum ve bunu kullanarak haritamın yakınlaştırma uzaklaştırma özelliğini kontrol etmek istiyorum.

Burada input “type” olarak “range” veriyoruz ve “min” değerini “1”, “max” değerinin “12” ve tabiki ilk haritam yüklendiğinde default zoom değerini 6 olarak belirlediğim için “value” değerini de “6” olarak belirliyorum. Bu değerler tamamen sizin isteiğinize göre değişiklik gösterebilir.

Daha sonra javascript tarafında bu range değerinin değişimini kontrol ederek değişen değerimizi algılayıp google maps api fonksiyonlarından biri olan ve zoom parametresini güncellememizi sağlayan “setZoom” fonksiyonuna bu parametreyi göndermemiz gerekmektedir.

var zoomRange = document.getElementById("zoomRange");
	
zoomRange.oninput = function() {
   map.setZoom(parseInt(this.value));
}

Yukarıda da gördüğünüz gibi “zoomRange” id li elementimizi alıyorum ve bu elementin “oninput” parametresine bir fonsiyon tanımlayarak burada haritamızın zoom parametresini güncelliyoruz.

“this.value” diyerek belirlenen güncel değeri alıyoruz ama bu değer bize string tipinde geldiği için ve fonksiyonumuz int değer kabul ettiği için aldığımız değeri “parseInt” kullanarak int çeviriyoruz.

Son durumda güncel kodumuzun tamamı aşağıdaki gibi olacaktır.

Bu kodu sorunsuz bir şekilde çalıştırdığımızda ve range değerimizi değiştirdiğimiz zaman aşağıdaki gibi haritamızın zoom özelliği de değişecektir.

The post JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritanın Görünümünü Yakınlaştırıp Uzaklaştırma Özelliği Ekleme appeared first on Yunus Emre Araç.

JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritanın Görünümünü Değiştirme

yunusemrearac — Tue, 14 Jan 2020 15:56:50 +0000

Merhaba arkadaşlar bugün sizlere daha önceki yazımda bahsettiğim “JavaScript ile Google Maps Api Kullanarak Sayfaya Google Haritaları Ekleme İşlemi” sonrası yüklenen haritadaki özellikleri nasıl custom şekilde yönetilebilir bir yapıya getirebileceğinizden bahsedeceğim.

Bu yazıda yapacağımız işlem ilk olarak ilk yüklenişteki haritada gelen tüm kontrollerin haritada görünmesini kapatarak harita görünümünü kendi kontrolümüzü ekleyip onun üzerinden değiştirme işlemini yapacağız.

Google bize toplamda 4 tane görünüm sunmaktadır. Bunlar “ROAD MAP”, “SATELLITE”, “HYBRID” ve “TERRAIN” isimleri ile geçmektedir. Bu görünümleri önceki yazımızdaki haritada da ya da görünümden kaldırılmamış herhangi bir google haritasında sol üst tarafında da görebilirsiniz.

Daha önceki yazıdaki süreçten devam edersek ilk yükleme işlemini aşağıdaki “initMap” functionu ile yapmıştık.

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {zoom: 6, center: { lat: 39.515137, lng: 24.979530 }});
}

İlk olarak bu harita yüklendiği sırada verdiğimiz özelliklere default görünüm için “mapTypeId” parametresini ve değerini de ilk görünümüm “ROAD MAP” olması için “roadmap” olarak tanımlıyorum. Haritadaki tüm kontrolleri gizlemek için ise “disableDefaultUI” parametresini “true” olarak işaretliyoruz.

Bu değişikliklerin yanı sıra tekrar özellik güncelleme işlemi yapabilmem için “map” tanımlamamı fonksiyonumun dışına çıkarmam gerekmektedir. Tüm bu değişiklikler yapıldığı zaman tüm kodum aşağıdaki gibi olacaktır.

Daha sonra html tarafımızda bir tane select ekliyoruz. Bu select için tanımlanacak optionlara viewler için aşağıdaki şekilde value tanımlaması yapılması gerekmektedir. Bu tanımlama ile seçilenin value değerini kullanarak tanımlama yapabiliriz.

ROAD MAP –> roadmap
SATELLITE –> satellite
HYBRID –> hybrid
TERRAIN –> terrain

Bunun yanı sıra select tagımızda dropdown değiştiğinde değişikliği algılayıp işlem yapabilmemiz için selecte “onchange” ekleyip “changeMapType” fonksiyonunu tanımlıyorum. Bu sayede dropdown her değiştiğinde bu fonksiyon tetiklenmesi ile yakalayabileceğim.

İlk yüklenmede default görünümü road map yaptığım için select optionlarında ilk sıraya onu ekliyorum. Tüm bu değişiklikler sonucu kodlarımızın son hali aşağıdaki gibi olacaktır.

Burada “changeMapType” fonksiyonu içerinde seçilen harita görünümüne göre harita görünümünü güncellememiz gerekecek.

Google maps api üzerinde oluşturulan harita üzerinde “setMapTypeId” adında bir fonksiyon ile var olan haritanın görünümü bu fonksiyona verilen görünüm ismi ile güncellenebilir. Bu parametre değerleri ise ropdown içerisindeki seçeneklerimize verdiğimiz value değerleri ile aynıdır. Bu sayede sadece seçilen seçeneğin value değerini bu fonksiyona göndermemiz yeterli olacaktır.

Dışarıdanda da erişebilmemiş için map değerimizi fonsiyon dışına almıştık. Şimdi bunun içerisinde yer alan parametreye aşağıdaki gibi seçilen değeri setleyebiliriz.

map.setMapTypeId(document.getElementById("mapViewType").value);

Yukarıdaki harita görünüm değiştirme kodumuzu “changeMapType” fonksiyonumuzun içerisine yazıyoruz ve kodumuz tamamlanıyor.

Son durumda tüm proje kodumuz aşağıdaki gibi olacaktır.

Bu kodumuzu çalıştırıp dropdownda değişiklik yaptığımız zaman aşağıdaki görseldeki gibi haritamızın da görünümünün değişeceğini göreceksiniz.

Bu sayede haritamızın görünüm kontrolünü kendi isteğimize göre yönetebilir hale getirmiş olduk.

The post JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritanın Görünümünü Değiştirme appeared first on Yunus Emre Araç.

JavaScript ile Google Maps Api Kullanarak Sayfaya Google Haritaları Ekleme İşlemi

yunusemrearac — Mon, 13 Jan 2020 10:20:07 +0000

Merhaba arkadaşlar bugün sizlere javascript ile google maps api servisini kullanarak html sayfamıza nasıl google harıtaları ekleyeceğimizden bahsedeceğim.

İlk olarak Google Cloud Platform Console sitesine giderek buradan google maps api key almanız gerekmektedir. Api keyimizi aldıktan sonra bir tane “.html” uzantılı bir sayfa oluşturuyoruz ve bu html sayfasının içine default html taglarımızı ekliyoruz.

Bu kısımda sırası ile kodlarımızı eklememiz gerekmektedir. İlk olarak body tagı içerisine bir “map” id li bir div ekliyoruz. Bu div tagına harıtamızı yükleyeceğiz.

Daha sonraki aşamamızda bu map divi için head tagı içerisine yükseklik ve genişliği belirleyeceğimiz css kodlarının yer alacağı style tagını ve kodlarını ekliyoruz.

Bu css kodlarını eklemediğimiz zaman haritamız yüklenecektir ama herhangi bir yükseklik ve genişlik olmayacağından dolayı sayfa da görünmeyecektir. Bundan sonra js ile sayfamıza google maps apimizi eklememiz gerekmektedir.

Burada scriptimizi body tagının kapanışının hemen üstüne eklememiz gerekiyor. Google maps api url sinde yer alan “key” parametresinin değeri olan “GoogleMapsApiKey” yazan yere aldığımız google maps api keyini yazıyoruz. “callback” parametresinin karşısında yer alan değer “initMap” ise bu api çaprıldığında tetiklenecek olan javascript functionın ismi gelmesi gerekmektedir. Ben function ismini değiştirmiyorum ve hemen üstüne bu isimde bir function oluşturuyorum.

Kalan son işlemimiz ise bu oluştrduğumuz function içerisinde map apimizi kullanarak oluşturduğumuz div içierisine eklemek olacaktır.

var map = new google.maps.Map(document.getElementById('map'), {zoom: 6, center: { lat: 39.515137, lng: 24.979530 }});

Yukarıdaki kodumuzu functionımızın içerisine ekliyoruz. Burada google.maps.Map fonksiyonuna hangi elemente import edeceğini ve özelliklerini belirttik. İlk özellik haritanın zoom oranı diğer özellik ise ilk yüklenmede hangi konumu merkez olacak şekilde haritayı açmasını belirttiğimiz özelliklerdir.

Tüm bu işlemlerden sonra kodumuzun son çalışır hali aşağıdaki gibi olacaktır.

Bu kodu tarayıcı üzerinde açtığımız zaman haritamız aşağıdaki gibi gelecektir.

Gördüğünüz gibi sorunsuz bir şekilde belirlediğimiz özellikler ile haritamız yüklenmiş oldu.

The post JavaScript ile Google Maps Api Kullanarak Sayfaya Google Haritaları Ekleme İşlemi appeared first on Yunus Emre Araç.

SharePoint Framework SPFx Giriş ve İlk Uygulama HelloWorld

yunusemrearac — Mon, 23 Sep 2019 21:14:19 +0000

Merhaba arkadaşlar bugün sizlere sharepoint tarfında duyurulmuş olan son güncel framework olan SPFx ten bahsedeceğim ve tabiki her yeni yazılım konusu girişi zorunlu ilk projesi olan HelloWorld uygulamamızı yaparak ilk açılışımızı yapacağız

Bildiğiniz gibi Microsoft sharepoint tarafında Online versiyonu ile birlikte çok köklü bir değişikliğe giderek bir çok yenilik getirmiştir. Clientside yazılım kütüphaneleri ile birlikte kullanılabilirlik sağlaması ile sharepoint yazılımcıları biraz da olsa kendi kabuklarından çıkartabilmeyi başardığını düşünüyorum. Bu köklü değişikliklerin sonuncusu olan SPFx framework yapısı tüm bu konularda bir standart oluşturma yolunda bir adım olarak görmekteyim. Hem Online hem de On-Premise 2016 feature pack 2 ve 2019 versionlarında sorunsuz bir şekilde kullanabilmemize olanak sağlamaktadır.

Sharepoint yazılımcılarının en büyük sorunlarından biri olan kodlama kısmında sharepoint sunucusu olan bir makine olması ve derle çalıştır ile anlık yazılan uygulamayı tarayıcıda localhost olarak çalışamama sorunlarını da ortadan kaldırmaktadır.

SPFx frameworkün temel özelliklerini sıralayacak olursak :

Javascript doğrudan sayfaya gömülüdür ve kullanıcı için iframe vs gibi herhangi bir özelleştirme bulunmamaktadır.
Kontroller sayfa üzerinde DOM’da oluşturulur.
Kontroller erişilebilirdir.
Render, load, serialize ve deserialize vb yapılandırma değişikliklerini yazılımcı erişimi kolaydır.
Herhangi bir Javascript Frameworkü ile kullanılabilmektedir. (React,Handlebars, Knockout, Angular vs.).
Açık kaynak client developer toolları ile kullanılabilmektedir. (npm, TypeScript, Yeoman, webpack, ve gulp.).
Performansı güvenlidir.
Sharepoint üzerindeki tüm son kullanıcılar , yöneticiler, kişisel siteler vs rahatlıkla kullanabilir.
Webpartlar hem modern sayfalara hem de klasik sayfa düzenlerine eklenebilir.

Aşağıdaki kurulum aşamalarını yaparak kullandığınız bilgisayarınızı SPFx framwork ile geliştirme yapmaya hazır hale getirebilirsiniz.

İlk olarak bilgisayarınıza NodeJS LTS 10 versiyonunun yüklemeniz gerekmektedir. Eğer zaten bilgisayarınız da yüklü ise “node -v” komutunu kullanarak yüklü sürüm versiyonunu görebilir ve güncel değil ise güncel versiyona yükseltmeniz gerekmektedir. Eğer windows işletim sistemi olmayan Mac bilgisayarları kullanıyorsanız homebrew kurarak NodeJS yönetimini sağlayabilirsiniz.
Kodlama işlemlerini yapabilmeniz için bilgisayarınız da bir kod editör programı ya da IDE olması gerekmektedir. Bu kısımda Microsoft tarafından önerilen 3 tane editör/IDE bulunmaktadır. Bu üç tanesinden herhangi birini yükleyerek kullanabilirsiniz. Ben Microsoftun kendi ürünü olduğu için Visual Studio Code kurup bunun üzerinden devam ediyor olacağım. Bu editör\IDE isimleri ve adresleri:
Bu kurulumları tamamladıktan sonra SPFx projemizi oluşturmak ve paketleme yapabilmek için Yeoman ve Gulp kurulumlarını yapmamız gerekecektir. Bunların kurulumu için komut istemcisine gelerek aşağıdaki kodu yazıyoruz ve enter diyoruz. Bu aşamayı bir defa yapmanız yeterli olacaktır ve biraz zaman almaktadır.

npm install -g yo gulp

Bu kurulumu da tamamladıktan sonra yine tek bir kurulum aşamasında olan Yeoman Sharepoint oluşturucuyu kurmamız gerekmektedir. Bu da tek seferlik bir kurulum ve biraz zaman alabilmektedir.

npm install -g @microsoft/generator-sharepoint

Bu kurulumu da tamamladıktan sonra uygulamamızı tarayıcı da localhost ile ayağı kaldırdığımız da tarayıcı sertifika hatası vermemesi ve sorunsuz çalışabilmemiz için projelerimizi oluşturduğumuz ve çalıştıracağımız dosya konumunda aşağıdaki kodu komut istemcisinde çalıştırıyoruz. Bu sayede developer sertifikamızı olmuş olacaktır.

gulp trust-dev-cert

Yukarıdaki tüm aşamaları sorunsuz bir şekilde tamamladıktan sonra kurulum işlemi aşamasını tamamlamış bulunuyoruz. Bu noktadan sonra istediğiniz kadar Sharepoint SPFx projesi oluşturabilir ve paketleyebilirsiniz.

Bu kısımdan sonra projemizi oluşturma aşamasına geçiyoruz. Cmd komut iştemcisini açıyoruz ve projemizi oluşturacağımız dosyanın dizinine başına “cd” ekleyerek konumuna yazıp gidiyoruz. Ben C sürücüsü altında “sp” adında bir klasör oluşturdum ve bu klasöre gitmek için “cd C:\sp” diyerek bu konumda komut satırımızın çalışmasını sağlıyoruz.

İlk olarak aşağıdaki yeomen kodunu kullanarak Sharepoint SPFx projemizi oluşturma işlemini başlatıyoruz.

yo @microsoft/sharepoint

Bu komut satırını çalıştırdıktan sonra bize aşama aşama oluşturulacak proje ile ilgili bilgileri isteyecektir.

İlk olarak bizde oluşturulacak ilk projemizin adını sormaktadır. Eğer proje adı yazmadan direk enter tuşuna basarsanız parantez içinde yazan “sp” adını otomatik olarak proje ismi olarak verecektir. Ben proje adı olarak “SharePointFirstSPFxProject” yazıp enter tuşuna basıyorum.

Sonraki aşamada oluşturulacak paketin hangi sharepoint versiyonunda kullanılacağını seçmemiz istenmektedir. Burada yukarıda da bahsettiğim gibi isterseniz sadece online versiyon mu, 2019 ve online mı yoksa 2016,2019 ve online versiyonunda mı çalışıp çalışmayacağı seçeneği karşımıza çıkmaktadır. Bu seçenekte sadece sharepoint sunucusunda gelmektedir. Windows işletim sistemine kurulduğu zaman 2016,2019 ve online seçeneği sadece olacağı için bu aşama otomatik seçili olarak ilerlemektedir. Bundan dolayı da herhangi bir tercih ekranı gelmemektedir.

Burada seçilecek seçenek eğer sadece online versiyon olacaksa ekstra 2 soru daha gelecektir. Bu aşamaları da görmek için sadece online versiyonu seçerek devam ediyoruz.

Bir sonraki aşamada bizden oluşturulacak proje dosyasının bulunduğumuz dosya da mı yoksa proje adında bir klasör oluşturularak bu proje içinde mi oluşturulmasını soruyor. Ben bu kısımda projeleri ayırabilmek adına proje adında bir klasör oluşturarak onun içine oluşturmasını istiyorum ve ok ile mavi imleci “Create a subfolder with solution name” seçeneğine getirerek enter tuşuna basıyorum.

Burada paketin tüm siteye tenant admin yetkisi ile dağıtılıp dağıtılmaması için izin istemektedir. Bu aşama dediğim gibi sadece online kısımda gelecek bir sorudu ve burayı “N” yazarak geçiyoruz.

Bu soru da aynı durumun Web API paylaşımları için tenant admin yetki erişimi verilip verilmemesi kısmıdır. Bu soru kısmıda sadece online seçildiğinde gelmektedir. Bu kısımda da “N” yazarak geçiyoruz.

Bir sonraki aşamamız da ise oluşturulacak componentin tipini seçmemiz istenmektedir. Bu kısımda da sharepoint versiyonlarına göre değişiklik göstermektedir.

Sadece Sharepoint Online versiyonu seçildiğinde WebPart, Extension ve Library seçenekleri gelmektedir.
Sharepoint 2019 ve Online versiyonları seçildiği zaman WebPart ve Extension seçenekleri gelmektedir.
Sharepoint 2016, 2019 ve Online versiyonları seçildiği zaman sadece WebPart seçeneği gelmektedir.

Ben burada ilk uygulamamda webpart olmasını istediğim için “WebPart” seçerek devam ediyorum.

Bu seçimden sonra bizden oluşturulacak olan webpart ile ilgili bilgileri istemektedir. Eğer birşey yazmaz ve direk enter tuşuna basarsanız “HelloWorld” olarak isim verecektir. Ben ilk uygulamamın adının bu olmasını istediğim için enter tuşuna basarak ilerliyorum.

Daha sonra bu webpartımız ile ilgili açıklama bilgisini istemektedir. Burada da boş bırakıp direk enter tuşuna basarsanız eğer belirlemiş olduğunuz webpart isminin sonuna “description” ekleyerek açıklama olarak bunu tanımlayacaktır. Parantez içindede göstermektedir. Ben değiştirmek istemediğim için enter tuşu ile bu değeri verip ilerliyorum.

Bu kısımda projemiz ve webpart oluşturma aşamamızın son kısmı oluşturulacak olan bu webpartımızın hangi frameworkü kullanmasını istediğimizi sormaktadır. Burada ilk uygulama da herhangi birşey seçmeden direkt “Not JavaScript framework” seçerek işlemimi tamamlıyorum ve proje ile webpartın belirlediğim ayarlarda oluşmasını bekliyorum.

Gördüğünüz gibi projemiz sorunsuz bir şekilde oluşturuldu ve kullanıma hazır. Projemizi proje adında yeni bir alt klasör içinde oluşturmasını seçtiğimiz için projemizi gulp üzerinde çalıştırabilmemiz için proje dosyamıza gitmemiz gerekmektedir. Bunun için “cd C:\sp\SharePointFirstSPFxProject” yazarak proje dosyamıza gidiyoruz ve “gulp serve” komutunu çalıştırarak projemizi localhostta ayağa kaldırıyoruz.

Gördüğünüz gibi localhost adresinde uygulamamız açıldı ve sayfadaki artı işaretine bastığımızda oluşturduğumuz webpart gelmektedir. Burada webpartımıza tıklayarak sayfaya ekleyip çalıştırabiliyoruz.

Webpartımızı sayfaya ekledikten sonra sorunsuz gelmektedir. Burada eğer sharepoint tarafında listeden veya ortama bağlı bir veri çekme işlemi yaparak webpart geliştirmenizi yaptıysanız canlı verilerle de ya da sharepoint sitesinde uygulamanızı görmek için sharepoint gulp çalışırken aşağıdaki url yapısında açarsanız sharepoint adresinizi orada da bu webpartları görüp kullanabilirsiniz.

https://your-sharepoint-site/_layouts/workbench.aspx

Projeyi visual studio code kullanarak açıp kodlarını inceleyip değişiklij yapabilir ve tekrar “gulp serve” diyerek yaptığınız değişiklikleri görebilirsiniz.

Bu şekilde kurulumları yaparak ilk uygulamamızı oluşturduk ve çalıştırdık. ilk uygulamanın proje dosyasını aşağıdan indirebilirsiniz. Projeyi indirdikten sonra “npm install” yaparak npm paketlerini yüklemeyi unutmayın.

The post SharePoint Framework SPFx Giriş ve İlk Uygulama HelloWorld appeared first on Yunus Emre Araç.

SharePoint PNP JS Core Search Yapısında Arama Yapılmasını İstediğimiz Alanı Özelleştirmemize Yarayan ‘SourceId’ Parametre Değerleri ve Karşılıkları

yunusemrearac — Mon, 07 Jan 2019 14:07:44 +0000

Merhaba arkadaşlar bugün sizlere SharePoint ortamında Pnp-Js-Core yapısında search kullanarak site de arama yapıldığında bu arama alanının belli bir alanda yapabilmemizi sağlayan özelliklerden biri olan ‘SourceId’ parametresinden ve bu parametrenin değer karşılıklarından bahsedeceğim.

SharePoint tarafında bir modülü arkaplanda search yapısı kullanarak yapmak istediğinizde pnp js search özelliğini kullanmanız gerekmetedir. Ama burada default search araması gibi dokümanlarda, kişilerde, wiki dosyalarında, videolarda vb gibi detaylı ve arama alanımızı özelleştirmek isteyebiliriz.

pnp.sp.search({
  Querytext: "test",
  RowLimit: "10",
  SourceId: "8413cd39-2156-4e00-b54d-11efd9abdb89",
  EnableInterleaving: true,
}).then((results) => {
  let resultSet = [];
  for (var i=0; i < results.PrimarySearchResults.length; i++)
    {
      resultSet.push(results.PrimarySearchResults[i]);
     };
});

Yukarıda pnp js search ile yapılan bir sorgu örneği görmektesiniz. Burada gönderilen parametre değerleri arasında yer alan ‘SourceId’ değişkenine Guid Id şeklinde bir değişken gitmektedir ve bu parametre tanımları sabit olarak alan ve özelliklere göre değişmektedir.

Aşağıdaki tablo da bu Id leri ve karşılıklarını görebilirsiniz.

Name	Id
Conversations	459dd1b7-216f-4386-9709-287d5d22f568
Documents	e7ec8cee-ded8-43c9-beb5-436b54b31e84
Items related to current user	48fec42e-4a92-48ce-8363-c2703a40e67d
Local People Results	b09a7990-05ea-4af9-81ef-edfab16c4e31
Local Reports And Data Results	203fba36-2763-4060-9931-911ac8c0583b
Local SharePoint Results	8413cd39-2156-4e00-b54d-11efd9abdb89
Local Video Results	78b793ce-7956-4669-aa3b-451fc5defebf
Pages	5e34578e-4d08-4edc-8bf3-002acf3cdbcc
Pictures	38403c8c-3975-41a8-826e-717f2d41568a
Popular	97c71db1-58ce-4891-8b64-585bc2326c12
Recently changed items	ba63bbae-fa9c-42c0-b027-9a878f16557c
Recommended Items	ec675252-14fa-4fbe-84dd-8d098ed74181
Wiki	9479bf85-e257-4318-b5a8-81a180f5faa1
Items With Same Keyword As This Item	5c069288-1d17-454a-8ac6-9c642a065f48
Items Matching Tag	e1327b9c-2b8c-4b23-99c9-3730cb29c3f7
Items Matching Content Type	5dc9f503-801e-4ced-8a2c-5d1237132419

Yukarıdaki tabloda gördüğünüz isimlere göre istediğiniz id alıp kullanarak arama sorgu alanınınızı özelleştirebilirsiniz.

The post SharePoint PNP JS Core Search Yapısında Arama Yapılmasını İstediğimiz Alanı Özelleştirmemize Yarayan ‘SourceId’ Parametre Değerleri ve Karşılıkları appeared first on Yunus Emre Araç.

SharePoint Sayfasının Düzenleme Modunda Olup Olmadığını Javascript Kullanarak Öğrenme

yunusemrearac — Fri, 30 Mar 2018 11:41:42 +0000

Merhaba arkadaşlar bugün sizlere sharepoint ortamında sayfanın edit modda olup olmadığını kontrol etmenizi client olarak javascript kodu ile nasıl yapabileceğinizden bahsedeceğim.

Bu durum genel de page layout vb yapılarda sayfanın sadece edit modunda ya da görüntüleme modunda olup olmama durumuna göre yapacağınız işlemlerde çok işinize yarayacaktır.

Eğer sayfanız Page Layout yapısında ise aşağıdaki kodu kullanarak edit mod durumunu kontrol edebilirsiniz.

var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
if (inDesignMode == "1")
{
// sayfa düzenleme modunda
}
else
{
// sayfa görüntüleme modunda
}

Eğer sayfanız wiki page yapısında ise aşağıdaki kod parçacığını kullanarak kontrolünüzü sağlayabilirsiniz.

var wikiInEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;
if (wikiInEditMode == "Edit")
{
// wiki sayfası düzenleme modunda
}
else
{
// wiki sayfası görüntüleme modunda
}

Not: Eğer bu kontrolü javascript tarafında değilde code behind tarafta kontrol etmek isterseniz html kod tarafına aşağıdaki html eklemeniz gerekmektedir.

The post SharePoint Sayfasının Düzenleme Modunda Olup Olmadığını Javascript Kullanarak Öğrenme appeared first on Yunus Emre Araç.

Bir JavaScript Dosyasından Başka Bir JavaScript Dosyasını Referans Verip Ordaki Metodu Kullanmak

yunusemrearac — Wed, 08 Mar 2017 14:42:31 +0000

Merhaba arkadaşlar bugün sizlere bir javascript dosyasında başka bir javascript dosyasını nasıl referans vereceğimizden ve diğer javascript dosyasında ki metodu nasıl kullanabileceğinizden bahsedeceğim.

Bunun için bir function yazdım ve bunu rahatlıkla kullanabilirsiniz.

function addJavascript(jsSrc) {
 var th = document.getElementsByTagName('head')[0];
 var s = document.createElement('script');
 s.setAttribute('type','text/javascript');
 s.setAttribute('src',jsSrc);
 th.appendChild(s);
}

Yukarıdaki fonksiyonu javascript dosyamıza ekliyoruz ve page load kısmında bu fonksiyonu çağırarak js src adresimizi parametre olarak ekliyoruz.

Daha sonra bu javascript dosyamızı sayfamıza refereans olarak eklemiş oluyoruz ve bu dosyadaki herhangi bir methodu kullanmak istediğimizde aşağıdaki kod kısmını kullanabilirsiniz.

$.getScript(jsSrc, function() {
getFonc();
});

Her iki formül içinde üst kısımda javascript src adresi için bir değişken tanımlayıp ona src adresini atarak bu değişken adını jsSrc yerine yazarak daha rahat yönetilebilir bir şekilde kullanabilirsiniz.

The post Bir JavaScript Dosyasından Başka Bir JavaScript Dosyasını Referans Verip Ordaki Metodu Kullanmak appeared first on Yunus Emre Araç.

SharePoint Dışarı Açık Sitelerde JavaScript Kullanarak Listelere Erişip İşlem Yapınca Yönetici Erişim Engelleme Hatası

yunusemrearac — Fri, 03 Mar 2017 12:42:49 +0000

Merhaba arkadaşlar bugün sizlere dışarıya açık olan sharepoint sitelerinde javascript kullanarak listelere erişerek onlarla işlem yaptığımız zaman karşımıza çıkan “Request failed. The method ‘GetItems’ of the type ‘List’ with id is blocked by the administrator on the server” hatasının çözümünden bahsedeceğim.

Bu hatanın çözümü olarak ilk başta “Windows PowerShell ISE” programını yönetici olarak çalıştırıyoruz.

Add-PSSnapin "Microsoft.Sharepoint.Powershell"

$webappllication = Get-SPWebApplication "http://SiteUrl"

$webappllication.ClientCallableSettings.AnonymousRestrictedTypes.Remove([microsoft.sharepoint.splist], "GetItems")

$webappllication.Update();

Yukarıdaki kodu burada koyup site url adresini hangi web applicationda bu işlemi yapmak istiyorsak o sitenin adresini yazarak çalıştırıyoruz.

Bu kod sorunsuz çalıştıktan sonra “SharePoint Central Administrator” e gidiyoruz.

Burada “Application Management” kısmından “Manage web application” linkine tıklıyoruz.

Burada hangi web applicationda bu işlemi yapacaksak onu seçerek üst menüden “WEB APPLICATIONS” sekmesimden “Authentication Providers” kısmına tıklıyoruz.

Karşımıza yukarıdaki gibi Authentication Providers zone alanı çıkacaktır ve burada “Default” yazısına tıklıyoruz.

Karşımıza gelen poppup ekranında “Client Object Model Permission Requirement” kısmında yer alan “Require Use Remote Interfaces permission” check boxı seçili ise bunu kaldırıyoruz ve kaydediyoruz.

Yukarıdaki bütün işlemleri sorunsuz bir şekilde tamamladıktan sonra site bazlı anonymous kullanıcıları yetkilerine göre dışarıdan istenilen şekilde javascript ile işlem yapabilirsiniz veya en üstte bahsetmiş olduğumuz hatayı alıyorsanız hatanın giderilmiş olduğunu göreceksiniz.

The post SharePoint Dışarı Açık Sitelerde JavaScript Kullanarak Listelere Erişip İşlem Yapınca Yönetici Erişim Engelleme Hatası appeared first on Yunus Emre Araç.