SharePoint modern view formatting with JSON – part 1 of 2

Stop settling for boring SharePoint lists. Most teams accept the default grid view because they think custom design requires heavy coding or breaks governance policies. It doesn't. You can completely redesign your lists using out-of-the-box JSON formatting.

By the end of this two-part guide, we are going to take this standard list...

And turn it into this responsive set of venue cards.

The Hard Truth About JSON

You don't need to be a full-stack developer to build this. You just need to sit down and learn the basic structure. JSON writes data in simple name/value pairs inside curly brackets.

{   
    "Name" : "Alice",
    "Department" : "Accounts",
    "PermissionLevel" : "Edit",
    "hideSelection" : true
}

If you have never touched it before, spend ten minutes with the JSON Syntax - W3 School guide or this JSON Tutorial: Learn JSON in 10 Minutes. You will also need a basic grasp of HTML - w3schools and CSS - w3schools to style the elements. It is not sexy work. It is just consistency.

Two Paths to Format a View

When you format a view using JSON, you have two choices.

1. additionalRowClass
Use this when you only care about styling specific columns based on rules. Think highlighting a past-due date in red or forcing all profile pictures to be exactly 200px wide.

2. rowFormatter
Use this to completely rebuild the row layout. This creates a custom element for every single list item. If you use both methods together, rowFormatter overrides additionalRowClass. We are using rowFormatter to build our custom list view.

We also want to clean up the user interface. We will set hideSelection to true so users cannot click the raw list item, and hideColumnHeader to true to remove the default table headers.

Planning the Data Structure

First, build your list. Create a custom SharePoint list with these exact columns:

• Title (single line of text)
• Address (single line of text)
• Rating (choice)
• Maximum capacity (number)
• Venue link (hyperlink)
• Price (currency)
• Picture (picture)

Fill it with dummy data.

Writing the JSON

We need a container. We will use a main div (division) that holds three nested child divs. Those child elements will eventually hold our list values.

Download Visual Studio Code. It makes this process painless. Create a new file and save it as a JSON file.

Start with the Microsoft schema. This gives you Intellisense autocomplete.

{    
    "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json"
}

Without the schema, you are flying blind.

With it, you press Ctrl+Space and get instant suggestions.

Add your UI rules and open the rowFormatter.

{    
   "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",    
   "hideSelection": true,    
   "hideColumnHeader": true,   
   "rowFormatter": {

                   }
}

Hit Ctrl+Space inside the rowFormatter brackets. You will see your element options.

You have seven element types to choose from.

You can choose div for containers, span for text, a for hyperlinks, button for clickable actions, img for pictures, or svg and path for graphics. We are starting with a div.

JSON does not support standard inline comments. That gets messy fast when you build complex layouts. The workaround is creating a dummy property like "_comment_": "MAIN DIV". VS Code will flag it as an error, but SharePoint ignores it completely.

Now we add the three child columns inside the main div.

You nest elements using the children array. Notice the square brackets.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "_comment_": "MAIN DIV",
    "style": {},
    "attributes": {},
    "children": [
      {
        "elmType": "div",
        "_comment_": "DIV ONE",
        "style": {}
      },
      {
        "elmType": "div",
        "_comment_": "DIV TWO",
        "style": {}
      },
      {
        "elmType": "div",
        "_comment_": "DIV THREE",
        "style": {}
      }
    ]
  }
}

Styling the Structure

If you apply the code right now, your list will just go blank. It has structure but no style. You don't need to write CSS from scratch. Use a flexbox generator to build the layout visually. I used flexbox's properties to style each div and ensure the cards are responsive for mobile viewing. Just copy the generated CSS into your style attributes.

To make the cards pop, we need a background color. Instead of hardcoding hex values, use Microsoft SharePoint theme colours. Adding a class like ms-bgColor-neutralTertiaryAlt ensures your design natively matches the site theme.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "_comment_": "MAIN DIV",
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "flex-direction": "row",
      "padding": "20px",
      "margin-bottom": "16px",
      "max-width": "930px",
      "border-radius": "8px"
    },
    "attributes": {
      "class": "ms-bgColor-neutralTertiaryAlt"
    },
    "children": [
      {
        "elmType": "div",
        "_comment_": "DIV ONE",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "stretch",
          "max-width": "260px"
        }
      },
      {
        "elmType": "div",
        "_comment_": "DIV TWO",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "center",
          "max-width": "310px",
          "min-width": "205px",
          "margin-top": "8px"
        }
      },
      {
        "elmType": "div",
        "_comment_": "DIV THREE",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center",
          "max-width": "310px",
          "min-width": "155px"
        }
      }
    ]
  }
}

Applying the Code

1. Click on the view dropdown in SharePoint.
2. Select Format current view.
3. Paste the JSON in.
4. Click save.

You will now see a stack of grey boxes. That is your main div layout working perfectly.

That is the foundation. We built the structure and styled the layout. In part 2, we will map the actual list data into these child divs to finish the cards.