Microsoft 365 Community Column and view formatting tips Open Meetings

17 Aug 2023

📺 In this 15 minute developer focused demo, Chris uses the recipe tracker tenplate in Microsoft Lists to show some tips and tricks for List formatting. With SP Formatter extension, he shows how to format operators, introduces us to enhanced formatting experience with Intellisense and Auto-Preview and also discusses to work directly in VS Code. Closing the demo with an overview of arithmetic, conditional and logical, as well as conversion operators, Multi-Value and Loop Operators and Text operators, and Value extraction operators.

This demo is taken from the Microsoft 365 & Power Platform Development Community call August 17th, 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenters
Chris Kent (Takeda) | https://twitter.com/theChrisKent

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
16 minutes

oats

recipes

lasagna

delicious

great

tracking

add

list

warrior

microsoft

3 Aug 2023

📺 In this 17 minute demo, Chris shows how to build a no-code poll app with SharePoint list formatting. He starts with a new site and applying a template and gets two lists in place. He continues with a comprehensive side-by-side view of UX and code for inlineEditField and customRowAction:setValue. He finishes by setting up a Power Automate flow that onboards new team members easily.

This demo is taken from the Microsoft 365 & Power Platform community call 3rd of August 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Chris Kent (Takeda) | @TheChrisKent

📖 Supporting materials
• List formatting on GitHub: https://github.com/pnp/List-Formatting

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
17 minutes

site

teamside

create

editing

view

template

great

onboarding

bring

poll

20 Jul 2023

📺 In this 17 minute demo, Chris walks us through some more List formatting magic! In the Content Type Gallery, create a new content type. In a SharePoint list, enable the allow management of content types in list settings to then add content types through the add columns menu and customize its options to get a view and add these columns to that view. Also delete the item content type on that list. Add items of different content types to the same list and start to format the view with conditional rules. Enhance that experience with Advanced mode and manipulate the JSON code. Create a board view and get the content type into it!

This community call demo is taken from the bi-weekly Microsoft 365 & Power Platform community call 20th of July 2023. Join the next one by downloading invite from https://aka.ms/community/calls.

✨ Presenter
Chris Kent (Takeda) | @TheChrisKent

📖 Learn more
• PnP List Formatting repository: https://github.com/pnp/List-Formatting

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

1 participant
18 minutes

content

site

dream

themed

think

modern

head

warrior

provisioning

horses

13 Apr 2023

In this 14-minute developer-focused demo Chris Kent shows viewers how to create a radar chart for visualizing list data. Create an SVG (use Inkscape) - modify paths and apply transforms (Transforms extension), and edit some XML. Convert XML to JSON (with “HTML To Formatter”). Paste SVG JSON into custom List formatting view. Tips on preparing SVG for List Formatting include using absolute paths and only paths, viewBox, and currentColor to utilize theme colors.

This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on April 13, 2023.

Demo Presenter
• Chris Kent (Takeda) | @theChrisKent

Community Call Conversation
• aka.ms/Apr13-Demo3

Supporting materials
• Documentation - Use column formatting to customize SharePoint | aka.ms/spdocs-column-formatting
• Samples - List Formatting Samples | aka.ms/List-Formatting
• Tool – Inkscape | https://inkscape.org/
• Extension - inkscape-applytransforms | https://github.com/Klowner/inkscape-applytransforms
• Tool – HTML To Formatter - https://pnp.github.io/List-Formatting/tools/html-formatter-generator/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
14 minutes

strategic

targets

mission

stuff

considered

advanced

complicated

notes

format

wars

30 Mar 2023

In this 14-minute developer-focused demo, André Lage who was inspired by static graphics used in PowerPoint, shows ways to enliven data points stored in your SharePoint list. Samples covered include process arrows, lifecycle, content circular, content pyramid, matrix, content box, timelapse, and welcome message. Samples shown are presently or soon will be available in the PnP Samples repository. All samples render well in desktop and mobile views.

This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on March 30, 2023.

Demo Presenter
• André Lage (Datalynx AG) | @aaclage

Community Call Conversation
• aka.ms/Mar30-Demo2

Supporting materials
• Sample - Person circle Header | https://github.com/pnp/List-Formatting/tree/master/form-samples/person-circle-header
• Samples – SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

2 participants
14 minutes

workflow

sharepoint

powerpoint

presentation

process

controls

design

microsoft

options

informatics

16 Feb 2023

In this 15-minute developer-focused demo, Federico Sapia shows using Microsoft Lists to track info about people and their work history. Change your thinking from a standard card to a single large CV card footprint using JSON view formatting. Microsoft Lists card elements: In place field editing, expandable editing boxes, custom hovercards and clickable attachments (automation using Power Automate). Field editing box embedded in a card thanks to inlineEditField JSON property. The template is available to you now.

This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on February 16, 2023.

Demo Presenter
• Federico Sapia (ANPAL Servizi) | @X365Fede

Community Call Conversation
• https://aka.ms/Feb16-Demo2

Supporting materials
• Sample - Internal CV | https://github.com/pnp/List-Formatting/tree/master/view-samples/internal-cv
• chrome web store - SP Formatter | https://chrome.google.com/webstore/detail/sp-formatter/fmeihfaddhdkoogipahfcjlicglflkhg?hl=en
• Visual Studio Marketplace – SP Formatter | https://marketplace.visualstudio.com/items?itemName=s-kainet.sp-formatter#:~:text=SP%20Formatter%20VSCode%20extension%20creates,to%20browser%20with%20live%20preview.

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

3 participants
15 minutes

microsoft

implementation

users

documented

overview

list

organizational

process

expertise

cv

2 Feb 2023

In this 20-minute developer-focused demo, Chris Kent delivers three useful tips/tricks. 1) Adding a lookup in your list to display items located in another list. Format multiple items in single list field using forEach to render each item on a new line within the current field – table like formatting. 2) Make a % field look prettier using the Number Battery sample. 3) Appending SharePoint query strings to page/list URLs to effortlessly remove navigation. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on February 2, 2023.

Demo Presenter
• Chris Kent (DMI) | @thechriskent

Community Call Conversation
• aka.ms/Feb2-Demo2

Supporting materials
• Samples - List Formatting Samples | aka.ms/list-formatting
• Sample - Number Battery | https://github.com/pnp/List-Formatting/tree/master/column-samples/number-battery

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
20 minutes

hbo

netflix

episodes

dialogue

silly

gosh

providing

warrior

foreign

site

8 Dec 2022

In this 28-minute developer-focused demo, Chris Kent shows how for most unformatted/basic columns you can slap the inlineEditField: @currentField on existing formats to make the column editable (click and change). For formatted columns or columns with multi-value formatting, use setValue with actionInput and displayValue to accomplish inline editing capability. See how Chris finds and uses community samples (48 Inline Editing samples), found in the PnP List Formatting Samples repo to support his objective.

This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on December 8, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials
• Repo – PnP List Formatting | https://github.com/pnp/List-Formatting
• Library – Flicon (Fluent UI icon search) | https://flicon.io/
• Sample - Multi-Person Facepile | https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-person-facepile
• Sample - Person Hover Card | https://github.com/pnp/List-Formatting/tree/master/column-samples/person-hover-card

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
28 minutes

tweak

editing

editable

edit

settings

tool

formatting

view

stuff

warrior

24 Nov 2022

In this 18-minute developer-focused demo delivered by Chris Kent, find site pages more quickly by using a few atypical and nicely formatted columns for communicating list contents. Start by creating a new view. Expose the Promoted State, Author Byline, and Banner Image columns. Format columns using formatting samples - person-hover-card, image-lightbox and promoted-state-icons from the PnP List Formatting Repo. As well, use icons, counts, colors, and conditions for more clarity. Rearrange columns in view. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on November 24, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials
• Repo – PnP List Formatting | https://github.com/pnp/List-Formatting
• Library – Flicon (Fluent UI icon search) | https://flicon.io/
• Sample - Person Hover Card | https://github.com/pnp/List-Formatting/tree/master/column-samples/person-hover-card
• Sample - Image Lightbox | https://github.com/pnp/List-Formatting/tree/master/column-samples/image-lightbox

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
18 minutes

