Ana Sayfa Blog Sayfa 2

SharePoint Framework (SPFx) v1.8.0 Güncellemesi Neler İçermektedir?

0

SharePoint Framework (SPFx) v1.8.0 ile bir çok özellik kullanılabilir hale geldi. Linke tıklayarak release notes ilgili detaylı bilgiye ulaşabilirsiniz.

  • SharePoint Framework development of Microsoft Teams Tabs ile MS Teams Tabs içerisinde uygulama geliştirmenize olanak sağlamaktadır. Yani SharePoint içerisinde kullandığınız WebPart ‘ı, MS Teams Tabs içerisinde de kullanabilirsiniz.
  • Single Part App Pages, SharePoint ve MS Teams içerisinde kullanılabilen ve end user tarafından değiştirilemeyecek ya da konfigüre edilemeyecek şekilde locked layout düzeni sunmaktadır.
  • Web parts in Isolated Domains, API tarafında requestleri kısıtlamak ve Azure AD tarafında onay vererek daha izole WebPart geliştirmenize olanak sağlamaktadır.
  • Library Component, preview olarak sunuldu. v1.9.0 ile release olacaktır.
  • Fabric React support verilen versiyon v6.143.0 ‘a yükseltildi. (önceki versiyon, v5.131.0)
  • React support verilen versiyon v16.7 yükseltildi. (önceki versiyon, 16.3.2)
    Not: manuel olarak güncellemek isterseniz ” npm install @types/[email protected] –save-dev –save-exact ” kodunu çalıştırmanız yeterli olacaktır.
  • TypeScript versiyon v2.7, v2.9 & v3.x support vermeye başladı. (Öncedeki versiyon, v2.4.2)

SharePoint Framework (SPFx) Son Sürüme Yükseltme

Aşağıdaki komutu kullanarak son versiyonun yüklü olup olmadığını kontrol edebilirsiniz.

npm outdated --global

Son versiyona yükseltmek için aşağıdaki komutu çalıştırmanız yeterli olacaktır.

npm install @microsoft/generator-sharepoint --global

SharePoint Framework (SPFx) – Vue.js

0

Son zamanların popüler front-end teknolojilerinden ve popülerliği gitgide artan progressive javascript framework olan Vue.js değinmek istedim.

Vue.js nedir?

Vue.js, user interface oluşturmanıza odaklanmış progressive framework ‘tür.

Sadece view kısmına odaklanmasından dolayı core kütüphanesi oldukça küçük boyuta sahiptir. Lightweight yapısı ise hız anlamında oldukça önemlidir.

Bu nedenle mevcut bir projeye entegrasyonu çok kolaydır. Aynı zamanda modüler yapısı sayesinde state management, routing vs. gibi modüllere ihtiyacınız olması durumunda projenize onaylanmış olan pluginleri dahil edip, front-end tarafında tam bir framework olarak kullanabilirsiniz. Linke tıklayarak modülleri görüntüleyebilirsiniz.

Esnek yapısının dışında öğrenmesi çok kolay. Syntax yapısı ve Vue.js tarafında dokümantasyonun iyi olmasından dolayı öğrenmeyi çok kolaylaştırmaktadır.

Vue.js Evan You tarafından geliştirmeye başlanmıştır, geliştirirken Angular ve React gibi front-end teknolojilerinden esinlenmiş ve iyi yönlenlerini alarak developerların ihtiyaçlarına yönelik geliştirilmesine odaklandığını belirtmektedir. React ‘ta olduğu gibi Vue.js ‘de Virtual DOM ‘a sahiptir. Bu nedenle hızlıdır. Kısaca açıklamam gerekirse, direk tarayıcının DOM ‘u üzerinde işlem yapmak maliyetlidir, yani hız anlamında sorun yaşatmaktadır. Vue.js, değişiklikleri önce Virtual DOM üzerinde yapar ve sonrasında tarayıcının DOM ‘u üzerinde sadece değişen kısımları günceller.

Vue.js ‘in diğer kütüphaneler ile detaylı karşılaştırmasını linke tıklayarak ulaşabilirsiniz.

SharePoint Framework (SPFx) içerisinde Vue.js kullanımı

SPFx ile proje oluşturmaya başladığınızda React ve Knockout gibi kütüphaneleri otomatik olarak kullanmanıza olanak sağlamaktadır. Fakat “No JavaScript Framework” seçip, Vue.js ile entegrasyonu sağlayabilirsiniz. Eğer kendiniz entegre etmek istiyorsanız linke tıklayarak işlemlerinizi gerçekleştirebilirsiniz.

Tüm bunlarla uğraşmak istemezseniz, imdadınıza PnP yetişmektedir. Linke tıklayarak PnP Yeoman Generator hakkında detaylı bilgi edinebilirsiniz.PnP Yeoman Generator düzenli olarak güncellenmektedir.

Çok basit olmasından dolayı kurulumu anlatmayacağım, örnek olması adına basit demo yapıp, GitHub üzerinde paylaştım.

Okuduğunuz için teşekkürler. 🙂

