Forum Discussion

florianwpunkt's avatar
florianwpunkt
Copper Contributor
Feb 22, 2023
Solved

SharePoint List JSON Formatting group header

Hello everybody, currently I am struggling with JSON formatting, when a list is grouped by a row.

This is the formatted list without grouping:

And this is the same list with grouping:

Any idea on how i can make the grouping not be treated as an item?

Thanks in advance 🙂

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "height": 300,
  "width": 400,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "padding": "0px",
      "align-items": "flex-start",
      "justify-content": "flex-start",
      "align-content": "flex-start",
      "float": "left",
      "position": "relative",
      "vertical-align": "top",
      "background-color": "white",
      "margin": "5px",
      "border-radius": "5px",
      "border-width": "3px",
      "box-shadow": "#00000088 0 2px 4px 0"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "200px",
          "display": "flex",
          "flex-direction": "row",
          "flex-wrap": "nowrap",
          "justify-content": "flex-start",
          "align-items": "flex-start",
          "align-content": "flex-start",
          "margin-top": "5px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "block",
              "flex-grow": "0",
              "flex-shrink": "1",
              "flex-basis": "auto",
              "align-self": "auto",
              "order": "0",
              "font-weight": "bold",
              "font-size": "18px",
              "width": "80%",
              "margin-left": "2px"
            },
            "txtContent": "[$Title]"
          },
          
          {
              "elmType": "div",
              "style": {
                "display": "block",
                "flex-grow": "0",
                "flex-shrink": "1",
                "flex-basis": "auto",
                "align-self": "auto",
                "order": "0",
                "align-items": "center",
                "width": "20%"
              },
              "children": [
          {
            "elmType": "div",
            "style": {
              "color": "#666666",
              "text-align": "center"
            },
            "txtContent": "[$size]"
          },
          {
              "elmType": "div",
              "style": {
                  "color": "#666666",
                  "display": "inline-block",
                  "flex-grow": "0",
                  "flex-shrink": "1",
                  "flex-basis": "auto",
                  "align-self": "auto",
                  "order": "0",
                  "margin-left": "35%"
                },
              "attributes": {
                "iconName": "=if([$access] == 'Code', 'Dialpad', 'Lock')"
              }
            },
            {
              "elmType": "div",
              "style": {
                "color": "#666666",
                "text-align": "center"
              },
              "txtContent": "[$location]"
            }
          ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "=if([$annotation] == '', '', 'flex')",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "justify-content": "flex-start",
          "align-items": "center",
          "align-content": "flex-start",
          "width": "100%",
          "height": "28px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "block",
              "flex-grow": "0",
              "flex-shrink": "1",
              "flex-basis": "100%",
              "align-self": "auto",
              "order": "0",
              "color": "black",
              "font-size": "12px",
              "background-color": "#f3f2f1",
              "width": "100%",
              "text-align": "center",
              "border-radius": ""
            },
            "txtContent": "=[$annotation]"
            }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "200px",
          "height": "80px",
          "background-size": "cover",
          "text-align":"center",
          "background-repeat": "no-repeat",
          "background-position": "center",
          "margin-top": "",
          "box-shadow": "#00000022 0px 2px 4px 0px"
        },
        "attributes": {
          "class": "ms-bgColor-neutralLighter"
        },
        "children": [
          {
            "elmType": "img",
            "style": {
              "position": "relative",
              "height": "100%",
              "overflow": "hidden"
            },
            "attributes": {
              "src": "=[$picture]",
              "target": "_blank"
            }
          }
        ]
      },
      {
          "elmType": "div",
          "style": {
            "display": "flex",
            "flex-direction": "row",
            "flex-wrap": "nowrap",
            "justify-content": "flex-start",
            "align-items": "flex-start",
            "align-content": "normal",
            "margin-top": "4px",
            "margin-bottom": "2px",
            "margin-left": "2px"
          },
          "children": [
          {
            "elmType": "img",
            "style": {
              "display": "block",
              "flex-grow": "0",
              "flex-shrink": "1",
              "flex-basis": "auto",
              "align-self": "auto",
              "order": "0",
              "margin-right": "5px",
              "max-height": "48px",
              "border-radius": "50%",
              "box-shadow": "#00000022 0px 4px 4px 0px"
            },
            "attributes": {
              "src": "='/_layouts/15/userphoto.aspx?size=S&accountname='+[$owner.email]"
            }
          },
          {
          "elmType": "div",
          "style": {
            "display": "block",
            "flex-grow": "0",
            "flex-shrink": "1",
            "flex-basis": "auto",
            "align-self": "center",
            "order": "0",
            "color": "#666666",
            "font-size": "14px"
          },
          "txtContent": "[$owner.title]"
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "row",
          "flex-wrap": "nowrap",
          "justify-content": "center",
          "align-items": "stretch",
          "align-content": "stretch",
          "width": "100%",
          "height": "32px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "block",
              "flex-grow": "0",
              "flex-shrink": "1",
              "flex-basis": "100%",
              "align-self": "auto",
              "order": "0",
              "color": "#fff",
              "font-size": "14px",
              "background-color": "=if([$state] == 'Frei', '#28a745', '#dc3545')",
              "width": "100%",
              "text-align": "center",
              
          "border-radius": "0px 0px 5px 5px"
            },
            "txtContent": "=if([$state] == 'Gebucht', [$occupancyDuration] + ' - ' + [$state], [$state])"
            }
        ]
      }
    ]
  }
}
  • I fixed it.
    Instead of using the list view I went with the gallery view.
    I changed rowFormatter to formatter, float = "center" and gave the gallery item a fixed height and width property.

1 Reply

  • florianwpunkt's avatar
    florianwpunkt
    Copper Contributor

    I fixed it.
    Instead of using the list view I went with the gallery view.
    I changed rowFormatter to formatter, float = "center" and gave the gallery item a fixed height and width property.

Resources