turkey

thanksgiving

turkeys

genocide

gobble

foreign

reevaluate

editing

having

site

15 Sep 2022

In this 15-minute developer-focused demo, André Lage delivers minimalist design style - 3D look and feel for buttons and graphics applied to 7 newly created JSON neomorphic list formatting controls – Buttons, Options, Rate, Image, Doughnut, Bars, Calendar. The sample controls can be implemented on list columns and views. Create a neomorphic list and distribute it using PowerShell for consistent usage and management across organization. This work inspired by Kristine Kolodziejski. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on September 15, 2022.

Demo Presenter
• André Lage (Datalynx AG) | @aaclage

Supporting materials
• Samples - List Formatting Samples | aka.ms/list-formatting
• Video - Taking your Power Apps mobile navigation UI to the next level! – Kristine Kolodziejski (Computacenter) | @kristinekk94 | https://youtu.be/BjhsmcaV2TM
• Videos - Kristine Kolodziejski (channel) | https://www.youtube.com/c/KristineKolodziejski/videos
• Sample - Doughnut Chart | https://github.com/pnp/List-Formatting/tree/master/column-samples/number-doughnut-chart

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
16 minutes

implemented

design

customization

controls

models

formatting

visualization

formic

templates

csl

8 Sep 2022

In this 23-minute developer-focused demo, Chris Kent’s solution shows you how to eliminate times aligned to dates for clean date-to-date comparisons. Here’s four functions for Zeroing out dates – Date () (convert text to date based on locale), getDate () (get day of month), getMonth () (get month index), and getYear () (get 4-digit year). In list, display number of days since list item was modified. Show date formatting in list and gallery views. Apply conditional formatting for clarity. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on August 18, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials
• Documentation - Use column formatting to customize SharePoint | aka.ms/spdev-column-formatting
• Icons - Flicon.io | https://flicon.io/
• Repo - Farrier Community-tooling | https://github.com/pnp/community-tooling
• Samples - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
23 minutes

assassinations

tracking

kill

plan

careful

hack

point

wizards

date

horse

18 Aug 2022

Do you have a carefully crafted formatted list you want to replicate across the org? In this 7-minute developer-focused demo Chris Kent shows you how to create a custom list template using 3 PowerShell commands. Adds all formatting – list and gallery views to template. Task prerequsites – SharePoint Online PowerShell and Global or SharePoint Admin role. Template creation. Fine-tune your list in the UI, then extract to Site Script (Get-SPOSiteScript), register Site Script (Add-SPOSiteScript), Upload a thumbnail, and register list design (Add-SPOListDesign). This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on August 18, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials
• Documentation - Use column formatting to customize SharePoint | aka.ms/spdev-column-formatting
• Icons - Flicon.io | https://flicon.io/
• Repo - Farrier Community-tooling | https://github.com/pnp/community-tooling
• Samples - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
7 minutes

configured

admin

powershell

sharepoint

connect

deploy

commands

spo

ready

hitlist

4 Aug 2022

In this 22-minute developer-focused demo, Chris Kent shares isSelected and other recently released list formatting capabilities. isSelected is used with classes, found on formatting samples site, for formatting (backgrounds, borders) to selected row or changes an image in column of selected row. Classes used ms-bgColor-* applies a background color, sp-field-border* sets border-width and border-style. Two Bonus on-the-fly demos show new “customRowAction” to expose a context menu and new expression called “split” for formatting text and borders around text. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on August 4, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials
• List Formatting Samples - Samples by Class: ms-bgColor-* | https://pnp.github.io/List-Formatting/groupings/classes/ms-bgColor/
• List Formatting Samples - Samples by Class: sp-field-border* | https://pnp.github.io/List-Formatting/groupings/classes/sp-field-border/
• Documentation - Use column formatting to customize SharePoint | aka.ms/spdev-column-formatting
• Icons - Flicon.io | https://flicon.io/
• Repo - Farrier Community-tooling | https://github.com/pnp/community-tooling
• Samples - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
22 minutes

color

customizing

backgrounds

style

formatting

row

warrior

stuff

carefully

msbg

21 Jul 2022

In this 24-minute developer-focused demo, think on how we may receive e-mail, add details to a list, and display item details in manually formatted page. Chris Kent automates this process with a flow that creates a folder for each new list item and moves the list item into the folder using the Power Automate template - When a new item is added in SharePoint, create a page and complete a custom action. Presenter configures flow that includes updating list with page URL and metadata. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on July 21, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials
• Documentation - Use column formatting to customize SharePoint | aka.ms/spdev-column-formatting
• Icons - Flicon.io | https://flicon.io/
• Repo - Community-tooling | https://github.com/pnp/community-tooling
• Samples - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting
• Flow – When a new item is added in SharePoint, complete a custom action | https://powerautomate.microsoft.com/templates/details/3999d042ec7a49c5b91ae2229037fdb7/when-a-new-item-is-added-in-sharepoint-complete-a-custom-action/
• Demo - Microsoft Forms to SharePoint List: Create SharePoint List from Excel | https://www.youtube.com/watch?v=9hBeckKMlrg

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

1 participant
24 minutes

rnv

initiatives

having

horse

research

stuff

manage

site

think

comments

7 Jul 2022

In this 15-minute developer-focused demo, Chris Kent shares many exciting updates regarding the List Formatting Repo that address sample inconsistencies, currency and discovery. All samples and documentation have been updated. The Repo has been reorganized including new groupings by Operator, Placeholder Token, Action, Category, Feature, Author, and by Class. Instruction for submissions created. Go behind scenes to learn about the Farrier tool and automations now used to keep the repo up-to-date. Accessing what you need from 250 samples is dramatically easier now. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on July 7, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials
• Repo - Community-tooling | https://github.com/pnp/Community-Tooling
• Samples - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting
• Documentation – Use column formatting to customize SharePoint | aka.ms/spdev-column-formatting

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
15 minutes

repo

repository

updated

tweak

documentation

list

maintain

pr

suggestions

sample

29 Jun 2022

In this 15-minute developer focused demo, André Lage elegantly extends Microsoft Lists Expense tracker template’s capabilities by adding file picker, locations (embedded Bing maps), payment timeline view and mobile view list formatting. His solution leverages a SharePoint page - filter web parts, Power Automate - declarative JSON for flow (expense approval), and Adaptive Cards for approval in a Teams channel. Use the capabilities to create/populate a new expense item and call a flow action for large expense approval. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on June 9, 2022.

Demo Presenter
• André Lage (Datalynx AG) | @aaclage

Supporting materials
• Sample - Payment format | https://github.com/pnp/List-Formatting/tree/master/view-samples/payments-format
• Sample - Bing Maps format | https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-bingmaps-format
• Sample - File Picker format | https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-filepicker-format
• Samples - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting
• Expense tracker template

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
15 minutes

workflow

users

interface

management

needs

project

features

consultancy

presentation

expense

23 Jun 2022

In this 8-minute developer focused demo, André Lage delivers simple examples of formatting we can implement on a SharePoint page today. Create tabs with associated content. The tabs sample allows you to add an icon or url to image displayed on each Tab. The percentage chart sample displays formatted chart row based on icon/emoji/svg and associated calculated numbers. Add new items to list in Property Pane on page. Edit dates and values alternatively on page or in list. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on June 23, 2022.

Demo Presenter
• André Lage (Datalynx AG) | @aaclage

Supporting materials
• Repo - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting
• Feedback - Microsoft Lists | aka.ms/Feedback/Lists
• Repo - tabs format | https://github.com/pnp/List-Formatting/tree/master/view-samples/tabs
• Repo - Percent chart format | https://github.com/pnp/List-Formatting/tree/master/view-samples/percent-chart-format

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

2 participants
8 minutes

visualize

tabs

tabbing

sharepoint

presentation

formatting

objectives

help

create

percentage

31 May 2022

