SPFX-FIELD-EXTENSION
React Document Reporting Field Customizer
![]()
A React-based SPFx application for monitoring user activity within SharePoint documents.
Open this sample in the gallery (popup panel): Open in gallery
Source: https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-reporting
Animated Progress Field
![]()
Displays an animated progress bar component
Open this sample in the gallery (popup panel): Open in gallery
Source: https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-field-animated-progress
PnP File Type Renderer
![]()
This field customizer shows how to use PnP FieldFileTypeRenderer controls.
Open this sample in the gallery (popup panel): Open in gallery
Source: https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-pnp-file-type-renderer
PnP Field Renderer Helper
![]()
This field customizer shows how to use PnP FieldRendererHelper utility.
Open this sample in the gallery (popup panel): Open in gallery
Source: https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-pnp-field-renderer-helper
Field Attachment Info
![]()
This field customizer will display the attachment related information for a listitem.
Open this sample in the gallery (popup panel): Open in gallery
Source: https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-attachment-info
Item Order
![]()
Sample SharePoint Framework field customizer extension that enables reordering of list items through intuitive drag and drop directly in your list view. Demonstrates the use of jQuery and jQuery UI, custom property JSON, and PnPJS Batching.
Open this sample in the gallery (popup panel): Open in gallery
Source: https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/jquery-field-itemorder
Displaying the current user permission with PNPJs
![]()
This sample shows how to use PNPJs to get the current users permission on the specific list item. Then a corresponding icon and text is shown in the field. For this sample I’m using simplified roles, so the code is is only checking for edit or read permissions.
Open this sample in the gallery (popup panel): Open in gallery
Source: https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-user-permission
Weather SharePoint Framework field customizer
![]()
Sample SharePoint Framework field customizer showing weather conditions for the given location.
Open this sample in the gallery (popup panel): Open in gallery
Source: https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-field-weather
Field Customiser sample using Text Analytics API
![]()
This sample shows how to use the Text Analytics API (Cognitive Services) to render a sentiment icon based on the text of a field in the List. The language is also auto-detected using the API, so it works with text based in any language supported by the API.
Open this sample in the gallery (popup panel): Open in gallery
Source: https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-text-analytics-api
Toggle Field Customizer
![]()
In this sample is possible to see how to implement Office UI Fabric React Toggle for the field yes/no through SPFx Extensions Field Customizers to modify in a quick way (inline editing) a list without opening the list item.
Open this sample in the gallery (popup panel): Open in gallery
Source: https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-toggle
Slider Field Customizer
![]()
The sample illustrates how to use Office UI Fabric React Slider in Field Customizer with permissions-base inline editing
Open this sample in the gallery (popup panel): Open in gallery
Source: https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-slider
Priority Field SharePoint Framework field customizer
![]()
Sample SharePoint Framework field customizer that shows how to apply conditional color formatting to the values in a Priority field based on their value.
Open this sample in the gallery (popup panel): Open in gallery
Source: https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-field-taskpriority
Conditional formatting SharePoint Framework field customizer
![]()
Sample SharePoint Framework field customizer that applies Excel-like conditional formatting to numeric fields based on their values.
Open this sample in the gallery (popup panel): Open in gallery
Source: https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-field-conditionalformatting