Ana Sayfa Blog Sayfa 3

SharePoint Framework E-Book

0

Tüm yazdığım SPFx makalelerini derleyip E-Book oluşturdum. Aşağıdaki link üzerinden erişebilirsiniz.

Yararlı olması dileğiyle, keyifli okumalar 🙂

SharePoint Framework (SPFx) Solution Sürüm Yükseltme

0

SPFx solution doğru bir şekilde güncellemek istediğinizde, config klasöründe yer alan ‘package-solution.json ‘u yükseltmeniz yeterli olmayacaktır. Ek olarak ‘package.json’ dosyasını da ilgili sürüm numarasıyla da yükseltmek faydali olacaktır.

config içerisinde yer alan package-solution.json

Şimdi buradaki versiyon numaraları ne ifade ediyor ve güncellemelerinizi yaparken nelere dikkat etmeliyiz, göz atalım.

Kod StatüsüAşamaKuralÖrnek Versiyon
İlk sürümYeni proje
İlk olarak 1.0.01.0.0
Geriye dönük hata düzeltmeleriDüzeltme eki (Patch Relase)3. versiyon numarasını arttırınız1.0.1
Geriye dönük yeni özellikler eklenmesi durumundaKüçük sürüm (Minor release)2. versiyon numarasını arttırıp, sağ tarafta yer alan diğer sürüm numarasını sıfırlayın1.1.0
Geriye dönük uyumluluğu bozan değişikliklerBüyük sürüm (Major version) İlk haneyi arttırıp, diğerlerini sıfırlayın2.0.0

SPFx projeniz içerisinde yer alan paketleri belli aralıklarla güncellemeniz önerilmektedir. (Bug&Fix ya da yeni güncellemeri projeniz içerisinde de kullanmak isteyebilirsiniz.)

Güncel olmayan paketleri kontrol etme

Güncel olmayan paketleri kontrol etmek için aşağıdaki komutu çalıştırınız.

npm outdated

Yukarıda @microsoft-sp ile ilgili sürümler görüntüleniyor olacaktır.

Paket güncelleme

Belirli bir komutun en güncel sürümüne yükseltmek için aşağıdaki komutu çalıştırın.

npm install @microsoft/[email protected] --save

Yukarıdaki “@microsoft/sp-application-base” paket adını güncellemekteyiz. İhtiyacınıza göre paket adını güncelleyip, versiyonunuzu yükseltebilirsiniz.

Tüm güncellemelerinizi yaptıktan sonra derlemeden aşağıdaki komut ile paketinizi temizleyin.

gulp clean

Paketleri oluşturmak için aşağıdaki komutu çalıştırın.

gulp build

Paket güncellemesi yaparken diğer paketler, TypeScript versiyonları önemlidir. Sürümler çakışabilir ve çalışmayabilir. Bu duruma dikkat edin.

Yeoman Generator versiyon güncelleme

SharePoint Framework Yeoman Generator global olarak kurduysanız, aşağıdaki komutu çalıştırarak güncellenmeye ihtiyacı olup olmadığını öğrenebilirsiniz:

npm outdated -g

Gördüğünüz gibi “@microsoft/generator-sharepoint” paketi “1.6.0” sürümde ve “1.8.0” son sürüm. Aşağıdaki komutu çalıştırarak son süreme yükseltebilirsiniz.

npm install @microsoft/[email protected] -g

Okuduğunuz için teşekkür ederim 🙂

PowerApps & Microsoft Flow Giriş

0

Herkese merhabalar,

SPS Saturday etkinliğimizde anlatmış olduğum PowerApps ve Microsoft Flow ile ilgili katılamayan arkadaşlar için video hazırladım. Umarım yararlı olur 🙂

JavaScript Dosyalarını SharePoint Framework (SPFx) İçerisine Nasıl Dahil Edebilirsiniz?

0

SPFx makale serimizi tamamladık fakat durmak yok 🙂

Bu makale içerisinde JS dosyalarınızı nasıl dahil edeceğinize değiniyor olacağız. Öncelikle solution oluştunuz ve “src” folder içerisine “HelperJS” isimli bir folder oluşturunuz. Sonra içerisine “Custom.js” JavaScript dosyanızı oluşturunuz.