SharePoint View Özelleştirme (View Formatting)

0

Bir önceki makalemde column formatting üzerine değinmiştik. Aynı zamanda modern design ile SharePoint View içinde JSON kullanarak görünümü özelleştirmeniz mümkün.

View formatting özelleştirme

View formatting kullanmak için ilgili listeye gidiniz, sonra sağ tarafta yer alan view alanına tıklayıp “Format current view” ibaresine tıklayınız.

Sonrasında “Format view” alanı açılacaktır. Bu kısma ilgili JSON örneğini yapıştırıp güncellemeniz yeterli olacaktır.

SharePoint View Formatting ile ilgili Microsoft ‘un GitHub reposu üzerinde bir çok örnek mevcut, dilerseniz beğendiğinizi hemen kullanmaya başlayabilirsiniz.

Örneğin liste üzerinde “status” isminde bir field oluşturunuz ve statüsüne göre row bazında aşağıdaki JSON örneği ile renklendiriniz.

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$status] == 'Done', 'sp-field-severity--good', if([$status] == 'In progress', 'sp-field-severity--low' ,if([$status] == 'In review','sp-field-severity--warning', if([$status] == 'Has issues','sp-field-severity--blocked', ''))))"
}

Custom row layouts

Yukarıdaki örneğimizde sadece class ile renklendirmesini gerçekleştirdik fakat kendiniz html tag oluşturup, istediğiniz gibi görünmesini sağlayabilirsiniz. Bu işlem için ise ” rowFormatter” attr kullanmanız gerekmektedir. Aşağıda GitHub reposundaki örnek JSON inceleyebilirsiniz.

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-title"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Feedback]"
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "defaultClick"
            },
            "txtContent": "Give feedback",
            "attributes": {
              "class": "sp-row-button"
            },
            "style": {
              "display": {
                "operator": "?",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "@me",
                      "[$Assigned_x0020_To.email]"
                    ]
                  },
                  "",
                  "none"
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

Syntax örnekleri

rowFormatter: İsteğe bağlı oluşturmak istediğiniz html tag ‘leri için kullanabilirsiniz.

additionalRowClass: Row için class name vermenizi sağlamaktadır.

hideSelection: rowFormatter attr ile birlikte “hideSelection” attr kullanabilirsiniz. İlgili değerlerinize göre satırı gizlemenize olanak sağlamaktadır. Default değeri “true”.

hideColumnHeader: Sutün başlıklarınızı gizlemenizi sağlar.

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

SharePoint Sütun Özelleştirme (Column Customize Formatting)

0

SharePoint liste veya kütüphane view içerisinde JSLink gibi JSON kullanarak modern design üzerinde görünümü özelleştirmenize olanak tanımaktadır.

Örneğin, Başlık, Efor, Atanan ve Durum alanlarını içeren ve özelleştirme uygulanmadığında aşağıdaki gibi görünecektir:

Özelleştirme uyguladığınızda ise aşağıdaki gibi görünüm sağlayabilirsiniz:

Field Customizer ile ne gibi farklılar vardır?

Daha önceki makalelerimde değinmiş olduğum field customizer ‘da field üzerinde özelleştirme yapmanıza olanak tanımaktadır. Bakıldığında her ikisi de aynı işlevi yapıyor gibi görünüyor. Fakat field customizer daha güçlüdür, kod ile müdahale edebildiğiniz için özelleştirme şansınız çok daha yüksek. Column customizer ise JSON ile daha rahat ve basit bir şekilde uygulanabilir ama belli başlı kalıp dışına çıkamamaktasınız.

Field typeColumn formattingField Customizer
Öğe değerlerine ve değer aralıklarına göre koşullu biçimlendirmeDestekler Destekler
Action linksSadece statik hyperlinks desteklerDestekler
Veri görselleştirmeleriHTML ve CSS ile yapılabilirThirth party JS kullanarak ya da HTML & CSS tabanlı güncellemeleri desteklemektedir.

Şimdi Column Formatting daha detaylı göz atalım

Column Formatting için view kısmında ilgili field üzerine gelip “Column settings” sonrasında “Format this column” butonuna tıklayınız.

İlgili güncellemelerinizi JSON kullanarak yapabilirsiniz.

Örneğin aşağıdaki JSON yazdığınızda “div” içerisinde görüntülüyor olacaktır.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField"
}

Sayı aralığına göre format uygulamak için aşağıdaki JSON kullanabilirsiniz.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField <= 70,'sp-field-severity--warning', '')"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField <= 70,'Error', '')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Desteklenen Column Tipleri

Column Formatting aşağıdaki column tiplerini destekmektedir:

  • Single line of text
  • Number
  • Choice
  • Person or Group
  • Yes/No
  • Hyperlink
  • Picture
  • Date/Time
  • Lookup
  • Title (in Lists)

Aşağıdaki column tipleri desteklenmemektedir:

  • Managed Metadata
  • Filename (in Document Libraries)
  • Calculated
  • Retention Label
  • Currency

Style Kullanımı