In this 11-minute developer-focused demo, Chris Kent shows viewers how to jazz up percentage amounts in a column using a number level bar and then adds a column with localizable textual interpretation of the percentages. Text is localized using the @lcid token (magic). Localizing text in a list side-steps complicated page translations and ensures users in various regions can use your formats without issue. Observe simplicity of copying JSON from sample into the column’s Advance mode formatting box. Scenario draws from 3 samples. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on May 12, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials
• Sample - Number Level Bar | https://github.com/pnp/List-Formatting/tree/master/column-samples/number-level-bar
• Sample – Number Localization | https://github.com/pnp/List-Formatting/tree/master/column-samples/number-localization
• Sample – Person Localization | https://github.com/pnp/List-Formatting/tree/master/column-samples/person-localization
• Samples - List Formatting Samples | aka.ms/list-formatting

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

2 participants
11 minutes

threats

threat

weapon

targeted

complexity

advanced

provide

considering

tracking

localization

27 May 2022

In this 17-minute developer focused demo, André Lage uses JSON formatting to transform an out-of-box discussion board to next level robust discussion view. Add menu with support features (permission checker, default editing, comments & responses to post), add a custom discussion board timeline view, support information lookup (discussion answers list), and add voting with Emoji’s. leverages existing capabilities – SharePoint page, filter web parts, Microsoft Power Automate (declarative JSON for Flow), and Microsoft Teams. Uses code from 3 PnP samples.
This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on May 12, 2022.

Demo Presenter
• André Lage (Datalynx AG) | @aaclage

Supporting materials
• Sample - discussion board format | https://github.com/pnp/List-Formatting/tree/master/view-samples/discussion-board-format
• Sample - Calculator sample | https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-calculator
• Sample - Percent chart format | https://github.com/pnp/List-Formatting/tree/master/view-samples/percent-chart-format
• Samples - List Formatting Samples | aka.ms/list-formatting
• Demo - List formatting magic - Discussion board formatting - André Lage (Datalynx AG) | @aaclage

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

2 participants
17 minutes

users

discussion

board

posting

dialog

manage

editing

commenter

workflow

help

28 Apr 2022

In this 17-minute developer focused demo, André Lage extends existing Kanban Board card view and renders Adaptive Cards in SharePoint, Teams and Planner. Use JSON formatting to add 3 new features to cards - flags, move to top, and expand/collapse. Arrange list data as cards in form of a Kanban board. Manage cards with filtering, menu options, bots, mail forwarding rules, Power Automate flows, use conditional formatting, collect comments, add/delete, move to next stage, and mark as complete. Exemplifies the build once, render anywhere approach. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on April 28, 2022.

Demo Presenter
• André Lage (Datalynx AG) | @aaclage

Supporting materials
• Sample - Board tag format | https://github.com/pnp/List-Formatting/tree/master/view-samples/board-tag-format
• Samples - List Formatting Samples | aka.ms/list-formatting

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

2 participants
17 minutes

board

redesign

boardview

adapter

customization

editing

implementation

adapt

updated

planner

14 Apr 2022

In this 7-minute developer-focused demo, Chris Kent uses a single list being fed by one or more Microsoft Forms and expose actionable details on a dashboard comprised of 4 discrete list web parts accessing the same list but displaying information in different views (Honeycomb, Recent Comments, Heat Map, Gauge Aggregate Footer). As data flows into the list, the dashboard updates. In this example the web parts are not linked together but could be. Sample code available for each View shown. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on April 14, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Sample - Heat Map | https://github.com/pnp/List-Formatting/tree/master/view-samples/heat-map
• Sample - Honeycomb Links | https://github.com/pnp/List-Formatting/tree/master/view-samples/honeycomb-link
• Sample - Recent Comments | https://github.com/pnp/List-Formatting/tree/master/view-samples/recent-comments
• Sample - Gauge Aggregate Footer | https://github.com/pnp/List-Formatting/tree/master/view-samples/gauge-aggregate-footer

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

2 participants
7 minutes

demo

preview

views

stuff

scroll

exciting

advance

visualize

dashboard

data

14 Apr 2022

In this 15-minute developer focused demo, Chris Kent opens with high level positioning on column, view and form formatting options. Understand how commandBarProps are positioned namely Command bar property changes affect view, not list configuration. See the basic JSON schema used to make changes to items on the command bar. Add, hide, move items on bar or to overflow, rename, add/change icon, add a tooltip and even conditions to command items. Command bar options are useful for guiding users through workflow. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on April 14, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials
• Documentation - Command bar customization syntax reference | https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-commandbar-formatting
• Icons – Flicon | https://flicon.io

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

2 participants
15 minutes

formatted

customization

view

displaying

rows

layout

ui

excel

list

microsoft

3 Mar 2022

In this 14-minute developer-focused demo, João Ferreira shows how to expose Microsoft To Do (task list) capabilities and similar UI, in Microsoft Lists and in SharePoint. Step through creating a list, tasks, and a To Do view. Review view formatting code for groups, status, title, date, description/notes, tags, attachments, comments, favorites, item detail, edit form, update details, delete task. Very soon the ~500 lines of code for this insertion will be made available in a template in the PnP List Formatting repo. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on March 3, 2022.

Demo Presenter: João Ferreira (Beezy) | @joao12ferreira

Supporting materials:
• Article - How to create a To Do list using SharePoint and Microsoft Lists view formatting – Part 1 | https://lists.handsontek.net/create-list-using-sharepoint-microsoft-lists-view-formatting-part-1/
• Samples - List of View Formatting Samples | https://pnp.github.io/List-Formatting/viewsamples/
• Blog – HANDS ON tek | https://handsontek.net/blog/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
14 minutes

tasks

microsoft

task

office

implement

add

editing

doing

manage

list

20 Jan 2022

In this 19-minute developer focused demo, André Lage shares the output of his winter lock down – List Formatting samples categorized by emotions, multiple person, color picker, bar option, slider, and Teams Group. Solutions include discussion board, events mobile and payment. Graphical tree along with LABs (show how handle manual actions from users) for Tic Tac Toe and roll dice. UI/script shown on slides, live in demo. Samples available in List Formatting Repo soon. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on January 20, 2022.

Demo Presenter: André Lage (Datalynx AG) | @aaclage

Supporting materials:
• PnP Samples - List Formatting Samples | https://pnp.github.io/List-Formatting/
• List formatting documentation | https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
19 minutes

presentation

users

format

ui

manage

interacted

informations

customization

sharepoint

themes

10 Jan 2022

A 9-minute developer-focused demo showing how to generate appreciation with field targeted editing. Chris Kent’s scenario: Track toy construction progress in a list where status is displayed in tile view format. Tiles show an image, randomization (Elf quote), and multi-level progress bar using images. The inlineEditField attribute allows user to edit the completion status field directly in the UI. Supported and unsupported field types reviewed. Full code in sample. Part 2 of demo (setValue attribute) to be delivered on December 23rd. A This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on December 9, 2021.

Demo Presenter: Chris Kent (DMI) | @thechriskent

Supporting materials:
• Repo - Elf Progress Board | https://github.com/pnp/List-Formatting/tree/master/view-samples/elf-progress-board
• Documentation - Use column formatting to customize SharePoint | aka.ms/spdocs-column-formatting

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
9 minutes

elves

elf

workshop

toys

stuff

christmas

pieces

list

tracking

turkeys

29 Nov 2021

In this 12-minute developer focused demo, Chris Kent’s objective here is to make a list with topics and lengthy descriptions more readable and interactive. Create 2 new views (list and gallery) for the same list. Gallery view for button like navigation (topics), and List view to create mini navigation – to move up/down through item descriptions. Use “ID” attribute that links everything together with anchors. Expose views on webpage. All bowser - client-side with out-of-the-box formatting. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on November 11, 2021.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Documentation - Use column formatting to customize SharePoint | https://aka.ms/spdocs-column-formatting
• Samples – List Formatting (View samples - Content-browser) | http://github.com/pnp/List-Formatting (Sample available very soon)

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
13 minutes

editing