“Custom.js” içerisine ilgili JavaScript kodunuzu yazınız ya da denemek için aşağıdaki gibi güncelleyebilirsiniz. (MyFunction isimli bir function oluşturulmuştur ve çalıştığında alert vermektedir.)

“config” folder içerisinde yer alan “config.json” dosyasınızı aşağıdaki ya da ihtiyacınıza göre güncelleyiniz.

Yukarıdaki örnekte externals “myScript” olarak adlandırılmıştır. “globalName, path” bilgilerine göre paket içerisine dahil ediyor olacaktır. (Path kısmına CDN’de verebilirsiniz.)

Gerekli tanımlama işlemlerimizi yaptıktan sonra kullanmak istediğiniz WebPart ya da components içerisinde “require(‘myScript’)” ile çağırınız.

Yukadarıki işlem ile WebPart içerisine ya da ihtiyacınıza göre çağırdığınız kısımda dahil etmiş bulunuyoruz. Örnek olması açısından bir tane input “onClick” event ‘inde function çağıralım.

“gulp serve” komutu ile projenizi ayağa kaldırınız ve ilgili input ‘a tıklayınız.

Tüm yapmamız gereken bu kadar, okuduğunuz için teşekkür ederim 🙂

SharePoint Framework (SPFx) Deployment Azure CDN

0

SharePoint Framework ile Office 365 CDN deploy yapmak zorunda değilsiniz. Azure hesabınız mevcut ise Azure Content Delivery Network (Azure CDN) üzerine deploy yapabilirsiniz. Bunun için Azure Storage hesabınızın olması gerekmektedir. SharePoint Framework otomatik olarak destek sağlar fakat manuel olarakta upload yapabilirsiniz.

Azure storage account konfigürasyonu

İlk olarak Azure storage account oluşturmanız gerekmektedir. Detay için linke tıklayınız.

Hesabınızı oluşturduktan sonra “http://spfxsamples.blob.core.windows.net” gibi endpoint oluşacaktır.

SharePoint Framework projeleriniz için benzersiz bir storage account oluşturmanız gerekmektedir.

BLOB Container oluşturma

Oluşturmuş olduğunuz Azure storage account içerisinde yer alan “+ Container” butonuna tıklarak yeni BLOB Container oluşturunuz.

Storage Account access key

Storage account dashboard içerisinde yer alan “access key” seçip, sonrasında keylerden herhangi birisini kopyalayınız.

CDN Profile ve endpoint

Yeni bir CDN profile oluşturup sonrasında BLOB container ile ilişkilendiriniz.

  • Azure strorage içerisinde CDN etkinleştirip, yeni bir CDN profil oluşturunuz. Detay için linke tıklayınız.
  • CDN profilinizi oluşturduktan sonra endpoint oluşturmanız gerekmektedir. Detay için linke tıklayınız.

Blog container ile ilişkilendirdiğimizden dolayı “http://spfxsamples.azureedge.net/azurehosted-webpart/” endpoint oluşacaktır.

Solution package ayarları

“config” folder içerisinde yer alan “package-solution.json” dosyasını açınız. “includeClientSideAssets” property “false” olarak güncelleyiniz. Bu durumda asset ‘leri paket içerisine dahil etmeyecektir. Çünkü biz Azure CDN üzerinden çekmesini istiyoruz. 🙂

{
 "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
 "solution": {
   "name": "azurehosted-webpart-client-side-solution",
   "id": "a4e95ed1-d096-4573-8a57-d0cc3b52da6a",
   "version": "1.0.0.0",
   "includeClientSideAssets": false,
  },
 "paths": {
   "zippedPackage": "solution/azurehosted-webpart.sppkg"
 }
}

Azure storage account konfigürasyonu

“config” folder içerisinde yer alan “deploy-azure-storage.json” dosyayı açınız.

{
 "$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
 "workingDir": "./temp/deploy/",
 "account": "<!-- STORAGE ACCOUNT NAME -->",
 "container": "azurehosted-webpart",
 "accessKey": "<!-- ACCESS KEY -->"
}

“account, container, accessKey” ayarlarınızı oluşturmuş olduğunuz Azure storage account içerisinde yer alan bilgilerle güncelleyiniz.

“workingDir” ise assets bulunduğu path adıdır.

