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