formatting

tools

view

setup

plans

stuff

deploy

sharepoint

horses

25 Nov 2021

In this 13-minute developer focused demo, let Anand Ragav show you how Spaces, 4 lists, a timer web part and a quick links web part for UI supported by an Events list in the backend are blended to create a sharp Event page in SharePoint. Step through the Spaces embed, column formatting, list and list view set up for Sessions, Tracks, People and About Event. Informational pop ups, event filtering, registration and more. . This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on November 25, 2021.

Demo Presenter: Anand Ragav | @anandVragav

Supporting materials:
• Article - Create an event page with SharePoint, SharePoint Spaces and formatted Lists | https://techcommunity.microsoft.com/t5/microsoft-365-pnp-blog/create-an-event-page-with-sharepoint-sharepoint-spaces-and/ba-p/2994438

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
13 minutes

sharepoint

presentation

sharing

users

collaborate

demo

host

present

space

event

25 Nov 2021

In this 13-minute developer-focused demo, Chris Kent renders a randomly generated stack of informational cards with the last card in the reshuffled list showing up at the top of the stack. Whenever one visits the page hosting this list view - a “randomly shown fact card” will render. Randomization is based on the calculation of time in milliseconds - Number(@now) function. The resulting value is used to select an image. A This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on November 25, 2021.

Demo Presenter: Chris Kent (DMI) | @thechriskent

Supporting materials:
• Documentation – Use column formatting to customize SharePoint | https://aka.ms/spdocs-column-formatting
• Samples – List formatting samples (random-item) | https://github.com/pnp/List-Formatting/tree/master/view-samples

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
13 minutes

thanksgiving

turkeys

turkey

gobble

horses

stuff

americans

warrior

gravy

taking

7 Oct 2021

In this 13-minute developer/citizen developer-focused demo, Chris Kent – starts out creating a list then adds and formats a location column. Adds locations with link to a map and then adds multiple sub properties (street, state, country) under the Location’s name. Add a weather column and formatting to display an image and details for weather. When list items are updated, then weather entries will be updated. Implement this today – get the address and weather samples. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on September 16, 2021.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Sample - Display Location Address Details | https://github.com/pnp/List-Formatting/tree/master/column-samples/location-address
• Sample - Display Location Weather Details | https://github.com/pnp/List-Formatting/tree/master/column-samples/location-weather

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-video

1 participant
13 minutes

facilities

horse

barn

stuff

great

bronco

ahead

decide

save

rename

19 Aug 2021

In this 14-minute developer-focused demo, Chris Kent shows how Microsoft Excel like formatting in a SharePoint list is possible. Once you understand what you have – numbers or strings, precision formatting is easily achieved. Learn how to display folder and file sizes or numbers generally in lists with 2-digit precision / formatting (0.00), using various operators - toString, indexOf, substring, padStart, padEnd, ceiling, floor AND/OR with formulas in sample code. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on August 19, 2021.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Documentation – Operators | https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#operators
• Documentation - Use column formatting to customize SharePoint | https://aka.ms/spdocs-column-formatting
• Samples - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting
• Videos - Microsoft Lists | https://bit.ly/lf-videos

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
14 minutes

format

size

bit

specify

collection

horses

complicated

onenote

view

1024

5 Aug 2021

In this 18-minute developer-focused demo – are you getting started with Lists? Chris Kent suggests using richly formatted list templates and designers from Microsoft, along with PnP samples. See tips for customizing a newly created list - add/delete and format columns, add and stylize font, set colors, add data. Use Wizards and jump into Advanced mode anytime. Much can be learned from OOB template script and schema. Simpler add date math expressions reviewed as well. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on August 5, 2021.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Icons – Flicon | https://www.flicon.io/
• Documentation - Use column formatting to customize SharePoint | https://aka.ms/spdocs-column-formatting
• Samples - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting
• Video channel – Microsoft Lists | http://bit.ly/lf-videos

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
18 minutes

warrior

starting

horses

site

stuff

preparing

needs

drag

customize

recruiter

10 Jun 2021

In this 10-minute developer-focused demo, Chris Kent shows an alternative to going to GitHub to pull samples. The Community team is experimenting with an additional layout option – List Formatting Sample Showcase - pages that display fully functional samples Power Users can manipulate, drill in to view/customize data, and get additional details in GitHub - from within a browser! You may even adopt this formatting in your own tenant. Available soon. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on June 10, 2021.

Demo Presenter - Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Repo - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting
• GitHub - SharePoint List Formatting Samples | https://pnp.github.io/List-Formatting

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
10 minutes

pnp

sharepoint

charting

pmp

samples

provisioning

showcase

view

project

screenshot

29 Apr 2021

In this 16-minute Developer-focused demo, Chris Kent shows formatting capabilities available in a referenced sample. Topic: Field Type = “Lookup.” Lookups get values from a list and have limited formatting options. Of course, this limitation does not deter Chris from showing crazy, crazier, craziest formatting options for lookups. General approach = format the lookup column into which content from the referenced list will flow. Use advanced forEach property. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on April 29, 2021.

Demo Presenter - Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Repo - Multi-lookup fields and projected fields | https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-lookup-projected-field
• Demos – Other formatting demos from Chris | https://youtube.com/c/Microsoft365PnPCommunity/search?query=format%20flow
• Documentation – Create list relationships by using unique and lookup columns | https://support.microsoft.com/en-us/office/create-list-relationships-by-using-unique-and-lookup-columns-80a3e0a6-8016-41fb-ad09-8bf16d490632

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
16 minutes

lookups

lookup

formatting

substring

edit

handle

currentfield

property

information

think

15 Apr 2021

In this 16-minute Developer-focused demo, Leon Armston delivers the next stage in the evolution of his London Underground - Tube Status solution. An interactive Tube bot in Power Virtual Agents, using Power Automate, and configuring your Azure environment for Azure API Management and Azure Functions. Dataverse for Teams allows users to leverage Azure API Management service using a custom connector in Power Platform. See solution architecture, execution triggers, rules, calls and more. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on April 15, 2021.

Demo Presenter: Leon Armston (Intelogy) | @LeonArmston

Supporting materials:
• Blog – Create a London Underground Line Status Bot using Power Virtual Agents & Azure Management API in Dataverse for Teams | https://www.leonarmston.com/2021/02/create-a-london-underground-line-status-bot-power-virtual-agents-azure-azure-management-api-in-dataverse-for-teams/
• Blog - Azure API Management connector on the Power Platform | https://powerapps.microsoft.com/en-us/blog/azure-api-management-connector-on-the-power-platform/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
16 minutes

bots

interactive

dataverse

powerapps

remotely

demoed

platform

functionality

connector

api

1 Apr 2021

In this 17-minute Developer-focused demo, Chris Kent expands upon a demo delivered in this call on April 1st. In this demo, we are reminded there are layers of formatting options for lists and there is sample code for each layer. Review options for header and footer settings, for groups and entire list, beyond the vanilla capabilities shared previously. Focusing on Collapsed Simple formatting used for Q&A, see usage of groupProps, aggregates, hiding, along with tips on double nesting and more. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on April 1, 2021.

Demo Presenter - Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Documentation - Use column formatting to customize SharePoint | https://aka.ms/spdocs-column-formatting
• Documentation - Use view formatting to customize SharePoint | http://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting
• Repo - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
17 minutes

view

customize

layout

formatting

ui

display

list

surface

row

microsoft

31 Mar 2021

In this 14-minute Developer-focused demo, Chris Kent’s delivers tips to draw people’s attention to discussions around selected list items by more prominently displaying the number of comments on each item. Accomplish this by using CommentCount, a fluent UI icon and formatting. Be aware of and adjust for differences between how icon containing number renders slightly differently in forms, lists and tiles views. Use sample script in your list today! This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on March 18, 2021.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting documents:
• Documentation - Use column formatting to customize SharePoint | http://aka.ms/spdocs-column-formatting
• Samples – SharePoint List Formatting Samples | http://github.com/pnp/sp-dev-list-formatting
• Repo – Comment Count | https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/comment-count
• Repo - Row Index Drawing | https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/generic-rowIndex-drawing

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
14 minutes