{
 "workingDir": "./temp/deploy/",
 "account": "spfxsamples",
 "container": "azurehosted-webpart",
 "accessKey": "q1UsGWocj+CnlLuv9ZpriOCj46ikgBbDBCaQ0FfE8+qKVbDTVSbRGj41avlG73rynbvKizZpIKK9XpnpA=="
}

CDN Path güncelleme

“config” folder içerisinde yer alan “write-manifest.json” dosyasını açınız. “cdnBasePath” içerisine oluşturmuş olduğunuz Azure CDN url ile güncelleyiniz.

{
 "cdnBasePath": "https://spfxsamples.azureedge.net/azurehosted-webpart/"
}

SharePoint Framework Deploy Süreci

  • Aşağıdaki komutu çalıştırınız. “gulp bundle –ship” solution bundle etmenizi etmenizi sağlamaktadır.
gulp bundle --ship
  • Sonra aşağıdaki kodu çalıştırarak CDN ‘e “temp/deploy” içerisinde yer alan CSS, JS gibi assets yükleyiniz.
gulp deploy-azure-storage
  • Solution paket haline getirmek için aşağıdaki komutu çalıştırınız. Komut işlemini tamamladıktan sonra config için belirtmiş olduğunuz path içerisine oluşturmaktadır. (solution klasörü)
gulp package-solution --ship

Paket içerisindeki görüntülemek isterseniz “solution/debug” klasörüne gidip, görüntüleyebilirsiniz.

  • Paketleme işlemimiz bu kadar, şimdi ilgili “.sppkg” dosyasını SharePoint App Katalog içerisine yükleyiniz.
  • Eğer daha önceden aynı isimde bir app mevcut ise size değiştirip değiştirilmeyeceğini soracaktır. “Replace it” butonuna tıklayıp uygulamayı upload ediniz.
  • Başarı ile upload ettikten sonra “Deploy” deyiniz. (domain olarak Azure CDN url olduğuna dikkat ediniz.)

Tüm deploy işlemlerimiz bu kadar 🙂

SharePoint Framework Uygulama Yükleme

  • Developer site ya da uygulamanızı kullanmak istediğiniz site collection ‘a gidiniz.
  • Sağ üst nav bar üzerinde “Add an app” butonuna tıklayınız.
  • Search box üzerinde kendi uygulamanızı aratıp, yükleyiniz.
  • Uygulamanızı yükledikten sonra WebPart mevcut ise görüntülemek istediğiniz sayfayı açınız ve WebPart ekleyiniz.
  • Local üzerinde node.js çalışmasa bile uygulamanız görüntülenmeye devam edecektir.
  • F12 tuşuna basıp kontrol ettiğinizde Azure CDN üzerinden yüklendiğini göreceksiniz.

Tüm işlemimiz bu kadar, okuduğunuz için teşekkür ederim 🙂

SharePoint Framework (SPFx) Deployment SharePoint Library

0

“.sppkg” paketi içerisini kontrol ettiğinizde içerisinde CSS, JavaScript ve diğer assets yer aldığını görüyor olacaksınız. Bu dosyalar genellikle CDN üzerinden dağıtım yapılmaktadır. (Azure CDN ya da Office 365 CDN gibi, bu yöntem ile farklı CDN ortamı içerisinden de veri alabilirsiniz.) Fakat SharePoint ‘e deploy yapmak için CDN kullanmak gibi bir zorunluluk yoktur. Şimdi CDN kullanmadan deploy yapabilmek için neler yapmalıyız bir göz atalım 🙂

CDN yerine kullanacağımız doküman kütüphanesi oluşturma

  • Dosyaları yüklemek istediğiniz site açınız.
  • Sağ top nav bar içerisinde yer alan “Add an app” butonuna tıklayınız.
  • “Document Library” seçiniz.
  • Permission üzerinde yetkileri düzenleyiniz. (Everyone yetki verebilirsiniz.)

SharePoint library için solution package ayarları

“config” folder içerisinde yer alan “package-solution.json” dosyasını açınız. “includeClientSideAssets” property “false” olarak güncelleyiniz. Bu durumda asset ‘leri paket içerisine dahil etmeyecektir. Çünkü biz SharePoint library içerisinden çekmesini istiyoruz. 🙂

CDN Path güncelleme