Önceden tanımlanmış class bilgileri aşağıdaki gibidir.

Class name
sp-field-customFormatBackgroundBackground bulunan field içerisindeki margin ve padding belirler
sp-field-severity–good
sp-field-severity–low
sp-field-severity–warning
sp-field-severity–severeWarning
sp-field-severity–blocked
sp-field-dataBars
sp-field-trending–up
sp-field-trending–down
sp-field-quickActions

Yukarıdaki class name ile background belirleyebilirsiniz, iconName attribute ile ikon ekleyebilirsiniz. Yukarıdakiler dışında farklı bir özelleştirme yapmak isterseniz, Office UI Fabric ile özelleştirme yapabilirsiniz. İkon set için linke tıklayınız.

JSON syntax

elmType

Özelleştireceğiniz column türünü belirler. Yani kapsayacak olan element tipi, aşağıdakileri desteklemektedir:

  • div
  • span
  • a
  • img
  • svg
  • path
  • button

button elements

Button elementi seçmeniz durumunda tıklanıldığında bir action olacağını belirtir ve “customRowAction” attr zorunludur. customRowAction attr ile ilgili action tipleri aşağıdaki gibidir:

defaultClick: Customize edilmemiş list item ile aynı işlevi görmektedir.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Open this item",
  "customRowAction": {
    "action": "defaultClick"
  }
}

share: Sharing dialog açmaktadır.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Share this item",
  "customRowAction": {
    "action": "share"
  }
}

delete: delete confirmation dialog açacaktır.
editProps: İlgili item edit modda açacaktır.
executeFlow: “actionParams” attr ile çalıştırılacak olan flow ‘u tetiklemektedir.

txtContent

elmType ile seçilen container ‘ın içerisinde yer alan metindir.

style

elmType ile seçilen container ‘a uygulanacak olan style ifade etmektedir. Aşağıdaki style attr destek verilmektedir:

'background-color'
'fill'
'background-image'
'border'
'border-bottom'
'border-bottom-color'
'border-bottom-style'
'border-bottom-width'
'border-color'
'border-left'
'border-left-color'
'border-left-style'
'border-left-width'
'border-right'
'border-right-color'
'border-right-style'
'border-right-width'
'border-style'
'border-top'
'border-top-color'
'border-top-style'
'border-top-width'
'border-width'
'outline'
'outline-color'
'outline-style'
'outline-width'
'border-bottom-left-radius'
'border-bottom-right-radius'
'border-radius'
'border-top-left-radius'
'border-top-right-radius'
'box-decoration-break'
'box-shadow'
'box-sizing'

'overflow-x'
'overflow-y'
'overflow-style'
'rotation'
'rotation-point'

'opacity'
'cursor'

'height'
'max-height'
'max-width'
'min-height'
'min-width'
'width'

'flex-grow'
'flex-shrink'
'flex-flow'
'flex-direction'
'flex-wrap'
'flex'
'justify-content'
'align-items'

'box-align'
'box-direction'
'box-flex'
'box-flex-group'
'box-lines'
'box-ordinal-group'
'box-orient'
'box-pack'

'font'
'font-family'
'font-size'
'font-style'
'font-variant'
'font-weight'
'font-size-adjust'
'font-stretch'

'grid-columns'
'grid-rows'

'margin'
'margin-bottom'
'margin-left'
'margin-right'
'margin-top'

'column-count'
'column-fill'
'column-gap'
'column-rule'
'column-rule-color'
'column-rule-style'
'column-rule-width'
'column-span'
'column-width'
'columns'

'padding'
'padding-bottom'
'padding-left'
'padding-right'
'padding-top'

'bottom'
'clear'
'clip'
'display'
'float'
'left'
'overflow'
'position' 
'right'
'top'
'visibility'
'z-index'

'border-collapse'
'border-spacing'
'caption-side'
'empty-cells'
'table-layout'

'color'
'direction'
'letter-spacing'
'line-height'
'text-align'
'text-decoration'
'text-indent'
'text-transform'
'unicode-bidi'
'vertical-align'
'white-space'
'word-spacing'
'hanging-punctuation'
'punctuation-trim'
'text-align-last'
'text-justify'
'text-outline'
'text-shadow'
'text-wrap'
'word-break'
'word-wrap'

Örnek JSON formatı:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "style": {
      "padding": "4px",
      "background-color": {
         "operator": "?",
         "operands": [
            {
               "operator": "<",
               "operands": [
                  "@currentField",
                  40
               ]
            },
            "#ff0000",
            "#00ff00"
         ]
      }
   }
}

attributes

Belirtilen elmType için attr eklemenize olanak sağlamaktadır. Aşağıda attr desteklenmektedir:

  • href
  • rel
  • src
  • class
  • target
  • title
  • role
  • iconName
  • d
  • aria

Örneğin, column içerisinde link eklemek istediğinizde aşağıdaki JSON kullanarak görünümü özelleştirebilirsiniz.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "target": "_blank",
    "href": "='http://finance.yahoo.com/quote/' + @currentField"
}

children