horse

boat

discussion

comments

aquatic

sharks

stuff

exciting

view

warrior

4 Mar 2021

In this 14-minute Developer-focused demo, Chris Kent shares insights on how not to drown in the sea of list formatting options! He starts with UI fundamentals 101 to illustrate the layered approach to formatting and rendering list data. Making changes in one layer may not translate well to other layers. The complexity reducer is to use “columnFormatterReference” that applies changes across all layers or views. Confidently use PnP list formatting samples. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on March 4, 2021.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting documents:
• Documentation - Use column formatting to customize SharePoint | https://aka.ms/spdocs-column-formatting
• Samples – SharePoint List Formatting Samples | https://github.com/pnp/sp-dev-list-formatting

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
14 minutes

formatting

formatted

format

formatter

customization

sharepoint

row

list

view

labels

22 Feb 2021

In this 11-minute Developer-focused demo, Sergei Sergeev shows latest functionality for customizing your SharePoint Column or View Formatting JSON using full-featured editor instead of out-of-box (OOB). Recently released OOB formatting looks very similar to SP Formatter, but wait, there are differences. What’s new? Live preview, IntelliSense and tool tips for styles and icons, replaceable tokens, context aware suggestions, resizable code workspace, and VS Code Integration Mode with the SP Formatter VSCode extension. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on February 4, 2021.

Demo Presenter: Sergei Sergeev (Mastaq) |@sergeev_srg

Supporting materials:
• Extension – SP Formatter | https://chrome.google.com/webstore/detail/sp-formatter/fmeihfaddhdkoogipahfcjlicglflkhg?hl=en
• Extension - SP Formatter VSCode extension | https://marketplace.visualstudio.com/items?itemName=s-kainet.sp-formatter

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
11 minutes

formatter

format

formatting

differences

presentation

version

functionality

sp

tooltips

hpe

21 Jan 2021

In this 17-minute Developer-focused demo, Chris Kent focuses on the new list form called Configure Layout for formatting list Header, Body and Footer. Header and Footer formatting – draw what you want using familiar column formatting syntax. Chris shows the ease of leveraging code samples. Body section formatting has limitations at present. Presenter calls out things to keep in mind when using this new capability that is powerful, not polished. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on January 21, 2021.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Documentation - Configure the list form | https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-configuration
• Repo - Starter Form Samples | https://github.com/pnp/sp-dev-list-formatting/tree/master/form-samples
• Video – Sharepoint List Formatting From Customization – April Dunnam (Microsoft) | @aprildunnam | https://www.youtube.com/watch?v=wdbGtmFf7bs
• Video – Customize SharePoint List Forms using JSON - Reza Dorrani (Catapult) | @rezadorrani | https://www.youtube.com/watch?v=y_bdjMRHVmY&feature=youtu.be

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
17 minutes

headers

customize

edit

formatting

layout

section

footer

setting

current

horses

10 Dec 2020

In this 10-minute Developer-focused demo, Chris Kent shows an integration of Microsoft Power Automate with list formatting. Specifically, from within a list, request approval using a Flow. In the past to see details on a Flow required going to the Flows UI. Now link directly to the invoked Flow run from the list item. Flow run status is viewed on a hover. Delivers approval status to end-users and troubleshooting details on Flow run status. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on December 10, 2020.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Repo – Generic Flow Status | https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/generic-flow-status

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
10 minutes

workflow

customize

warrior

battlefield

plan

execute

power

ready

launch

sharepoint

12 Nov 2020

In this 18-minute Citizen Developer-focused demo, Leon Armston shows viewers how in approximately 15 minutes, they can add a live London Underground Line Status Board to their intranet using SharePoint and Power Automate. The solution uses Power Automate to provision a SharePoint list and to retrieve and process line status. Solution uses OOB List web part. Leon steps through transforming SharePoint list with view formatting json to reproduce the colorful appearance of the Tube’s status board. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on October 29, 2020.

Demo Presenter: Leon Armston (Intelogy) | @LeonArmston

Supporting materials:
• Blog - Live London Underground Line Status – SharePoint View Formatting & Power Automate | https://www.leonarmston.com/2020/09/live-london-underground-line-status-sharepoint-view-formatting-power-automate/
• Repo - London Underground Line Status | https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/london-tube-status

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
18 minutes

sharepoint

london

live

statuses

infrastructure

tube

interactive

powerapps

twitter

configure

12 Nov 2020

Site color theme is not flowing through to list tiles? Here is the 14-minute Chris Kent developer focused solution to address this requirement. Time to update hardcoded tile coloring in properties. Extend site theming, using theme sensitive classes, to SVG tile elements like box shadows, borders and fill. The trickery – use absolute and relative positioning to control hovercard behavior for parents and children. The solution works in Microsoft Lists, Microsoft Teams, a SharePoint list, and in a Web part. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on November 12, 2020.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Repo - Horse Crests | https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/horse-crests

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
14 minutes

style

theme

horsepress

color

formatting

theming

looks

icons

fixing

svg

29 Oct 2020

In this 9-minute Developer-focused demo, Chris Kent takes the awesome new modern Microsoft List templates and shows viewers how to extend them even further. Specifically, he shows the tiles views – effectively Onboarding Step cards and Planner cards, for 2 View Formatting samples (PnP extensions) – Employee onboarding and Issue Tracker. One may implement the view easily by copying the entire JSON sample file and pasting it in the list Format View’s properties pane. Cards are editable. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on October 15, 2020.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Repo - Issue Tracker: Planner Cards | https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/issue-tracker-planner-cards
• Repo - Employee Onboarding: Steps | https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/employee-onboarding-steps
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
9 minutes

customize

edit

tracker

settings

view

warrior

template

horses

microsoft

stuff

17 Sep 2020

In this 14-minute Site Owner-focused demo, Chris Kent steps viewers through the latest list formatting functionality in “design mode” wizards. Formatting capabilities include: view, date/time, choice & multiple choice, number, and yes/no. Capabilities are supported with “conditional” types – rules. Change colors, styles, icons, fonts. All this formatting through UI and no json! Of course you may switch to “Advanced mode” to view/change values in json statements created for you or insert your favorite json sample code. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on September 17, 2020.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Doc - Use column formatting to customize SharePoint | https://aka.ms/spdocs-column-formatting
• List Formatting Samples | https://aka.ms/list-formatting

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
14 minutes

settings

formatting

edit

style

custom

reevaluated

maintaining

plan

view

horses

8 Sep 2020

Did you know you can quickly and easily provide dynamic visualizations directly in List views? Both non-developers and developers can change how fields and rows look in modern list views. We'll cover the basics of getting started and provide tools and resources to take your lists from simple tables to meaningful views that create joy and happiness in the hearts of your users.

Speaker: Chris Kent (DMI) | @thechriskent

Supporting materials:
• Use view formatting to customize SharePoint - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-formatting
• PnP SharePoint List Formatting Samples - https://github.com/pnp/sp-dev-list-formatting

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices (PnP) community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

1 participant
30 minutes

tweaking

formatter

notepad

microsoft

list

virtual

displaying

users

tweeting

wizard

2 Sep 2020

In this 16-minute Site Owner - focused demo, Chris Kent creates a list starting in the central lists index at Office.com that displays new list templates as well as lists you’ve created within Microsoft Lists, SharePoint or shared with you. When creating a new list, choose target site or OneDrive and click Create. The new list adopts site formatting and column types. The property pane offers Wizard-like formatting options or you may format as have always done. Other new features described. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on August 20, 2020.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Microsoft Lists Resource Center http://aka.ms/mslists
• Flicon site http://flicon.io/
• Documentation - Use column formatting to customize SharePoint http://aka.ms/spdocs-column-formatting

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
16 minutes

microsoft

apps

list

customization

accessed

site

sharepoint

implemented

manage

subscription

11 Aug 2020