“config” folder içerisinde yer alan “write-manifest.json” dosyasını açınız. “cdnBasePath” içerisine oluşturmuş olduğunuz doküman kütüphanesinin url ile güncelleyiniz.

SharePoint Framework Deploy Süreci

  • Aşağıdaki komutu çalıştırınız. “gulp bundle –ship” solution bundle etmenizi etmenizi sağlamaktadır.
gulp bundle --ship
  • “temp/deploy” folder içerisine bundle edilmiş dosyaları oluşturmuş olduğunuz kütüphaneye upload ediniz.
  • Solution paket haline getirmek için aşağıdaki komutu çalıştırınız. Komut işlemini tamamladıktan sonra config için belirtmiş olduğunuz path içerisine oluşturmaktadır. (solution klasörü)
gulp package-solution --ship

Paket içerisindeki görüntülemek isterseniz “solution/debug” klasörüne gidip, görüntüleyebilirsiniz.

  • Paketleme işlemimiz bu kadar, şimdi ilgili “.sppkg” dosyasını SharePoint App Katalog içerisine yükleyiniz.
  • Eğer daha önceden aynı isimde bir app mevcut ise size değiştirip değiştirilmeyeceğini soracaktır. “Replace it” butonuna tıklayıp uygulamayı upload ediniz.
  • Başarı ile upload ettikten sonra “Deploy” deyiniz. (domain olarak doküman kütüphanesi url olduğuna dikkat ediniz.)

Tüm deploy işlemlerimiz bu kadar 🙂

SharePoint Framework Uygulama Yükleme

  • Developer site ya da uygulamanızı kullanmak istediğiniz site collection ‘a gidiniz.
  • Sağ üst nav bar üzerinde “Add an app” butonuna tıklayınız.
  • Search box üzerinde kendi uygulamanızı aratıp, yükleyiniz.
  • Uygulamanızı yükledikten sonra WebPart mevcut ise görüntülemek istediğiniz sayfayı açınız ve WebPart ekleyiniz.
  • Local üzerinde node.js çalışmasa bile uygulamanız görüntülenmeye devam edecektir.
  • F12 tuşuna basıp kontrol ettiğinizde doküman kütüphanesi üzerinden yüklendiğini göreceksiniz.

Tüm işlemimiz bu kadar, okuduğunuz için teşekkür ederim 🙂

SharePoint Framework (SPFx) Deployment Office 365 CDN

0

Artık SPFx ile development yapabiliyoruz. Şimdi deployment sürecine bir göz atalım 🙂

SharePoint Framework (SPFx) ile geliştirmiş olduğunuz applicationı Office CDN üzerinde kullanabilirsiniz. Varsayılan olarak pasif olmasından dolayı PowerShell script yazarak aktifleştirmeniz gerekmektedir.

Office 365 CDN Aktifleştirme

  • SharePoint Online Management Shell ‘i linke tıklayarak bilgisayarınıza yükleyiniz.

SharePoint Online Management Shell sadece Window üzerinde çalışmaktadır. Farklı bir işletim sisteminiz mevcur ise Office 365 CLI kullanarak bu adımları gerçekleştirebilirsiniz.

  • Aşağıdaki komutu yazarak, SharePoint tenant ortamınıza bağlanın
Connect-SPOService -Url https://contoso-admin.sharepoint.com
  • SharePoint tenant hesabınızda CDN aktif edilip edilmediğini öğrenmek için aşağıdaki komutu kullanabilirsiniz.
Get-SPOTenantCdnEnabled -CdnType Public
Get-SPOTenantCdnOrigins -CdnType Public
Get-SPOTenantCdnPolicies -CdnType Public
  • SharePoint tenant hesabınızı aktifleştirmek için aşağıdaki komutu çalıştırınız.
Set-SPOTenantCdnEnabled -CdnType Public
  • Sizden ayarlar için onay isteyecektir. “Y” tuşuna basıp, enter deyiniz.

Aktifleştirilmesi biraz zaman alacaktır, Office 365 CDN için gerekli işlemlerimiz bu kadar 🙂

Solution settings

“config” folder içerisinde yer alan “package-solution.json” dosyasını açınız.

