SharePoint List Formatting enables users to customize the display of fields and views in Microsoft Lists, SharePoint lists, and libraries without altering the underlying data. It involves creating JSON objects that define the elements to be displayed for a field or view, along with applied styles. This feature enhances user experience by making information more scannable, applying visual hierarchies, and tailoring layouts to specific content types, such as Kanban boards for tasks or galleries for images.

List Formatting is available in SharePoint Online, Microsoft 365, and SharePoint Server editions, with similar capabilities for lists and libraries, though some views like Board View are list-exclusive. It replaces older, less flexible formatting methods and promotes adoption through modern, appealing interfaces.A SharePoint list functions as a structured data collection, akin to a table or spreadsheet, capable of holding diverse data types including text, numbers, dates, choices, people, lookups, and images.

Formatting does not modify stored data but only affects how it appears in views and forms.

Key Concepts

List Formatting is divided into three main areas: Column Formatting for individual fields, View Formatting for entire list or library displays, and Form Formatting for new/edit forms. Each uses JSON to describe elements (e.g., div, span, a, img) and styles, with support for expressions, conditional logic, and predefined classes/icons from Fluent UI. JSON schemas ensure validation, and tools like Monaco Editor provide autocomplete and previews.

Expressions allow dynamic content using tokens like @currentField (current field value), [$FieldName] (other fields), @now (current time), and operators for arithmetic, comparisons, and conditionals (e.g., =if(condition, true, false)).

Multi-value fields support looping with forEach and functions like join, length.

Column Formatting

Column Formatting customizes how a single field appears in list views, using JSON to apply styles, icons, data visualizations, and actions based on values.

It supports pre-configured formats (e.g., choice pills) and custom enhancements like profile photos, overdue indicators, or workflow buttons.

Creating Column Formatting

1. Select the column header > Column settings > Format this column.

2. Paste JSON in the editor; use schema "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json" for modern versions.

3. Preview and apply.

JSON Structure
Basic structure includes elmType (e.g., "div"), txtContent, attributes (e.g., "class", "iconName"), style, and children for nesting.

Predefined classes like sp-field-severity--good (green) or sp-field-dataBars enable quick styling.

Examples

• Conditional Severity: Applies colors/icons based on status (e.g., "Done" green with checkmark).

• Data Bars: Visualizes numbers as bars (e.g., width based on value).

• Action Links: "mailto:" for emailing people fields.

• Multi-Value: Joins lookups into a sentence.

  
  

Limitations: No custom scripts, unsupported for rich text or filenames.

View Formatting

View Formatting styles the entire list or library view, building on custom views with layouts like Gallery, List, Compact, or Board.

It enables advanced layouts such as accordions, Gantt charts, timelines, or personalized views with conditional logic.

Also formats groupings, command bars, and action bars.

Creating View Formatting

1. View dropdown > Format current view.

2. Select layout (e.g., Gallery) and paste JSON with rowFormatter, additionalRowClass, or formatter.

3. Use Card Designer for no-code Gallery tweaks.

   
   

JSON Structure

Similar to columns but uses rowFormatter for rows or formatter for Gallery/Board.

Supports HTML/CSS conversion via helpers.Examples include Kanban boards, hover cards, or conditional row classes.

Supported only in SharePoint Online.

Form Formatting

Form Formatting customizes new/edit/display forms with headers, footers, and body sections.

It supports conditional visibility, grouping fields, and read-only settings.

Creating Form Formatting

1. Open an item > Edit Form > Configure layout.

2. Select Header/Body/Footer and paste JSON.

3. Preview and save.

JSON Structure

• Header/Footer: Divs with icons, dynamic text, links (e.g., href: 'https://example?email=' + [$Email]).

• Body: Array of sections with displayname and fields (display names).

  
  

  Use fieldsettings for read-only: { "name": "fieldName", "readonly": true }.

  
  

Examples: Dynamic headers with icons, sectioned bodies for details/applications, read-only AI-generated fields.

Limitations: Multi-column only; fields in one section; read-only hidden in new forms.

Samples and Resources

The PnP List Formatting repository offers ready-to-use JSON samples for columns (e.g., visualizations, actions) and views (e.g., layouts, charts). Categories include column-samples and view-samples; contribute via GitHub. Official docs and community articles provide guides and videos.

Best Practices

• Start with columns for low-impact changes; maintain consistency across similar lists.

• Use conditional logic for personalization (e.g., show fields to specific users).

• Visualize data with icons/charts; integrate workflows via buttons.

• Avoid UI inconsistencies; test in previews.

• Leverage no-code tools like Card Designer before custom JSON.

  
  

By utilizing List Formatting, organizations can create intuitive, efficient interfaces that boost productivity and data usability in SharePoint environments.