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

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 type	Column formatting	Field Customizer
Öğe değerlerine ve değer aralıklarına göre koşullu biçimlendirme	Destekler	Destekler
Action links	Sadece statik hyperlinks destekler	Destekler
Veri görselleştirmeleri	HTML ve CSS ile yapılabilir	Thirth 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-customFormatBackground	Background 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. 🙂