{
 "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
 "solution": {
   "name": "helloword-webpart-client-side-solution",
   "id": "3c1af394-bbf0-473c-bb7d-0798f0587cb7",
   "version": "1.0.0.0",
   "includeClientSideAssets": true
 },
 "paths": {
   "zippedPackage": "solution/helloword-webpart.sppkg"
 }
}

“includeClientSideAssets” varsayılan “true” olarak gelmektedir. Bu property ile statik assets “.sppkg” paketi içerisine otomatik dahil edilmektedir.

SharePoint Framework Deploy Süreci

  • Aşağıdaki komutu çalıştırınız. “gulp bundle –ship” solution bundle etmenizi etmenizi sağlamaktadır.
gulp bundle --ship
  • Solution paket haline getirmek için aşağıdaki komutu çalıştırınız. Komut işlemini tamamladıktan sonra config için belirtmiş olduğunuz path içerisine oluşturmaktadır. (solution klasörü)
gulp package-solution --ship

Paket içerisindeki görüntülemek isterseniz “solution/debug” klasörüne gidip, görüntüleyebilirsiniz.

  • Paketleme işlemimiz bu kadar, şimdi ilgili “.sppkg” dosyasını SharePoint App Katalog içerisine yükleyiniz.
  • Eğer daha önceden aynı isimde bir app mevcut ise size değiştirip değiştirilmeyeceğini soracaktır. “Replace it” butonuna tıklayıp uygulamayı upload ediniz.
  • Başarı ile upload ettikten sonra “Deploy” deyiniz. (domain olarak SharePoint Online yazdığına dikkat ediniz.)

Tüm deploy işlemlerimiz bu kadar 🙂

SharePoint Framework Uygulama Yükleme

  • Developer site ya da uygulamanızı kullanmak istediğiniz site collection ‘a gidiniz.
  • Sağ üst nav bar üzerinde “Add an app” butonuna tıklayınız.
  • Search box üzerinde kendi uygulamanızı aratıp, yükleyiniz.
  • Uygulamanızı yükledikten sonra WebPart mevcut ise görüntülemek istediğiniz sayfayı açınız ve WebPart ekleyiniz.
  • Local üzerinde node.js çalışmasa bile uygulamanız görüntülenmeye devam edecektir.
  • F12 tuşuna basıp kontrol ettiğinizde “http://publiccdn.sharepointonline.com” adresi üzerinden yüklendiğini göreceksiniz.

SharePoint Online içerisinde CDN aktif değilse ve “includeClientSideAssets” config içerisinde “true” olarak işaretliyse app catalog içerisinde yer alan “ClientSideAssets” içerisine yüklenecektir. Bu durumda url: “https://sppnp.microsoft.com/sites/apps/ClientSideAssets/.” gibi olacaktır.

Tüm işlemimiz bu kadar, okuduğunuz için teşekkür ederim 🙂

SharePoint Framework (SPFx) Extensions Command Set

0

Command Set, listview üzerinde custom action oluşturmanıza olanak sağlamaktadır. Microsoft sp-dev-fx-extensions reposu içerisine bir örnek yaptım, GitHub üzerinden göz atabilirsiniz. (Doküman kütüphanesi içerisinde seçmiş olduğunuz bir dokümanı @pnp/sp ile base64 halini elde ettikten sonra Microsoft Graph ile e-mail göndermektedir.)

Extension Proje Oluşturma

  • İlk olarak çalıştığınız lokasyon üzerinde aşağıdaki kodu çalıştırarak yeni klasör oluşturunuz. (md bulunduğunuz konum üzerinde klasör oluşturmanızı sağlar.)
md app-extension
  • Oluşturduğunuz proje dizinine gitmek için aşağıdaki kodu çalıştırınız. (cd komutu belirttiğiniz dizine gitmenizi sağlar.)
cd app-extension
  • Yeoman SharePoint Generator kullanarak yeni WebPart oluşturalım.
