10 SharePoint List View Formatting JSON Examples: Transform Your Data Displays With Pro Code Snippets

Drowning in task lists where critical items get buried under completed or low-priority work? This Highlighted Priority Tasks List View uses JSON conditional formatting to instantly flag urgent tasks in bold red, medium-priority items in yellow, and completed tasks in green—all without adding extra columns.

The magic happens with a simple JSON snippet that reads your Priority or Status column and applies dynamic styling. For example, tasks marked "Urgent" trigger a red background with white text, while "Medium" gets a yellow highlight. You can even adjust the intensity or add tooltips for extra clarity. Best of all, it works in SharePoint Online and syncs across devices—no PowerShell or complex setup required.

Perfect for project managers, Agile teams, or anyone juggling multiple deadlines, this formatting turns chaotic lists into scan-friendly dashboards where priorities stand out at a glance. 🌟

Tired of manually calculating task completion percentages in SharePoint? This progress bar JSON snippet dynamically displays completion status as a 0-100% visual bar—no extra columns or calculations needed. Perfect for tracking project milestones, employee workloads, or sprint progress without the hassle of spreadsheets.

The magic happens with the \"$ProgressBar\" property, which reads your existing percentage-complete field and renders a sleek horizontal bar. You can customize colors (e.g., blue for 50%, green for 100%) and even add tooltips showing exact values. Works seamlessly in SharePoint Online and supports responsive design for mobile views.

Ideal for project managers tracking Agile sprints or HR teams monitoring onboarding progress, this formatting turns static lists into interactive dashboards with just a few lines of JSON. 💪

Missed deadlines cost time and money—especially in sales or support roles where every minute counts. This SharePoint JSON conditional formatting example automatically highlights overdue items in bold red and upcoming deadlines in warm orange, ensuring critical tasks never slip through the cracks.

Using date comparison logic, the JSON targets two key fields: [Deadline] (today’s date) and [Status]. Overdue tasks trigger a red background with white text, while items due within 7 days show in orange. The code snippet also includes a subtle underline for past-due items to enhance visibility without clutter. Best of all, it works with SharePoint Online and requires zero PowerShell—just paste and apply.

Perfect for customer support teams tracking SLAs or sales teams managing follow-ups, this formatting turns passive lists into actionable dashboards at a glance. ⚡

Tired of finance teams drowning in endless expense lists? Collapsible Expense Categories in SharePoint JSON formatting lets you organize expenses by category (e.g., "Travel," "Office Supplies") with expandable sections—so only relevant details appear at first glance.

Using the $onInit and $onRender functions, you can group items by a category column and add plus/minus icons for intuitive navigation. The JSON structure dynamically collapses sub-items, reducing visual clutter while keeping all data accessible. For example, a single click expands all "Travel" expenses while hiding others, saving time during budget reviews.

This solution is perfect for accounting teams, finance managers, or small business owners juggling multiple expense categories. With minimal setup, you’ll turn chaotic lists into a clean, interactive dashboard. ✨

Tired of clicking through attachments to preview documents? This JSON snippet embeds live thumbnails of PDFs, images, and other files directly in your SharePoint list—no extra clicks needed. Creative teams reviewing designs or HR departments managing employee photos will love this visual shortcut.

The magic happens with the "$Attachments" property, which dynamically generates a thumbnail preview (up to 100x100px) for each file. You can customize the layout to show one or multiple thumbnails per row, and even add tooltips for file details. Works seamlessly with SharePoint Online and modern experiences.

Perfect for marketing teams approving assets or recruiters reviewing candidate photos—turns file attachments into an intuitive, visual workflow. ✨

Tired of scanning endless text statuses like "Approved," "Pending," or "Rejected" in SharePoint lists? A color-coded status dashboard replaces these labels with intuitive green/yellow/red circles—cutting decision time by 40% for busy teams.

Using SharePoint’s JSON formatting, you can map status values to icon-based visuals (e.g., 🟢 for "Approved," 🟡 for "Pending," 🔴 for "Rejected") with just a few lines of code. The zero-config setup works across mobile and desktop, and you can even customize sizes and tooltips for extra clarity. For executives or client-facing portals, this eliminates ambiguity and speeds up approval workflows.

Perfect for HR onboarding portals, client project trackers, or internal approval dashboards where visual cues matter more than text. 💡

Tired of staring at raw numbers in your SharePoint lists? Data bar visualization turns those numbers into intuitive, proportional bars—like a mini dashboard for every row. This JSON trick is a game-changer for sales teams tracking quotas or marketers analyzing survey results, instantly revealing trends without complex charts.

With just a few lines of JSON, you can display metrics like sales figures or customer satisfaction scores as horizontal bars that fill proportionally (e.g., 75% filled for high values). The bars can even use a gradient color scheme (red for low, green for high) for instant visual impact. Best of all, it works with any numeric column—no extra fields or calculations needed.

Perfect for executive summaries or team dashboards where quick comparisons matter. Just paste the JSON into your list’s formatting pane, and watch your data pop to life—no Power BI required. ✨

Tired of seeing the same default icons cluttering your SharePoint lists? Custom icons for task types let you replace generic symbols with context-specific visuals—like an envelope for emails, a chart for reports, or a clock for deadlines.

Using JSON, you can map task categories to unique icons directly in the list view. For example, set "iconName": "Email" for communication tasks or "iconName": "Document" for reports. This isn’t just about looks—it reduces cognitive load by instantly signaling task type at a glance, cutting through ambiguity in mixed workflows.

Perfect for customer support teams managing tickets, marketing teams tracking campaigns, or IT help desks categorizing requests. With just a few lines of JSON, you turn a generic list into a self-documenting dashboard. ✨

Struggling to keep multi-phase projects on track? A Grouped Timeline View in SharePoint organizes tasks by custom periods—like Q1 2024 or Phase 2 Development—with collapsible sections for effortless navigation.

This JSON-powered view uses the $group operator to sort tasks by a date field or custom category, then applies expandable headers with icons. You can even nest sub-tasks under each timeline group, making it perfect for Agile sprints or quarterly planning. The clean hierarchy eliminates the chaos of scrolling through hundreds of tasks.

Project managers and team leads will love this for client presentations or internal standups, where visual timelines replace confusing spreadsheets. ✨

Struggling to fit detailed instructions or notes into your SharePoint lists without cluttering the view? Tooltips solve this by revealing extended descriptions on hover—keeping your list clean while adding critical context.

With just a few lines of JSON, you can display custom tooltips for any column. For example, add a tooltip to a "Status" column that explains approval workflows or includes troubleshooting steps. The formatting supports HTML formatting inside tooltips, so you can bold key terms or even embed links. SharePoint Online and on-premises both support this feature, making it versatile for any environment.

Support teams will love this for FAQs or troubleshooting guides, while internal wikis benefit from hiding detailed procedures until needed. No more scrolling through endless text—just hover for clarity. ✨