Gallery view formatting to group in columns

I'd like to know if their is a trick or JSON view formatting I can change so I can group all the items on a list in gallery view are grouped vertically by a certain list value (in this case the regio...

column

Gallery view

json

SharePoint Online

Jake_Hembree

Brass Contributor

May 11, 2023

Deleted

Thanks for your response! I went through the steps you mentioned and I wasn't able to get it to work. When I grouped them by region, it worked, but from left to right, from the top row down. When I added the JSON, it never modified anything else in the view.

Any thoughts?

Deleted

May 11, 2023

Ok, I understand that you were trying to build a Kanban View, please check below JSON formating as example:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "sp-field-quickActions"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-wrap": "wrap"
      },
      "attributes": {
        "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "padding": "10px",
            "width": "calc(25% - 10px)",
            "border": "1px solid #ccc",
            "border-radius": "5px",
            "margin": "5px",
            "display": "flex",
            "flex-direction": "column"
          },
          "foreach": "groupBy([$Regions], 'displayText')",
          "children": [
            {
              "elmType": "div",
              "style": {
                "font-weight": "bold",
                "padding-bottom": "5px"
              },
              "txtContent": "[$groupKey]"
            },
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-direction": "column"
              },
              "foreach": "[$group]",
              "children": [
                {
                  "elmType": "div",
                  "style": {
                    "padding-bottom": "5px"
                  },
                  "txtContent": "[$[$groupKey].value]"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

If I have answered your question, please mark your post as Solved

If you like my response, please give it a like

TM_Betico
Copper Contributor
Aug 15, 2024
Do you know of a way that this can work in an X/Y axis? For example if you are looking to create a status board for issues where you organise rows by Site, and Columns by Area??

Forum Discussion

Gallery view formatting to group in columns

Resources