yo @microsoft/sharepoint
  • Sizden solution oluşturmak için aşağıdaki bilgileri isteyecektir:
  1. What is your solution name?” default olarak “Send Document” yazmaktadır, “enter” tuşuna basıp kullanabilir ya da farklı bir solution name belirtebilirsiniz.
  2. Which baseline packages do you want to target for your component(s)? (Use arrow keys)” son versiyon üzerinden devam ediniz.
  3. Where do you want to place the files? (Use arrow keys)” oluşturulacak dosyaların hangi kısma atılmasını belirtiniz. “Use the current folder” deyip, var olan klasör üzerine oluşturmayı tercih ediniz.
  4. Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? (y/N)” her siteye uygulamanızı eklemek yerine, tüm sitelerde otomatik olarak dağıtılmış bir şekilde kullanmak istiyorsanız, “y” deyip, “enter” tuşuna basınız. Default olarak “No” yazmaktadır, herhangi bişey yazmadan “enter” dediğinizde “No” olarak değeri atayacaktır.
  5. Which type of client-side component to create? (Use arrow keys)” client -side component olarak seçiminizi “Extension” olarak yapınız.
  6. Which type of client-side extention to create?” “ListView Command Set” olarak seçiniz
  • Sonraki parametreler Extension için gerekli olan bilgilerdir:
  1. What is your Command Set name?” Extension ismini yazınız.
  2. What is your Command Set description?” Extension için açıklama giriniz.

Tüm parametrelerimizi girdikten sonra Yeoman gerekli olan dependencies yükler ve gerekli alt yapıyı hazırlıyor olacaktır, 1-2 dk. sürebilir.

Projenizi başarıyla oluşturduktan sonra aşağıda gibi folder structure oluşacaktır.

Extension içerisinde yer alan “.manifest.json” ile parametrelerinize erişebilirsiniz ve ihtiyacınıza göre güncelleme yapabilirisiniz.

ListView Command Set Debug

“config” folder, “serve.json” içerisinde yer alan pageUrl güncellemeniz gerekmektedir. “gulp serve” demeniz durumunda browser üzerinde ilgili url ‘i açıyor olacaktır.

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "serveConfigurations": {
    "default": {
      "pageUrl": "https://sppnp.sharepoint.com/sites/Group/Lists/Orders/AllItems.aspx",
      "customActions": {
        "bf232d1d-279c-465e-a6e4-359cb4957377": {
          "location": "ClientSideExtension.ListViewCommandSet.CommandBar",
          "properties": {
            "sampleTextOne": "One item is selected in the list",
            "sampleTextTwo": "This command is always visible."
          }
        }
      }
    },
    "helloWorld": {
      "pageUrl": "https://sppnp.sharepoint.com/sites/Group/Lists/Orders/AllItems.aspx",
      "customActions": {
        "bf232d1d-279c-465e-a6e4-359cb4957377": {
          "location": "ClientSideExtension.ListViewCommandSet.CommandBar",
          "properties": {
            "sampleTextOne": "One item is selected in the list",
            "sampleTextTwo": "This command is always visible."
          }
        }
      }
    }
  }
}

serve.config ile ilgili detaylar

  • GUID, extension ID ‘sidir.
  • Location, Extension görüntüleneceği yeri belirtmektedir.
    • ClientSideExtension.ListViewCommandSet.ContextMenu: item üzerinde açılan context menü
    • ClientSideExtension.ListViewCommandSet.CommandBar: Liste ve kütüphane içerisinde görüntülecek üst command set menü
    • ClientSideExtension.ListViewCommandSet: Hem context menü hem de command bar üzerinde görüntülenmekte
  • Properties: Property tanımlayabileceğiniz alandır

Çok basit olmasından dolayı kod detayına girmeyeceğim, aklınıza takılan en ufak bir yer olursa iletişim kurabilirsiniz. Okuduğunuz için teşekkür ederim. 🙂

SharePoint Framework (SPFx) Extentions Field Customizer

0

Field Customizer, liste içerisindeki field ‘ları customize etmenize olanak sağlamaktadır. Örnek olması açısından seçilen location ‘nın hava durumunu getiren field customizer extension yazdım, GitHub üzerinden ulaşabilirsiniz.

Extension Proje Oluşturma

  • İlk olarak çalıştığınız lokasyon üzerinde aşağıdaki kodu çalıştırarak yeni klasör oluşturunuz. (md bulunduğunuz konum üzerinde klasör oluşturmanızı sağlar.)
md app-extension
  • Oluşturduğunuz proje dizinine gitmek için aşağıdaki kodu çalıştırınız. (cd komutu belirttiğiniz dizine gitmenizi sağlar.)