In this 15-minute Maker focused demo, Chris Kent – suggests an alternative to using icons in a list. Have you thought about inserting Windows emojis? Presently, there are many PnP formatting samples that call for “iconName.” In this demo, you see how easy it is to call Windows emojis – using the "txtContent" text property. Updates in this demo are executed using Sergei Sergeev’s SP Formatter (Chrome Extension) – that provides full formatting using Monaco Editor with instant preview, IntelliSense, find/replace, etc. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on July 23, 2020.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Icon Overlays | https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/generic-icon-overlay
• Icon Progress Bar | https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/number-icon-progressbar
• Multi-Choice Icons | https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/multi-choice-icons
• SP Formatter (Chrome Extension) | Sergei Sergeev | @sergeev_srg | https://bit.ly/SP-Formatter

Learn more:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

2 participants
15 minutes

invasion

stuff

emoji

warrior

themeable

friendly

launch

editor

capitalize

horse

6 Aug 2020

In this 12-minute Site Owner - focused demo, Chris Kent quickly reviews adding icons sourced from Office UI Fabric and Fluent UI to lists. He then introduces viewers to a new source of icons - Flicon.io (beta). The same 2000+ icons reorganized in categories and easily found in search thanks to a.k.a. terms. Easily change icon color and background to fit targeted site theme. Copy icon and paste into a script, export as SVG or drag it onto a PPT slide. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on August 6, 2020.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Use column formatting to customize SharePoint | aka.ms/spdocs-column-formatting
• Icon Sources | aka.ms/fluentui | http://uifabricicons.azurewebsites.net/
• Community icon search | https://www.flicon.io/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

2 participants
12 minutes

icons

icon

iconography

emoji

share

interface

edit

presentation

settings

appreciated

25 Jun 2020

In this 12-minute developer focused demo, Chris Kent reminds us not all pages on a modern site are modern by default and modern pages are not easily customizable, yet we really want to change formatting slightly. See how to create a modern looking Events page using events-format-tiles-only.json (sample found in GitHub view samples gallery). Configure list and tile views - color text, add a hover card/face-pile and/or beautify events list rendering. This PnP Community demo is taken from the bi-weekly Microsoft 365 – General M365 development Special Interest Group (SIG) community call recorded on June 25, 2020

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Use column formatting to customize SharePoint | http://aka.ms/spdocs-column-formatting
• List Formatting Samples | http://aka.ms/list-formatting
• Events Format | https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/events-format
• Demo: SharePoint Lists custom formatting - Hover cards | https://www.youtube.com/watch?v=bO2L3eJoT2Y

Learn more:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

2 participants
12 minutes

horses

site

modern

current

format

customizing

event

views

classic

ahead

30 Apr 2020

In this 18-minute demo delivered by Chris Kent, viewers learn how to take advantage of out-of-the-box hover cards and create custom hover cards in your column or view formatting definitions. This demo is extracted from the bi-weekly Microsoft 365 PnP community – General M365 Developer Special Interest Group (SIG) call recorded April 30, 2020.

⭐ Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:

✅ Formatting Documentation | aka.ms/spdocs-column-formatting
✅ Custom Hover Card | https://github.com/pnp/List-Formatting/tree/master/column-samples/custom-hover-card
✅ Person Hover cards| https://github.com/pnp/List-Formatting/tree/master/column-samples/person-hover-card

📺 All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

❓ Learn more about the Microsoft 365 Platform community at: http://aka.ms/m365/community

2 participants
18 minutes

formatting

features

hovercars

preview

showing

stuff

pointy

ui

horses

handler

16 Apr 2020

This 6-minute site collection admin focused demo delivered by Niket Jain, Microsoft SharePoint Program Manager focused on list capabilities, shows new functions that allow admins to define custom call outs (cards) for column and view formatting that can be commissioned on user defined actions like click or hover. Alternatively, when there is a default hover card, users can now have a profile card or file hover card on formatters that in effect overwrites the default hover experience. This demo is extracted from the bi-weekly Microsoft 365 PnP community – General M365 Developer Special Interest Group (SIG) call recorded April 16, 2020.

Presenter: Niket Jain (Microsoft) | @niketjain2002

Supporting materials:
• Default hover cards - column samples | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/default-hover-cards
• Custom hover cards- column samples | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/custom-hover-cards
• Default hover cards - view samples | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/default-hover-cards
• Custom hover cards - view samples | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/custom-hover-cards
• Default card on hover via column formatting | https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#default-cards-on-hover-via-formatting

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

2 participants
6 minutes

cards

label

custom

functionality

user

program

tooltip

styling

showing

sharepoint

14 Apr 2020

In this 13-minute demo delivered by Chris Kent, viewers learn how to create a connected contextual doc library page (mini application) by integrating 1st and 3rd party web parts and by using scripts from the sample’s library to format views. Web parts optimized for doc preview, video rendering and form viewer are added to page and all are connected to the List (source) which contains content titles, descriptions, links to videos, surveys, etc. Chris spruces up list items displayed - content title and thumbnail. End result is a nice index of topics delivering a rich on-screen experience, without having to build or buy an app. This demo is extracted from the bi-weekly Microsoft 365 PnP community – General M365 Developer Special Interest Group (SIG) call recorded April 2, 2020.

Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Video - Web parts working together | http://bit.ly/lf-videobutton
• Formatting Documentation | aka.ms/spdocs-column-formatting
• Generic Video button view sample | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/generic-video-button
• Document Navigator view sample | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/document-navigator (coming soon)

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

1 participant
14 minutes

equipment

stuff

horses

edit

great

modern

documentation

providing

users

warrior

19 Mar 2020

This PnP Community demo is taken from the bi-weekly Microsoft 365 – General M365 development Special Interest Group (SIG) community call recorded on March 19, 2020.

In this 13-minute demo, Chris Kent shows viewers how to update column formatting JSON schema using ARIA attributes to pass information to the ChromeVox (a Chrome extension for the visually impaired) screen reader that verbalizes value/status of a formatted field. Formatting includes adding color (representing a status) and values which may be verbalized as follows: “Hire horse trainers, Progress 'Getting there!' is 75%, cell read only.” This added information makes your formatting truly accessible to all audiences!

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Column formatting documentation: http://aka.ms/spdocs-column-formatting
• ARIA resources: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
• Formatting sample: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/number-data-bar

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

3 participants
14 minutes

chrome

dialogue

dialog

voice

insight

format

readers

horse

screenreader

careful

19 Mar 2020

This PnP Community demo is taken from the bi-weekly Microsoft 365 – General M365 development Special Interest Group (SIG) community call recorded on March 19, 2020.

In this 12-minute demo, David Warner and Hugo Bernier show off a SPFx Web Part used to put CSS styles on a single page. Capabilities demonstrated include banner formatting, hover effects, tilt list of photos, customize fonts, animations, sprites and more. Why not use an SPFx Extension for CSS? Extensions affect every page in a site collection whereas a web part affects only the pages on which it is added. List Formatting enhancements can and often do differ page by page. The code consists of controls and web part. The presenters suggest you should use this web part responsibly!

Demo Presenters:
• David Warner (Catapult) | @DavidWarnerII
• Hugo Bernier (Point Alliance) | @bernierh

Supporting materials:
• Enhanced list formatting sample: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-enhanced-list-formatting
• CSS Pseudo Elements: https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements
• CSS Pseudo Classes: https://developer.mozilla.org/docs/Web/CSS/Pseudo-classes
• CSS Animations: https://developer.mozilla.org/docs/Web/CSS/animation

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

2 participants
12 minutes

enhanced

extensions

formatting

styled

overview

editing

isles

elements

webpart

spf

5 Mar 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on March 5, 2020.

Presently the Length operator does not return the number of characters of text in a selected list field. In this 10-minute demo, Chris Kent shares how to configure (trick) the IndexOf operator to return the length of a string in the field. Special thanks to Alberto Suárez Caballero http://albertosuarezcaballero.es/ for the “trick.”