Belirtilen elmType içerisindeki child element dizisini ifade etmektedir. txtContent attr var ise yoksayılacaktır.

debugMode

Hata olması durumunda kullanılan attr ‘dür. Console içerisine yazdırılmaktadır.

forEach

Multi value değer içeren field type (lookup, person ve choice) ‘larında kullanılabilen attr. Örnek kullanımı ise, “iteratorName in @currentField” ya da “iteratatorName in [$FieldName]” olarak kullanılmaktadır. iteratorName tanımlamasını yaptıktan sonra diğer attr içerisinde kullanabilirsiniz. (“forEach”: “person in @currentField” tanımlama yaptınız diyelim,
“txtContent”: “[$person.title]” olarak txtContent içerisine kişinin “title” bilgisini ekleyebilirsiniz.)

iteratorName tanımlaması yaparken rakam ile başlamamalıdır, “_” kullanarak kelimeleri birleştirebilirsiniz.

Daha detaylı bilgi için linke tıklayarak ulaşabilirsiniz, anlaşılmayan en ufak bir konu olması durumunda iletişim kurmanız durumunda yardımcı olmaya çalışacağım, okuduğunuz için teşekkür ederim. 🙂

Microsoft Teams ve PowerShell

0

Microsoft Teams ufak ufak hayatımızın bir parçası olmaya başladı ve Microsoft, MS Teams çok önem veriyor. Bu makale ile PowerShell kullanarak MS Teams üzerinde neler yapabiliyoruz bir göz atalım.

PowerShell kullanarak:

  • Add-TeamUser
  • Connect-MicrosoftTeams
  • Disconnect-MicrosoftTeams
  • Get-Team
  • Get-TeamChannel
  • Get-TeamFunSettings
  • Get-TeamGuestSettings
  • Get-TeamHelp
  • Get-TeamMemberSettings
  • Get-TeamMessagingSettings
  • Get-TeamUser
  • New-Team
  • New-TeamChannel
  • Remove-Team
  • Remove-TeamChannel
  • Remove-TeamUser
  • Set-Team
  • Set-TeamChannel
  • Set-TeamFunSettings
  • Set-TeamGuestSettings
  • Set-TeamMemberSettings
  • Set-TeamMessagingSettings
  • Set-TeamPicture

Yukarıdaki komut kümesini kullanarak MS Teams üzerinde bir çok işlemi gerçekleştirebilirsiniz.

İlk olarak PowerShell açınız ve aşağıdaki komutu çalıştırarak MicrosoftTeams modülünü yükleyiniz.

Install-Module -Name MicrosoftTeams 

Yüklemiş olduğunuz modülü unistall etmek için aşağıdaki komutu kullanabilirsiniz.

Uninstall-Module MicrosoftTeams

Modülü yükledikten sonra MSTeams bağlanmak için aşağıdaki komutu kullanmalısınız.

Connect-MicrosoftTeams

Yukarıdaki komutu yazdıkdan sonra size kullanıcı ve şifre ile MSTeams ‘e bağlanmanızı isteyecektir. Bilgileri doğru olarak girdikten sonra aşağıdaki gibi response dönecektir.

Get-Team: Tüm team bilgilerini döner.

Get-TeamChannel: Team içerisindeki channel bilgilerini döner.

Get-TeamMemberSettings: Grup içerisindeki Team member ayarlarını konfigüre etmenize olanak tanımaktadır.

New-Team: Yeni Team oluşturmanızı sağlar.

New-Team
   [-Group <String>]
   [-DisplayName <String>]
   [-Description <String>]
   [-Alias <String>]
   [-Owner <String>]
   [-Classification <String>]
   [-AccessType <String>]
   [-AddCreatorAsMember <Boolean>]
   [-Template <String>]
   [<CommonParameters>]

Get-TeamUser: Grup içerisindeki kullanıcıları döner.

Daha detaylı bilgi için linke tıklayarak göz atabilirsiniz. Okuduğunuz için teşekkür ederim. 🙂

SharePoint Framework (SPFx) – Microsoft Teams Tab

0

SPFx ile SharePoint tarafında bir çok geliştirme yaptıktan sonra ufak ufak Microsoft Teams ile neler yapabiliriz? Developmentı nasıl gerçekleştiriyoruz? Microsoft Teams ‘i daha efektif nasıl kullanabiliriz? Elimden geldiğince artık Microsoft Teams odaklı development yapmaya gayret göstereceğim.

Şimdi Microsoft Teams ile ilgili ilk örneğimize geçiş yapalım.

Yeni WebPart Projesi Oluşturma

İlk olarak daha önceki makalelerde gerçekleştirdiğimiz gibi, yeni bir klasör oluşturunuz.

md teams-tab-webpart

Oluşturduğunuz path ‘e erişiniz.

cd teams-tab-webpart

Sonra aşağıdaki komut ile Yeoman Generator çalıştırınız.

yo @microsoft/sharepoint

Bilgileri ihtiyacınıza yönelik doldurunuz.