cd app-extension
  • Yeoman SharePoint Generator kullanarak yeni WebPart oluşturalım.
yo @microsoft/sharepoint
  • Sizden solution oluşturmak için aşağıdaki bilgileri isteyecektir:
  1. What is your solution name?” default olarak “Weather” yazmaktadır, “enter” tuşuna basıp kullanabilir ya da farklı bir solution name belirtebilirsiniz.
  2. Which baseline packages do you want to target for your component(s)? (Use arrow keys)” son versiyon üzerinden devam ediniz.
  3. Where do you want to place the files? (Use arrow keys)” oluşturulacak dosyaların hangi kısma atılmasını belirtiniz. “Use the current folder” deyip, var olan klasör üzerine oluşturmayı tercih ediniz.
  4. Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? (y/N)” her siteye uygulamanızı eklemek yerine, tüm sitelerde otomatik olarak dağıtılmış bir şekilde kullanmak istiyorsanız, “y” deyip, “enter” tuşuna basınız. Default olarak “No” yazmaktadır, herhangi bişey yazmadan “enter” dediğinizde “No” olarak değeri atayacaktır.
  5. Which type of client-side component to create? (Use arrow keys)” client -side component olarak seçiminizi “Extension” olarak yapınız.
  6. Which type of client-side extention to create?” “Field Customizer” olarak seçiniz
  • Sonraki parametreler Extension için gerekli olan bilgilerdir:
  1. What is your Field Customizer name?” Extension ismini yazınız.
  2. What is your Field Customizer description?” Extension için açıklama giriniz.
  3. Which framework would you like to use?” React seçiniz.

Tüm parametrelerimizi girdikten sonra Yeoman gerekli olan dependencies yükler ve gerekli alt yapıyı hazırlıyor olacaktır, 1-2 dk. sürebilir.

Field Customizer Debug

Kurulum işlemlerimizi yaptık, şimdi listeye bağlayalım 🙂 Hava durumu örneği yaptığım için GitHub üzerindeki pnp powershell scriptini çalıştırabilir ya da “Weather” isminde “Title, Location” fieldlarını oluşturup kendiniz manuel olarak da oluşturabilirsiniz.

“config” folder içerisinde yer alan “serve.json” dosyasını açınız. “InternalFieldName” alanını customize etmek istediğiniz field ismi ile güncelleyiniz. (“Location” gibi) Sonrasında “pageURL” alanına oluşturduğunuz listenin urli ile güncelleyiniz.

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "serveConfigurations": {
    "default": {
      "pageUrl": "https://serdarketenci.sharepoint.com/sites/pnp_portal/Lists/Weather/AllItems.aspx",
      "fieldCustomizers": {
        "Location": {
          "id": "c11b30cc-775f-4760-9273-3f09fa714aaa",
          "properties": {
            "units": "metric"
          }
        }
      }
    },
    "weatherFieldCustomizer": {
      "pageUrl": "https://serdarketenci.sharepoint.com/sites/pnp_portal/Lists/Weather/AllItems.aspx",
      "fieldCustomizers": {
        "Location": {
          "id": "c11b30cc-775f-4760-9273-3f09fa714aaa",
          "properties": {
            "units": "metric"
          }
        }
      }
    }
  }
}

Sonrasında aşağıdaki komutu çalıştırınız.

gulp serve

Karşınıza “pageURL” eklediğiniz link açılıyor olacaktır. “Load debug scripts” butonuna tıklayınız.

Tüm işlemlerimiz bu kadar, GitHub üzerindeki örneği inceleyip ihtiyacınıza göre geliştirebilirsiniz, okuduğunuz için teşekkür ederim 🙂

SharePoint Framework Extensions Application Customizer

0

Bir önceki makalemde SharePoint Framework Extensions tiplerinden olan Application Customizer hakkında genel bilgi vermiştim. Application Customizer ile SharePoint page üzerinde müdahale edebileceğimizi belirtmiştim. (Örneğin sayfa üzerinde standart bir header ve footer alanı oluşturmak gibi)

Demo source code için GitHub linkine göz atabilirsiniz. 🙂

Extension Proje Oluşturma

  • İlk olarak çalıştığınız lokasyon üzerinde aşağıdaki kodu çalıştırarak yeni klasör oluşturunuz. (md bulunduğunuz konum üzerinde klasör oluşturmanızı sağlar.)
