Forum Discussion

Jake_Hembree's avatar
Jake_Hembree
Brass Contributor
May 10, 2023

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

 

 

  • 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
    • Jake_Hembree's avatar
      Jake_Hembree
      Brass Contributor

      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's avatar
        Deleted

        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

Resources