Gallery view formatting to group in columns

[Jake_Hembree]

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 region which is a choice field).

The image I attached helps explain what I mean. I like the exact card width used because 6 options across works perfectly actually. 

[#2]

@Jake_Hembree 

Yes, you can use JSON formatting to group items in a SharePoint Online list by a certain field value. Here is an example of how to do this:

1. Go to your SharePoint Online list and click on "Quick Edit" to switch to edit mode.

2. Click on the "Group By" dropdown menu and select the field you want to group by (in this case, the "Region" field).

3. Click on "Stop" to exit edit mode.

4. Click on "Return to classic SharePoint" at the bottom of the page to switch to classic view.

5. Click on the "Gear" icon and select "List Settings".

6. Scroll down to the "Views" section and click on the view you want to edit.

7. Click on the "Format View" dropdown menu and select "Edit".

8. In the JSON formatting panel, add the following code to group items by the "Region" field:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"groupProps": {
"headerFormatter": {
"elmType": "div",
"txtContent": "@currentField"
},
"footerFormatter": {
"elmType": "div",
"style": {
"display": "none"
}
},
"groupByFields": [
"Region"
]
}
}

9. Click on "Preview" to see the changes.

This code will group items by the "Region" field and display a header for each group. You can customize the formatting as needed to fit your specific needs.

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

If you like my response, please give it a like

[#3]

@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?

[#4]

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