Vesa Juvonen

These formats apply background-color and border-top styles to create a data bar visualization of @currentField, which is a number field. These styles are applied using the special column formatting class sp-field-dataBars. The bars are sized differently for different values based on the way the width attribute of the main div is set.

This example shows how to turn a text field that contains stock ticker symbols into a hyperlink that targets the Yahoo Finance real-time quotes page for that stock ticker. The example uses a + operator that appends the current field value to the static hyperlink http://finance.yahoo.com/quote/. You can extend this pattern to any scenario in which you want users to view contextual information related to an item, or you want to start a business process on the current item, as long as the information or process can be accessed via a hyperlink parameterized with values from the list item.

This example uses the conditional operator ? to apply a class (sp-field-severity--warning) to the parent div element when the value in the current field is less than or equal to 70. This causes the field to be highlighted when the value is less than or equal to 70, and appear normally if it's greater than 70.

A SharePoint Copilot App (SPFx 1.24 Copilot Component) that renders a personal 'My Day' cockpit inside the Microsoft 365 Copilot canvas — a compact inline card that expands to a full-screen dashboard with agenda, tasks, mail, news, a 'Plan my day' briefing and session-persisted settings.

This example colors the current field red when the value inside an item's DueDate is before the current date/time. Unlike some of the previous examples, this example applies formatting to one field by looking at the value inside another field. Note that DueDate is referenced using the [$FieldName] syntax. FieldName is assumed to be the internal name of the field. This example also takes advantage of a special value that can be used in date/time fields - `@now`, which resolves to the current date/time, evaluated when the user loads the list view.

You can use column formatting to render quick action links next to fields. This sample, intended for a person field, renders two elements inside the parent `<div />` element:

These formats rely on two number fields, Before and After, for which the values can be compared. They show the appropriate trending icon next to the value of the After field, depending on that field's value compared to the value in Before. The sp-field-trending--up class is used when After's value is higher; the sp-field-trending--down class is used when After's value is lower. No icon is shown when they are equal (padding is added to keep consistent alignment).

A leadership-ready SharePoint Copilot App with 31 intent-routed UX components for personal work, project delivery, portfolio governance, AI investment, capacity, submissions, and approvals.

An evidence-led customer resolution Copilot App with 21 tools and four connected workspaces.

An employee-first SharePoint Copilot App with 20 intent-routed HR components and one shared ten-family workspace.

An intent-routed innovation portfolio Copilot App with 17 inline components and five connected workspaces.

An IT self-service Copilot App with 31 intent-routed components and three connected operational dashboards.

An evidence-led procurement Copilot App with 22 routed components and four connected workspaces.

An evidence-led revenue Copilot App with 21 intent-routed components and four connected workspaces.