SharePoint View Özelleştirme (View Formatting)

0 48

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

Bunları da beğenebilirsin Yazarın diğer kitapları

Themetf