SPFX-FIELD-EXTENSION

React Document Reporting Field Customizer

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

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

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

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

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

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

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

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

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

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

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

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

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