Given this new capability, Chris suggests we can now easily add links to keywords in a list-based FAQ. Essentially, search text strings for keywords, for each keyword found, add link to additional information. Watch this demo and then get the “FAQ format” sample in the GitHub PnP sp-dev-list-formatting samples library.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• "FAQ format" sample | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/ (to be published soon)
• "Custom header format" sample | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/custom-header-format
• Custom header demo | Chris Kent (DMI) | https://www.youtube.com/watch?v=4uQyYQp8G2I

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

2 participants
10 minutes

formatting

warhorse

text

stuff

adding

substring

battle

faq

version

table

20 Feb 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on February 20, 2020.

In this 12-minute video, Chris Kent, adding to his previously delivered sessions on list formatting, demonstrates an extension to the baseline @rowIndex (Alternating Row formatting) available in a row formatting sample that allows the developer to not only select alternating rows, but also to hide existing column headings, to create independent row formatting, to add a custom header and to add icons and color fields based on position in the Row Index.

Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Alternating RowClass sample: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/alternating-rowclass
• Custom Header format sample: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/custom-header-format
• Blogpost: bit.ly/LF-alternating

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

2 participants
12 minutes

aquatic

view

edit

formatting

stuff

boat

row

thinking

wizards

horses

6 Feb 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on February 6, 2020.

In this 11-minute video, Chris Kent, adding to his previously delivered sessions on list formatting, demonstrates using "IndexOf" and the "substring" operator to add an icon + summary status text to list column entries. This function is particularly useful when facing a long menu of choices and the options presented are a mash up of 2 or more thoughts. For example: Not Started: New, Not Started: Delayed, Not Started: Unassigned… Of course, you are free to use a bunch of "if" statements or calculated values for this conditional formatting task. Also, you are welcome to write your own json, but why not save time formatting your list by simply grabbing the generic Substring status json from the GitHub library of 80+ list formatting script samples available to you today?

Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• SharePoint List Formatting Samples | https://sharepoint.github.io/sp-dev-list-formatting/
• Generic substring status formatting sample | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/generic-substring-status
• Doc Column formatting | http://aka.ms/spdev-column-formatting

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

2 participants
11 minutes

icons

settings

statuses

warrior

stuff

preview

theme

horse

upgrading

formatting

4 Feb 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on January 23, 2020.

In this 11-minute video, Chris Kent, Microsoft MVP and Office 365 Practice Lead at DMI, previews how a SharePoint list in a Microsoft Teams tab can be formatted in SharePoint from within the Teams tab. Note: This new formatting capability presently available only in the Teams Targeted Release, looks quite promising for SR. Formatting in SharePoint is fully supported in Teams with few exceptions. In the PnP list formatting repo on GitHub, there are 70 list column and view formatting code samples that one can simply copy and paste into the list’s column settings. Also shown in this demo was the addition of deep links - into chat, into tabs, into scheduling dialog, etc., in a list column.

Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Docs: https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/deep-links#deep-linking-to-a-chat
• Sample: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/multi-person-teams-chat-link
• Sample: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/multi-person-facepile

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

1 participant
11 minutes

sharepoint

formatting

horses

settings

bringing

changes

note

presentation

collaborative

mess

13 Jan 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on December 19, 2019.

In this 15-minute video, PnP Community members David Warner, April Dunnam and Hugo Bernier, share their work on the SVG (Scalable Vector Graphics) Iconography Factory (graphics library) for list formatting. The SVG Factory makes it very simple to get and insert an icon’s SVG design path into the JSON of the list formatting definition. This is a low overhead solution since only a single icon rather than an entire collection of icons is loaded into the page. Also, this is a shared – open source plug-in architecture created by/for the community. Feel free to adopt and add your own icons.

Presenters:
• David Warner (Catapult Systems) | @DavidWarnerII
• April Dunnam (Microsoft) | @aprildunnam
• Hugo Bernier (Point Alliance) @bernierh

Supporting materials:
• Sample code: Coming soon. Look for "SVG Factory." It will be live at https://github.com/SharePoint/sp-dev-solutions Repo...
• Demo: How to use Deep Path - Drawing SVGs conditionally with SharePoint List Formatting - https://www.youtube.com/watch?v=_-Q_itkE0Uk | Chris Kent | @theChrisKent
• Library component demos from David Warner - http://warner.digital/tag/sharepoint-library-components/ | David Warner | @DavidWarnerII

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp

3 participants
15 minutes

svg

vg

iconography

icon

markup

showing

application

animated

version

scalable

9 Jan 2020

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on January 9, 2020.

In this 13-minute video, Chris Kent expands upon his previously delivered formatting demos to show using UI Fabric icons for list column and view formatting. List formatting tips for adding a Fabric icon to a field. Use conditional formatting statements to determine which icon/color to display based on information in fields of the column being and/or based on data in adjacent fields.

Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• List formatting samples: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/generic-icon-overlay
• UI Fabric Icons: https://uifabricicons.azurewebsites.net/
• Full documentation: https://aka.ms/spdev-column-formatting

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

1 participant
13 minutes

icons

icon

ui

formatting

style

demos

settings

fancy

fabric

css

10 Dec 2019

This PnP community demo is taken from the monthly SharePoint Developer/Engineering update community call recorded on December 10, 2019.

In this 10-minute video, Chakkaradeep Chandran - Microsoft Program Manager for OneDrive & SharePoint, demonstrates using list conditional formatting and simple forms customization capabilities to organize the things your teams care about. Conditions are defined using Excel style formulas or expressions. These capabilities were recently announced at Microsoft Ignite 2019.

Presenter: Chakkaradeep Chandran (Microsoft) | @chakkaradeep

Supporting materials:
• Microsoft Ignite 2019 session: SharePoint updates for teamwork: Sites, pages, lists, and libraries | http://aka.ms/MicrosoftIgnite2019/STR30
• Column and view formatting samples: http://aka.ms/list-formatting

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp

1 participant
10 minutes

customization

customizations

automations

editing

data

reordering

users

json

inducers

simple

28 Nov 2019

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on November 28, 2019.

In this 8-minute video, Chris Kent show how to configure the List view web part and Embed web part to work together like an application that allows the user to select and display documents, photos, videos, etc., in the right pane of a web page.

Presenter: Chris Kent (DMI) | @theChrisKent

Open-source community samples around column and view formatting - https://sharepoint.github.io/sp-dev-list-formatting/

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

1 participant
8 minutes

turkeys

turkey

thanksgiving

gobble

great

stuff

warrior

thankful

god

video

17 Oct 2019

This community demo is taken from the SharePoint General SIG community call recording on 17th of October 2019. In this video, Chris Kent (DMI) is showing how to get started on creating column and view formatting definitions for SharePoint lists.

Presenter - Chris Kent (DMI) @thechriskent

Official documentation for the column formatting - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Open-source community samples of different column and view formatting samples - https://sharepoint.github.io/sp-dev-list-formatting/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

2 participants
9 minutes

tweaking

editing

status

format

settings

jason

repo

add

help

tokens

3 Oct 2019

This community call demo is taken from the SharePoint General SIG community call recording on 3rd of October 2019. In this video, Chris Kent (DMI) is showing how to use new rounding and data functions within your column and view formatting solutions.

Presenter - Chris Kent (DMI) @theChrisKent

You can find more details around SharePoint column and view formatting from the following article - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

You can find tens of open-source community samples around column and view formatting from following location - https://sharepoint.github.io/sp-dev-list-formatting/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

1 participant
8 minutes

comrades

today

provide

showing

add

column

memoriam

resume

care

writing

5 Sep 2019

This community call demo is taken from the SharePoint General SIG community call recording on 5th of September 2019. In this video, RK Menon (Microsoft) introduces new tile view layout, which can be configured with view formatting JSON configurations.

Presenter - RK Menon (Microsoft) @rkmenons1

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-5th-of-september-2019/

More details on the column formatting - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Open-source samples for column and view formatting - https://sharepoint.github.io/sp-dev-list-formatting/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

3 participants
12 minutes

views

sharepoint

overview

users

modern

display

formats

lists

microsoft

readable

22 Aug 2019