md app-extension
  • Oluşturduğunuz proje dizinine gitmek için aşağıdaki kodu çalıştırınız. (cd komutu belirttiğiniz dizine gitmenizi sağlar.)
cd app-extension
  • Yeoman SharePoint Generator kullanarak yeni WebPart oluşturalım.
yo @microsoft/sharepoint
  • Sizden solution oluşturmak için aşağıdaki bilgileri isteyecektir:
  1. What is your solution name?” default olarak “app-extension” yazmaktadır, “enter” tuşuna basıp kullanabilir ya da farklı bir solution name belirtebilirsiniz.
  2. Which baseline packages do you want to target for your component(s)? (Use arrow keys)” son versiyon üzerinden devam ediniz.
  3. Where do you want to place the files? (Use arrow keys)” oluşturulacak dosyaların hangi kısma atılmasını belirtiniz. “Use the current folder” deyip, var olan klasör üzerine oluşturmayı tercih ediniz.
  4. Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? (y/N)” her siteye uygulamanızı eklemek yerine, tüm sitelerde otomatik olarak dağıtılmış bir şekilde kullanmak istiyorsanız, “y” deyip, “enter” tuşuna basınız. Default olarak “No” yazmaktadır, herhangi bişey yazmadan “enter” dediğinizde “No” olarak değeri atayacaktır.
  5. Which type of client-side component to create? (Use arrow keys)” client -side component olarak seçiminizi “Extension” olarak yapınız.
  6. Which type of client-side extention to create?” “Application Customizer” olarak seçiniz
  • Sonraki parametreler Extension için gerekli olan bilgilerdir:
  1. What is your Application Customizer name?” Extension ismini yazınız.
  2. What is your Application Customizer description?” Extension için açıklama giriniz.

Tüm parametrelerimizi girdikten sonra Yeoman gerekli olan dependencies yükler ve gerekli alt yapıyı hazırlıyor olacaktır, 1-2 dk. sürebilir.

Extension name 40 karakterden uzun olması durumunda “gulp serve –nobrowser” komutunu çalıştırdğınızda hata alabilirsiniz. Bu durumda Application Customizer manifest JSON file üzerinden düzenlemeniz gerekmektedir.

  • Visual studio code ile projeyi açtığınızda aşağıdaki gibi solution structure oluşacaktır.

Application Customizer Örnek Kod

“HelloWorldApplicationCustomizer.ts” dosyasını açınız. Projeyi açtığınızda “sp-application-base” paketinin import edildiğini göreceksiniz. “BaseApplicationCustomizer” sınıfı üzerinden oluşturduğumuz extension extend olmaktadır.

onInit() methodu içerisinde gerekli işlemlerinizi yapabiliriz. “this.context” ve “this.properties” WebPart olduğu gibi geçerlidir.

Application Customizer Debug

SharePoint Framework Extentions Local Workbench üzerinde test edemezsiniz. Debug işlemleri için SharePoint Workbench tercih etmeniz gerekmektedir. Şimdi bunun için neler yapmamız gerekiyor bir göz atalım 🙂

  • “config” klasörü içerisinde yer alan “serve.json” dosyasını açınız. (serve.json içerisinde Guid olduğunu göreceksiniz. Buradaki Guid, extension klasöründe yer alan “*.manifest.json” yer alan Guid ile eşleşmesi gerekmektedir.)
  • “pageURL” alanını test edeceğiniz SharePoint sayfası ile güncelleyiniz.
https://sppnp.sharepoint.com/sites/yoursite/SitePages/Home.aspx
  • Daha önceden developer certificate yüklemediyseniz, aşağıdaki komutu çalıştırınız.
gulp trust-dev-cert
  • Test etmek için aşağıdaki komutu çalıştırınız.
gulp serve
  • “serve.json” içerisine tanımlamış olduğunuz sayfa açılıyor olacaktır. “Load debug scripts” butonuna tıklayınız.

Veee karşınıza aşağıdaki gibi dialog mesajı çıkıyor olacaktır.

Okuduğunuz için teşekkür ederim, pekiştirmek adına makalemin başında belirttiğim demoyu incelemeyi unutmayınız 🙂