Tenant deploy yapılması önemlidir, aksi taktirde Microsoft Teams WebPart ‘ınıza erişemeyecektir.


Microsoft Teams tab için gerekli olan assets için “Teams” klasörü oluşturunuz.

Klasörü oluşturduktan sonra Microsoft Teams ‘in yüklemiş olduğunuz resimleri aşağıdaki standart baz alarak isimlendiriniz.

  • [webpartid]_color.png – Tab için küçük resim
  • [webpartid]_outline.png – Tab için büyük resim

Microsoft Teams için kullanılabilir duruma getirmek için WebPart manifest güncelleme

WebPart içerisinde yer alan “*.manifest.json” dosyasını açınız.

Microsoft Teams tab içerisinde kullanmak için “supportedHosts” alanına “TeamsTab” ekleyiniz.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "2438bdea-1aea-4a44-9149-a700985fc4ce",
  "alias": "HelloTeamsTabWebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportedHosts": ["SharePointWebPart","TeamsTab"],
  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "HelloTeamsTab" },
    "description": { "default": "HelloTeamsTab description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "HelloTeamsTab"
    }
  }]
}

Microsoft Teams context kullanımı

Aşağıdaki gibi WebPart dosyasını açınız.

Aşağıdaki satırı ekleyiniz.

import * as microsoftTeams from '@microsoft/teams-js';

WebPart içerisine context değişkeni oluşturunuz.

export default class HelloTeamsTabWebPart extends BaseClientSideWebPart<IHelloTeamsTabWebPartProps> {
 // This variable has been added
  private _teamsContext: microsoftTeams.Context;

“onInit()” methodunu aşağıdaki gibi ekleyiniz.