This community call demo is taken from the SharePoint General SIG community call recording on 22nd of August 2019. In this video, Chris Kent (DMI) demonstrates how column and view formatting works with quick editing and the experience with the list copying.

Presenter - Chris Kent (DMI) - @thechriskent

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-22nd-of-august-2019/

More details on the column formatting - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Open-source samples for column and view formatting - https://sharepoint.github.io/sp-dev-list-formatting/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

2 participants
8 minutes

repo

sharepoint

provisioning

format

docs

revamp

sample

pnp

execute

guide

22 Aug 2019

This community call demo is taken from the SharePoint General SIG community call recording on 22nd of August 2019. In this video, Chris Kent (DMI) demonstrates how column and view formatting works with quick editing and the experience with the list copying.

Presenter - April Dunnam (ThriveFast) - @aprildunnam

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-22nd-of-august-2019/

More details on the column formatting - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Open-source samples for column and view formatting - https://sharepoint.github.io/sp-dev-list-formatting/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

2 participants
13 minutes

sharepoint

planner

display

task

layout

office

standpoint

apps

flow

tweak

8 Aug 2019

This community call demo is taken from the SharePoint General SIG community call recording on 8th of August 2019. In this video, Chris Kent (DMI) demonstrates how column and view formatting works with quick editing and the experience with the list copying.

Presenter - Chris Kent (DMI) - @thechriskent

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-7th-of-august-2019/

More details on the column formatting - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Open-source samples for column and view formatting - https://github.com/SharePoint/sp-dev-list-formatting

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

2 participants
9 minutes

editing

edit

formatting

formatter

updated

formats

customizers

changes

version

stuff

18 Jul 2019

This community demo is taken from the SharePoint Summer camp community call on on 18th of July 2019. In this video, Chris Kent (DMI) is showing how to conditionally draw SVGs with list formatting based on item values..

Presenter - Chris Kent (DMI) @theChrisKent

You can find more details around SharePoint column and view formatting from the following article - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

You can find tens of open-source community samples around column and view formatting from following location - https://sharepoint.github.io/sp-dev-list-formatting/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

1 participant
6 minutes

format

editing

settings

column

data

drag

great

horses

pie

warrior

13 Jun 2019

This community call demo is taken from the SharePoint General SIG community call recording on 13th of June 2019. In this video, Chris Kent (DMI) demonstrates how to use @thumbnail definitions in your column and view formatting json instructions.

Presenter - Chris Kent (DMI) - @thechriskent

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-13th-of-june-2019/

More details on the column formatting - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Open-source samples for column and view formatting - https://github.com/SharePoint/sp-dev-list-formatting

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

2 participants
7 minutes

preview

tooltip

view

format

thumbnails

settings

small

edit

folder

microsoft

16 May 2019

This community call demo is taken from the SharePoint Development monthly community call recording on 16th of May 2019. In this video, Chris Kent (DMI) demonstrates how to use SVGs in your column or view formatting json definitions.

Presenter - Chris Kent (DMI) - @thechriskent

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/

More details on the column formatting - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Open-source samples for column and view formatting - https://github.com/SharePoint/sp-dev-list-formatting

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

3 participants
10 minutes

icons

format

deploying

balloons

warrior

theme

stuff

fabric

anymore

horses

2 May 2019

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 2nd of May 2019. In this video, Chris Kent (DMI) shows how to customize the Flow Panel with List Formatting actionParams.

Presenter - Chris Kent (DMI) - @thechriskent

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-2nd-of-may-2019/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

2 participants
8 minutes

flow

flows

experiment

functionality

launch

updated

introduced

sewage

runs

twitter

8 Apr 2019

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 4th of April 2019. In this video, Chris Kent (DMI) shows how to use forEach and loopIndex to create awesome looking list views

Presenter - Chris Kent (DMI) - @thechriskent

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-4th-of-april-2019/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

2 participants
13 minutes

multichoice

nested

creating

column

think

initiatives

tip

container

schema

selecting

21 Mar 2019

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 21st of March 2019 (streamed live from MVP Summit). In this video, Chris Kent (DMI) shows how to create a view formatting definition, which supports alternating row styles.

Presenter - Chris Kent (DMI) - @thechriskent

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-21st-of-march-2019/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

3 participants
11 minutes

editing

users

manage

recap

settings

chat

flow

come

prompt

column

7 Mar 2019

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 7th of March 2019. In this video, Chris Kent (DMI) shows how to create a view formatting definition, which supports alternating row styles.

Presenter - Chris Kent (DMI) - @thechriskent

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-7th-of-march-2019

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

1 participant
8 minutes

finally

modulus

stuff

values

add

indexes

row

preview

exciting

showing

21 Feb 2019

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 21st of February 2019. In this video, Chris Kent (DMI) shows how the column formatting design mode works in the modern list UIs.

Presenter - Chris Kent (DMI) - @thechriskent

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

1 participant
7 minutes

wizards

formatting

columns

customizations

predefined

ui

color

data

design

mode

7 Feb 2019

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 7th of February 2019. In this video Chris Kent (DMI) shows how to use indexOf, toLowerCase, join and length operators in the list formatting definitions.

Presenter - Chris Kent (DMI) - @thechriskent

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

1 participant
9 minutes

stuff

format

index

manage

column

note

horses

warrior

post

code

26 Jan 2019

Recurrent column and view formatting tip demo taken from the SharePoint dev Special Interest Group recording at 24th of January 2019. This time Chris shows how to apply column formatting to multi-line columns?

Presenter - Chris Kent (DMI) - @theChrisKent

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

1 participant
4 minutes

format

incorporate

edit

paste

settings

horses

column

office

speeches

concerned

14 Jan 2019

Recurrent column and view formatting tip demo taken from the SharePoint dev Special Interest Group recording at 10th of January 2019. This time Chris shows how to use the @currentWeb and what's the benefits of this string function?

Presenter - Chris Kent (DMI) - @theChrisKent

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

1 participant
8 minutes

sharepoint

formats

link

formatting

editing

browser

provide

folder

tip

reuse

27 Dec 2018

Column and view formatting tips demo taken from the SharePoint dev Special Interest Group recording at 27th of December 2018.

Presenter - Chris Kent (DMI)

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

1 participant
19 minutes

designs

themes

construing

styles

formatting

edit

coding

color

configured

twitter

Microsoft 365 Community / Column and view formatting tips

17 Aug 2023

3 Aug 2023

20 Jul 2023

13 Apr 2023

30 Mar 2023

16 Feb 2023

2 Feb 2023

8 Dec 2022

24 Nov 2022

15 Sep 2022

8 Sep 2022

18 Aug 2022

4 Aug 2022

21 Jul 2022

7 Jul 2022

29 Jun 2022

23 Jun 2022

31 May 2022

27 May 2022

28 Apr 2022

14 Apr 2022

14 Apr 2022

3 Mar 2022

20 Jan 2022

10 Jan 2022

29 Nov 2021

25 Nov 2021

25 Nov 2021

7 Oct 2021

19 Aug 2021

5 Aug 2021

10 Jun 2021

29 Apr 2021

15 Apr 2021

1 Apr 2021

31 Mar 2021

4 Mar 2021

22 Feb 2021

21 Jan 2021

10 Dec 2020

12 Nov 2020

12 Nov 2020

29 Oct 2020

17 Sep 2020

8 Sep 2020

2 Sep 2020

11 Aug 2020

6 Aug 2020

25 Jun 2020

30 Apr 2020

16 Apr 2020

14 Apr 2020

19 Mar 2020

19 Mar 2020

5 Mar 2020

20 Feb 2020

6 Feb 2020

4 Feb 2020

13 Jan 2020

9 Jan 2020

10 Dec 2019

28 Nov 2019

17 Oct 2019

3 Oct 2019

5 Sep 2019

22 Aug 2019

22 Aug 2019

8 Aug 2019

18 Jul 2019

13 Jun 2019

16 May 2019

2 May 2019

8 Apr 2019

21 Mar 2019

7 Mar 2019

21 Feb 2019

7 Feb 2019

26 Jan 2019

14 Jan 2019