SharePoint Framework (SPFx) Extensions Command Set

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. 🙂