Collab365

SharePoint modern view formatting with JSON – part 1 of 2

Q: What are the two paths to format a SharePoint view with JSON?

1. additionalRowClass for styling specific columns based on rules. 2. rowFormatter to completely rebuild row layouts; overrides additionalRowClass.

Q: How do you start writing JSON for SharePoint view formatting?

Use VS Code with Microsoft schema for Intellisense. Add $schema, hideSelection, hideColumnHeader, and rowFormatter with div elmType and children array.

Q: How do you apply JSON formatting to a SharePoint list view?

Click view dropdown > Format current view > Paste JSON > Save. Results in custom layout like grey boxes for further styling.

C

Collab365 TeamAuthorPublished Apr 2, 2019

1,903

At a Glance

Target Audience: SharePoint Admins, List Designers, M365 Developers
Problem Solved: Boring default SharePoint list views lacking custom design without heavy coding or governance risks
Use Case: Customizing lists into responsive card layouts like venue directories or product catalogs

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. <h3 id="the-hard-truth-about-json">The Hard Truth About JSON</h3>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. <pre><code class="hljs language-json">{ "Name" : "Alice", "Department" : "Accounts", "PermissionLevel" : "Edit", "hideSelection" : true } </code></pre>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. <h3 id="two-paths-to-format-a-view">Two Paths to Format a View</h3>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, <code>rowFormatter</code> overrides <code>additionalRowClass</code>. We are using <code>rowFormatter</code> to build our custom list view. We also want to clean up the user interface. We will set <code>hideSelection</code> to true so users cannot click the raw list item, and <code>hideColumnHeader</code> to true to remove the default table headers. <h3 id="planning-the-data-structure">Planning the Data Structure</h3>First, build your list. Create a custom SharePoint list with these exact columns: <ul> <li>Title (single line of text)</li> <li>Address (single line of text)</li> <li>Rating (choice)</li> <li>Maximum capacity (number)</li> <li>Venue link (hyperlink)</li> <li>Price (currency)</li> <li>Picture (picture)</li> </ul> Fill it with dummy data. <h3 id="writing-the-json">Writing the JSON</h3>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. <pre><code class="hljs language-json">{ "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json" } </code></pre>Without the schema, you are flying blind. With it, you press Ctrl+Space and get instant suggestions. Add your UI rules and open the <code>rowFormatter</code>. <pre><code class="hljs language-json">{ "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", "hideSelection": true, "hideColumnHeader": true, "rowFormatter": { } } </code></pre>Hit Ctrl+Space inside the <code>rowFormatter</code> brackets. You will see your element options. You have seven element types to choose from. You can choose <code>div</code> for containers, <code>span</code> for text, <code>a</code> for hyperlinks, <code>button</code> for clickable actions, <code>img</code> for pictures, or <code>svg</code> and <code>path</code> for graphics. We are starting with a <code>div</code>. JSON does not support standard inline comments. That gets messy fast when you build complex layouts. The workaround is creating a dummy property like <code>"_comment_": "MAIN DIV"</code>. 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 <code>children</code> array. Notice the square brackets. <pre><code class="hljs language-json">{ "$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": {} } ] } } </code></pre><h3 id="styling-the-structure">Styling the Structure</h3>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 <code>ms-bgColor-neutralTertiaryAlt</code> ensures your design natively matches the site theme. <pre><code class="hljs language-json">{ "$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" } } ] } } </code></pre><h3 id="applying-the-code">Applying the Code</h3><ol> <li>Click on the view dropdown in SharePoint.</li> <li>Select Format current view.</li> <li>Paste the JSON in.</li> <li>Click save.</li> </ol> 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.