 protected onInit(): Promise<any> {
    let retVal: Promise<any> = Promise.resolve();
    if (this.context.microsoftTeams) {
      retVal = new Promise((resolve, reject) => {
        this.context.microsoftTeams.getContext(context => {
          this._teamsContext = context;
          resolve();
        });
      });
    }
    return retVal;
  }

Eğer aşağıdaki gibi hata alıyorsanız, yani context içerisine “microsoftTeams” objesi görünmüyorsa. Muhtemelen SharePoint Framework versiyonunuz düşüktür. Microsoft Teams desteği için SharePoint Framework v1.8 yüklemeniz gerekmektedir.

SharePoint Framework versiyon yükseltmek

Versiyon yükseltmek için linke tıklayarak önceki makalerimdeki adımları izleyerek güncelleme yapabilirsiniz.

React component güncelleme

React props nesnesini aşağıdaki gibi güncelleyiniz.

export interface IHelloTeamsTabProps {
  title: string;
  subTitle: string;
  siteTabTitle: string;
}

React component aşağıdaki gibi güncelleyiniz.

export default class HelloTeamsTab extends React.Component<IHelloTeamsTabProps, {}> {
  public render(): React.ReactElement<IHelloTeamsTabProps> {
    return (
      <div className={ styles.helloTeamsTab }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>{this.props.title}</span>
              <p className={ styles.subTitle }>{this.props.subTitle}</p>
              <p className={ styles.subTitle }>{this.props.siteTabTitle}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

WebPart “render()” kısmını aşağıdaki gibi güncelleyiniz.

 public render(): void {
    let title: string = '';
    let subTitle: string = '';
    let siteTabTitle: string = '';

    if (this._teamsContext) {
      // We have teams context for the web part
      title = "Welcome to Teams!";
      subTitle = "Building custom enterprise tabs for your business.";
      siteTabTitle = "We are in the context of following Team: " + this._teamsContext.teamName;
    }
    else {
      // We are rendered in normal SharePoint context
      title = "Welcome to SharePoint!";
      subTitle = "Customize SharePoint experiences using Web Parts.";
      siteTabTitle = "We are in the context of following site: " + this.context.pageContext.web.title;
    }

    const element: React.ReactElement<IHelloTeamsTabProps> = React.createElement(
      HelloTeamsTab,
      {
        title,
        subTitle,
        siteTabTitle
      }
    );

    ReactDom.render(element, this.domElement);
  }

Tüm işlemlerimiz bu kadar, sonra uygulamayı app olarak SharePoint içerisine yükleyiniz. Deployment ile ilgili önceki makalelerime göz atabilirsiniz.

Deploy işlemini yaparken “Make this solution available to all sites in the organization” işaretleyiniz.

Deployment işlemini başarı ile gerçekleştirdikten sonra ilgili app seçip “Sync to teams” butonuna tıklayınız. Sync etmezseniz Microsoft Teams içerisinde uygulamanız görüntülenmeyecektir.

Microsoft Teams “+” işaretine tıklayıp, WebPart seçiniz.

Karşınıza gelen popup içerisine “Install” butonuna tıklayınız.

Tüm işlemlerimiz bu kadar, aşağıdaki görüntü oluşacaktır.

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

SharePoint Framework (SPFx) – Site Columns, Content Type ve Custom List Kullanımı

0

SharePoint Framework kullanarak WebPart geliştirmek istiyorsunuz fakat tam anlamıyla bir ürün gibi davranmasını istiyorsunuz. Senaryo üzerinden biraz daha detaylı anlatmaya çalışayım. Şöyle bir senaryomuz olsun: organization chart modülü geliştiriyor olacağız ve WebPart ‘ımız ise belli bir liste şablonu üzerinden gerekli dataları çekiyor olsun. Bu durumda ilgili listeyi manuel olarak eklemek yerine App, ilgili site yüklendiğinde liste otomatik olarak oluşsun istiyoruz. Peki bu durumda neler yapmamız gerekiyor? Adım adım ilerleyip modülümüzü geliştirelim.

İlk olarak WebPart projesi oluşturunuz. Bu kısmı diğer makalelerimde dediğim için atlıyorum.

Projeniz içerisine “sharepoint” isimli bir klasör oluşturun.

sharepoint klasörünü oluşturduktan sonra içerisine “assets” isimli yeni bir klasör oluşturun.

assets klasörü içerisine “elements.xml” dosyası oluşturunuz.

elements.xml dosyası oluşturulacak liste hakkında bilgileri içermektedir. Site columns, content types ve oluşturulduğunda içerisine ekleyeceğiniz dummy datalar gibi, aşağıdaki gibi güncelleyiniz.

<?xml version="1.0" encoding="utf-8"?> 
<Elements xmlns="http://schemas.microsoft.com/sharepoint/"> 
   
     <Field ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Type="Text" Name="Title" DisplayName="$Resources:core,Title;" Required="TRUE" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="Title" MaxLength="255" />
      <Field Name="ManagerID" ID="{cc01bddf-1b19-4214-861d-45aa39cb707b}" DisplayName="Manager" Type="Lookup" List="Lists/Employees" ShowField="Title" />
      <Field Name="PhotoUrl" ID="{6346c3e1-4866-4bc8-855a-cd74e3d1fb2a}" DisplayName="Photo URL" Type="Text" />
      <Field ID="{c4e0f350-52cc-4ede-904c-dd71a3d11f7d}" Name="JobTitle" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="JobTitle" Group="$Resources:core,Person_Event_Columns;" DisplayName="$Resources:core,Job_Title;" Type="Text" />
      <Field ID="{C814B2CF-84C6-4f56-B4A4-C766938A97C5}" Name="ol_Department" StaticName="ol_Department" SourceID="http://schemas.microsoft.com/sharepoint/v3" DisplayName="$Resources:core,Department_OL;" Group="$Resources:core,Person_Event_Columns;" Type="Text" Sealed="TRUE" AllowDeletion="TRUE" />
      <Field ID="{26169AB2-4BD2-4870-B077-10F49C8A5822}" Name="Office" StaticName="Office" SourceID="http://schemas.microsoft.com/sharepoint/v3" DisplayName="$Resources:core,Office_OL;" Group="$Resources:core,Person_Event_Columns;" Type="Text" Sealed="TRUE" AllowDeletion="TRUE" />
      <Field ID="{fd630629-c165-4513-b43c-fdb16b86a14d}" Name="WorkPhone" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="WorkPhone" Group="$Resources:core,Person_Event_Columns;" DisplayName="$Resources:core,Business_Phone;" Type="Text" IMEMode="inactive" />
      <Field ID="{fce16b4c-fe53-4793-aaab-b4892e736d15}" Name="EMail" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="EMail" Group="$Resources:core,Person_Event_Columns;" DisplayName="$Resources:core,E-Mail;" ReadOnly="FALSE" Type="Text" FromBaseType="TRUE" AllowDeletion="TRUE" />
  
      <ContentType ID="0x01008b18f3d769d4440f96e903ad1c086192" Name="EmployeeContentType" Group="Employee Content Types" Description="This is the Content Type for Employee Onboarding"> 
      <FieldRefs>
          <FieldRef ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Name="Title" />
          <FieldRef ID="{cc01bddf-1b19-4214-861d-45aa39cb707b}" Name="ManagerID" />
          <FieldRef ID="{6346c3e1-4866-4bc8-855a-cd74e3d1fb2a}" Name="PhotoUrl" />
          <FieldRef ID="{c4e0f350-52cc-4ede-904c-dd71a3d11f7d}" Name="JobTitle" />
          <FieldRef ID="{C814B2CF-84C6-4f56-B4A4-C766938A97C5}" Name="ol_Department" />
          <FieldRef ID="{26169AB2-4BD2-4870-B077-10F49C8A5822}" Name="Office" />
          <FieldRef ID="{fd630629-c165-4513-b43c-fdb16b86a14d}" Name="WorkPhone" />
          <FieldRef ID="{fce16b4c-fe53-4793-aaab-b4892e736d15}" Name="EMail" />
        </FieldRefs>
    </ContentType> 
    <ListInstance CustomSchema="schema.xml" FeatureId="00bfea71-de22-43b2-a848-c05709900100" Title="Employees" Description="Employees List" TemplateType="100" Url="Lists/Employees"> 
        <Data> 
<Rows> 
<Row> 
<Field Name="Title">Serdar Ketenci</Field> 
<Field Name="ManagerID"></Field> 
<Field Name="PhotoUrl"></Field> 
<Field Name="JobTitle">Tech Lead</Field> 
<Field Name="ol_Department">SharePoint</Field>
<Field Name="Office">YTU</Field>
<Field Name="WorkPhone">545 871 7767</Field>
<Field Name="EMail">[email protected]</Field> 
</Row> 
<Row> 
<Field Name="Title">Ahmet Örnekadam</Field> 
<Field Name="ManagerID">1</Field> 
<Field Name="PhotoUrl"></Field> 
<Field Name="JobTitle">Senior Developer</Field> 
<Field Name="ol_Department">SharePoint</Field>
<Field Name="Office">YTU</Field>
<Field Name="WorkPhone">545 777 7767</Field>
<Field Name="EMail">[email protected]</Field> 
</Row> 
<Row> 
<Field Name="Title">Yeliz Kurt</Field> 
<Field Name="ManagerID">1</Field> 
<Field Name="PhotoUrl"></Field> 
<Field Name="JobTitle">Senior Developer</Field> 
<Field Name="ol_Department">SharePoint</Field>
<Field Name="Office">YTU</Field>
<Field Name="WorkPhone">545 888 7767</Field>
<Field Name="EMail">[email protected]</Field> 
</Row> 
</Rows> 
</Data> </ListInstance> 
</Elements>

assets klasörü içerisine “schema.xml” dosyası oluşturun.

schema.xml dosyasını aşağıdaki gibi güncelleyiniz.

<List xmlns:ows="Microsoft SharePoint" Title="Employees" EnableContentTypes="TRUE" FolderCreation="FALSE" Direction="$Resources:Direction;" Url="Lists/Employees" BaseType="0" xmlns="http://schemas.microsoft.com/sharepoint/"> 
    <MetaData> 
        <ContentTypes> 
            <ContentTypeRef ID="0x01008b18f3d769d4440f96e903ad1c086192" /> </ContentTypes> 
        <Fields></Fields> 
        <Views> 
            <View BaseViewID="1" Type="HTML" WebPartZoneID="Main" DisplayName="$Resources:core,objectiv_schema_mwsidcamlidC24;" DefaultView="TRUE" MobileView="TRUE" MobileDefaultView="TRUE" SetupPath="pages\viewpage.aspx" ImageUrl="/_layouts/images/generic.png" Url="AllItems.aspx"> 
                <XslLink Default="TRUE">main.xsl</XslLink> 
                <JSLink>clienttemplates.js</JSLink> 
                <RowLimit Paged="TRUE">30</RowLimit> 
                <Toolbar Type="Standard" /> 
                <ViewFields> 
                    <FieldRef Name="LinkTitle"></FieldRef>
                    <FieldRef Name="ManagerID" />
                    <FieldRef Name="PhotoUrl" />
                    <FieldRef Name="JobTitle" />
                    <FieldRef Name="ol_Department" />
                    <FieldRef Name="Office" />
                    <FieldRef Name="WorkPhone" />
                    <FieldRef Name="EMail" />
                </ViewFields> 
                <Query> 
                    <OrderBy> 
                        <FieldRef Name="ID" /> </OrderBy> 
                </Query> 
            </View> 
        </Views> 
        <Forms> 
            <Form Type="DisplayForm" Url="DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" /> 
            <Form Type="EditForm" Url="EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" /> 
            <Form Type="NewForm" Url="NewForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" /> </Forms> 
    </MetaData> 
</List>

Gerekli assets lerimiz hazır, şimdi package içerisinde feature ile bağlayalım.

“config” klasörü içerisinde yer alan “package-solution.json” dosyasını açın.

“solution” içerisine aşağıdaki kodu ekleyiniz.

"features": [
      {
        "title": "provision-employees-list-client-side-solution",
        "description": "provision-employees-list-client-side-solution",
        "id": "ce98fa61-31a7-41de-98d9-90feb2c5dc96",
        "version": "1.0.0.0",
        "assets": {
          "elementManifests": [
            "elements.xml"
          ],
          "elementFiles": [
            "schema.xml"
          ]
        }
      }
    ],

Tüm yapmanız gereken bu kadar, app site içerisine install yapmanız durumunda liste otomatik olarak oluşuyor olacaktır.

Deployment işlemi ile ilgili makalelerime aşağıdan ulaşabilirsiniz.

İncelemeniz adına Github içerisine organization-chart uygulamasını ekledim.

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

Secure Store Creds Şifresini Bulma

0

SharePoint içerisinde external data source erişmeye çalıştığınızda güvenli olması adına creds bilgilerinizi Secure Store Service aracılığı ile yapmanızda fayda vardır. Tanımlamış olduğunuz bilgileri unutmanız durumunda aşağıdaki PowerShell komutunu çalıştırarak ilgili şifrenizi görüntüleyebilirsiniz.

Add-PSSnapin Microsoft.SharePoint.Powershell -ErrorAction SilentlyContinue

# Displays credentials for all target applications in the secure store service application in your farm.

$svcContext = Get-SPServiceContext -Site http://centraladminurl
$ssProvider = New-Object Microsoft.Office.SecureStoreService.Server.SecureStoreProvider
$ssProvider.Context = $svcContext

$ssProvider.GetTargetApplications() | ForEach-Object {
Write-Host "`n"($_.Name)
try {
$ssProvider.GetCredentials($_.ApplicationId) | ForEach-Object {
$ptr = [System.Runtime.InteropServices.Marshal]::SecureStringToBSTR($_.Credential)
$cred = [System.Runtime.InteropServices.Marshal]::PtrToStringBSTR($ptr)
Write-Host "`t$($_.CredentialType): $($cred)"
}
}
catch {
Write-Host "`t$($_)" -ForegroundColor Red
}
}

SharePoint PnP Provisioning Service Nedir?

0

SharePoint PnP Provisioning Service, tenant hesabınıza otomatik olarak seçmiş olduğunuz template / solution entegre etmenizi (oluşturmanızı) sağlamaktadır. Şimdi kurulum için neler yapmamız gerekiyor göz atalım.

İlk olarak https://provisioning.sharepointpnp.com/ adresine gidiniz.

Karşınıza sayfa üzerinde yer alan “Sign in” linkine tıklayınız.

Karşınıza gelen ekran üzerinde “Accept” butonuna basıp gerekli izinler için onay veriniz.

Onay verdikten sonra tekrardan siteye yönlendiriyor olacaksınız. Samples ya da Solution tab içerisinde yer alan (ihtiyacınıza göre) resimlerden seçimizi yapınız.

Tıkladığınızda seçmiş olduğunuz Template ya da Solution detayına yönlendiriyor olacaksınız. “Add to your tenant” butonuna tıklayınız.

Karşınıza gelen sayfa üzerinde “Accept” butonuna tıklayıp, gerekli izinleri onaylayınız.

Gerekli mail adresi, site title, site url bilgilerini girip, “Provision” butonuna tıklayınız.

“Confirm” butonuna tıklayınız.

5 dk içerisinde kurulumu yapıyor olacaktır.

Tüm yapmanız gereken bu kadar, çok heyecan verici ve güzel gelişme. Okuduğunuz için teşekkür ederim. 🙂

SharePoint Online için yeni SharePoint CSOM sürümü yayımlandı – Şubat 2019

0

Office 365 veya daha özel olarak SharePoint ve Project Online için hedeflenen yeni SharePoint İstemci Tarafı Nesne Modeli (CSOM) sürümü yayımlandı. CSOM API minimum güncellemelerle küçük bir bakım sürümüdür.

Project Online CSOM da dahil olmak üzere, SharePoint Online için en son CSOM paketini NuGet gallery ‘Microsoft.SharePointOnline.CSOM‘ ile bulabilirsiniz. Artık SharePoint Online CSOM için ayrı bir MSI yükleyicisini güncellenmediği için SDK’yı bilgisayarınıza indirmek yerine, en son sürüme erişmek için NuGet Paketini kullanarak erişebilirsiniz.

Yeni yayımlanan CSOM paketinin sürümü 16.1.8613.1200. NuGet’in önceki sürümleri kaldırılmamıştır, böylece mevcut çözümleriniz sorunsuz çalışmaya devam edecektir ve yeni sürümün ne zaman kullanılacağına karar verebilirsiniz. NuGet versiyonunun 16.1.8613.1200 e yükseltilmesine rağmen, yayınlanan versiyonunun 16.1.0.0 olduğuna dikkat etmeniz önerilmektedir. Sürümünü, NuGet sürümüyle aynı olan Dosya Sürümü özniteliğinden de kontrol edebilmektesiniz.

SharePoint Online Management Shell, bu CSOM sürümüyle API perspektifinden 2 yeni cmdlet ile eşleşecek şekilde güncellenmiştir.

Microsoft.SharePoint.Client

  • public enum Microsoft.SharePoint.Administration.DesignPackageType
  • public method Microsoft.SharePoint.Client.Site.CreateSPAsyncReadJob
  • public property Microsoft.SharePoint.Client.User.UserPrincipalName
  • public method Microsoft.SharePoint.Client.Web.PageContextCore

Microsoft.Online.SharePoint.Client.Tenant

  • public property Microsoft.Online.SharePoint.TenantAdministration.Tenant.AllowGuestUserShareToUsersNotInSiteCollection
  • public method Microsoft.Online.SharePoint.TenantAdministration.Tenant.GetHiddenBuiltInDesignPackages
  • public method Microsoft.Online.SharePoint.TenantAdministration.Tenant.SetBuiltInDesignPackageVisibility
  • public property Microsoft.Online.SharePoint.TenantManagement.Office365Tenant.AllowGuestUserShareToUsersNotInSiteCollection

Yeni cmdlets – SharePoint Online Management Shell

  • Get-SPOBuiltDesignPackageVisibility
  • Set-SPOBuiltDesignPackageVisibility