Formatting knowledge, shared

List of Column Formatting Samples

Browse all current column formatting samples in the gallery.

Status Column Badges

Missing Information Callout

Version Status and Approval Flow Button

Publishing Status

Open Office Documents in View Mode

Instant Flow Trigger with HTML Response via Embed Action

Country Flag

Image with Overlay Buttons

Quick Charts

Bar Chart Column Formatter

Pie Chart Column Formatter

Traffic Light Style Column Formatting

File Preview Callout with the embed Action

Page-a-day Calendar

Gamification Badges

Per 100 People Grid

Dynamic Colored Pills

Display Comma-Separated Text as Tags

Bubble Chart Column Formatting

Word Cloud Column Formatting

Identicon Column Formatting

People Name Avatar Card

Days Counter

Yearly Gantt Chart

Row Actions

Incident Action Buttons

Managed Metadata Values to Buttons

Doughnut Chart

Context Menu

Monthly Gantt Chart

Changing Image Hyperlink Standard Behavior

Work Progress Category Pill

Format a row as a card with buttons

Format a column with multi-path SVGs

Published Version

Custom Approver Hover Card

Display URLs in Hyperlink Column

World Current Time

Displaying embedded content using the embed action

Assign to Me

Quick-View Issue Card

Task Matrix

Compressed Date

Call phone number with Microsoft Teams

Blurred Field Value

Highlight non-empty folder

Multiple thumbnail

Download Image from SharePoint Image column

Set Date to Today's Date (Date Only)

Demote News to Site Page

Linear Gauge

Custom Hover Card (Column)

Generic Super Type

Yes/No Checkbox

Image Lightbox

Custom Share to Teams

Gantt Chart

Person Hover Card

Text StartsWith Calling Codes

Teams Message Format

Display Tags

Multiple Choice Country Flags

Share to teams

Multi-lookup fields and projected fields

Multi-Person inline edit pill

Multi person favorite

Color Circles

Approval Status Icons and Colors

Star Icons

Item Version History

Display Link to Google Maps

Multi-Choice Links

World Time

Change color based on Item Child Count

Date Notation

File Preview

Multiple hyperlinks in single field

Hyperlink long addresses

Link to Parent Documentset

Bulleted and Numbered List

Display icons by repeating

Managed Metadata Tag Icon

Download File Button

Display QR Code

0 to 10 Rating Scale

Open File as PDF

Star Rating

File Picker

Location Bing Maps

One Point Chart

Display Hourglass

Number Level Bar

Number Localization

Course Registration

Person Localization

Generic Gauge

Flow Status

Number Gradation

Field Value Update Button

Like/Dislike Bar

Decimal to Binary Conversion

Calculator

Volume option

Heart in Heart

Heart Shading

Progress bar using text or emoji

Expand Collapse Format

Teams Call Format

Multi-Person Mail To Link

Count the Number of Clicks on a Link

Yes/No Icon Color

Date Update Format

Rounded Fill Checkbox

Like / Dislike - Unique reaction

Like/Unlike List Item

Display Count Up and Count Down Buttons

Reacting and displaying users who have reacted

Yes/No Column Toggle

Inline Approval

Shaded Backgrounds

Number Circle in Circle

Red-Amber-Green (RAG) Bars Based on Date Ranges

Liked By Users

Monthly Emoji

Display Location Weather Details

Launch Power App Button

MailTo Button

Timeline Format

Number Battery

Comment Count

Approval Status Hover Card

Right-Aligned Content

YouTube Thumbnail

Scheduling Dialog Links to MS Teams and Outlook

Display Comment Count

Time Schedule

Inline Column Chart

Social Media Profile Pics

Issue Status Pill

Formatting a column when a date column is blank

Multi-line Text with Word Wrap

Row Index Drawing

Substring Status

Multi-Person Teams Chat Link

Multi-Person Facepile

Icon Overlays

Date Difference

Display Location Address Details

Number Gauge

Color Based Emojis

File Thumbnails

Data Bar

Multi-Colored Databars

File Thumbnails or Hyperlinks

Multi-Choice forEach

Conditionally Launch Flow for Item

Tolerance Comparison

Icon Progress Bar

Highlight the Current User (Using a Multi-Person Column)

Multi-Choice Icons

Text Contains

Display a Bing Maps Image for a Location

Centered Content

Concatenate Currency Symbol

Conditional Progress Color

Conditional Text Formatting (Severity)

Display a Google Maps Image for a Location

Display a Person's Profile Picture in a Circle

Display a Picture Column in a Circle

Dynamic Links

ISBN to Book Cover Image

Minimum Value Highlight

Pie Chart

Project Indicator Formats

Show trending up/trending down icons

SVG icons

Traffic Light (Red-Yellow-Green) Status Indicator

Twitter Profile Pics

Yes/No Checkmark

Yes/No Column Check Mark

Highlight the Current User

Launch a Flow for a Selected Item

Person Mail To Link

Quiz Results with Emoji

Strikethrough on Completion

Overdue Date

Linking to a Local Resource

Reference a Local Image