Column formatting

Column Formatter in SharePoint Online. You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements.

• https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting
• List formatting
• https://pnp.github.io/List-Formatting/columnsamples/

Examples:

• SharePoint Column Formatting

PnP GitHub Samples:

	approval-buttons-setValue-status-user
	color-based-smiley-face
	comment-count
	currency-symbol-concatenation
	custom-hover-card
	date-check-blank-format
	date-compress-format
	date-difference
	date-monthly-emoji
	date-page-a-day-calendar
	date-range-format
	date-update-format
	file-thumbnail
	generic-approval-status-hover-card
	generic-calculator
	generic-centered-content
	generic-column-chart
	generic-comment-count
	generic-download-file-button
	generic-file-preview
	generic-filepicker
	generic-flow-status
	generic-gauge
	generic-hourglass
	generic-hyperlink-thumbnail
	generic-hyperlink-values
	generic-icon-overlay
	generic-issuestatus-pill
	generic-launch-powerapp
	generic-like-dislike-bar
	generic-like-unlike
	generic-likedby
	generic-link-to-parent-documentset
	generic-mailto-button
	generic-one-point-chart
	generic-open-file-as-pdf
	generic-project-management
	generic-right-align
	generic-rowactions
	generic-rowIndex-drawing
	generic-scheduling-link
	generic-socialpic
	generic-start-flow
	generic-start-flow-conditionally
	generic-staticmap
	generic-substring-status
	generic-svgicon-format
	generic-time-schedule
	generic-timeline
	generic-twitterpic
	generic-update-button
	generic-world-time
	generic-yearly-gantt-chart
	generic-youtube-thumbnail
	hyperlink-click-count
	image-lightbox
	location-address
	location-bing-maps
	location-weather
	managed-metadata-tag-icon
	multi-choice-foreach
	multi-choice-icons
	multi-choice-links
	multi-choice-workcategory-pill
	multi-lookup-projected-field
	multi-person-currentuser
	multi-person-facepile
	multi-person-mailto
	multi-person-reaction
	multi-person-teams-chat-link
	multi-person-unique-reaction
	number-abs-tolerance-comparison
	number-background-color-shading
	number-battery
	number-circle-in-circle
	number-conditional-format
	number-conditional-progress-color
	number-countup-countdown
	number-data-bar
	number-data-bar-multi-color
	number-decimal-binary
	number-doughnut-chart
	number-emoji-progressbar
	number-gauge
	number-gradation
	number-heart-in-heart
	number-heart-shading
	number-icon-progressbar
	number-level-bar
	number-localization
	number-piechart
	number-quiz-smiley-face
	number-star-rating
	number-trending-icon
	number-version-publish-status
	number-volume
	person-currentuser
	person-hover-card
	person-localization
	person-mailto
	person-roundimage-format
	person-teams-call-format
	picture-roundimage-format
	promotedstate-demote-news
	text-bing-map
	text-conditional-format
	text-contains
	text-course-registration
	text-expand-collapse-format
	text-isbn-image
	text-local-image
	text-local-link
	text-ryg-status-indicator
	text-startswith-callingcodes
	text-strikethrough
	text-wrap-format
	yesno-checkbox
	yesno-checkmark
	yesno-checkmark-format
	yesno-icon-color
	yesno-roundedfill-format
	yesno-toggle-format