PnP SPFx Property Controls

Choosing between the two term picker controls depends on your term store size and specific requirements:

PropertyFieldEnterpriseTermPicker

• Use Case: "Enterprise" scenarios with large term stores containing many groups, term sets, and terms.
• Mechanism: Loads term sets and terms on demand (only when expanded in the tree view).
• Dependencies: Uses @pnp/sp-taxonomy (from @pnp/pnpjs), which increases the bundle/package size.
• Key Feature: Supports requesting term labels.

PropertyFieldTermPicker

• Use Case: Small to medium-sized term stores.
• Mechanism: Loads all groups and term sets from the term service during the initial request.
• Dependencies: Lightweight; does not require additional taxonomy libraries.
• Limitation: Does not support on-demand loading or term labels.

Recommendation: Use PropertyFieldTermPicker unless you specifically require on-demand loading for large datasets or need term labels.

The PropertyFieldContentTypePicker control provides a dropdown in the SharePoint Framework property pane that allows users to select a Content Type. It can automatically retrieve Content Types from either the current SharePoint site or a specific SharePoint list provided via a listId.

import {
  PropertyFieldContentTypePicker,
  PropertyFieldContentTypeOrderBy
} from '@pnp/spfx-property-controls/lib/PropertyFieldContentTypePicker';

// In your web part's groupFields configuration:
PropertyFieldContentTypePicker('contentType', {
  label: 'Select a Content Type',
  context: this.context,
  selectedContentType: this.properties.contentType,
  disabled: false,
  orderBy: PropertyFieldContentTypeOrderBy.Name,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  properties: this.properties,
  onGetErrorMessage: null,
  deferredValidationTime: 0,
  key: 'contentTypePickerFieldId'
})

The PropertyPaneMarkdownContent control allows you to embed Markdown content directly into a SharePoint Framework (SPFx) property pane. This is useful for providing user guidance, documentation, or formatted text that is difficult to create with standard controls. It supports arbitrary HTML and allows you to override the rendering of specific HTML tags with custom React components or CSS classes.

Setup Steps

1. Ensure @pnp/spfx-property-controls is installed.
2. Import the control:

import { PropertyPaneMarkdownContent } from '@pnp/spfx-property-controls/lib/PropertyPaneMarkdownContent';

3. Define your Markdown string.
4. Add the control to your groupFields in the web part property pane configuration.

Important: Indentation Warning

Markdown parsers interpret four spaces of indentation as a code block. To avoid accidentally rendering your entire content as a code block, ensure your Markdown string is not indented within the template literal.

// GOOD: No leading indentation on the content lines
const md: string = `To get started select an items from the library.
    
You can pick any items from the list.`;

// BAD: Indented content will be treated as a code block
const md: string = `
    To get started select an items from the library.
    
    You can pick any items from the list.`;

import { PropertyPaneMarkdownContent } from '@pnp/spfx-property-controls/lib/PropertyPaneMarkdownContent';

const md: string = `
### This is Markdown

[Markdown](http://daringfireball.net/projects/markdown/) lets you write content in a really natural way.

  * You can have lists, like this one
  * Make things **bold** or *italic*
  * Embed snippets of \`code\`
  * Create [links](/)
  * ...

Also supports GitHub-flavored Markdown checklists

- [x] Checklist item 1
- [x] Checklist item 2
- [ ] Checklist item 3

<small>Sample content borrowed with thanks to [markdown-to-jsx](https://probablyup.com/markdown-to-jsx/) ❤️</small>`;

// In your property pane configuration:
PropertyPaneMarkdownContent({
  markdown: md,
  key: 'markdownSample'
})

The PropertyFieldIconPicker is a property pane control that allows users to search for and select an icon from the office-ui-fabric-react library.

Key Behaviors:

• The picker opens in a separate panel (or dialog) to maintain readability of the icon list.
• It currently supports single icon selection only.
• It does not display the selected icon outside of the picker panel itself.

To use it, ensure you have installed @pnp/spfx-property-controls and import the module directly from the library path.

import { PropertyFieldIconPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldIconPicker';

// Inside your property pane implementation:
PropertyFieldIconPicker('iconPicker', {
  currentIcon: this.properties.iconPicker,
  key: "iconPickerId",
  onSave: (icon: string) => { 
    console.log(icon); 
    this.properties.iconPicker = icon; 
  },
  onChanged: (icon: string) => { 
    console.log(icon); 
  },
  buttonLabel: "Icon",
  renderOption: "panel",
  properties: this.properties,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  label: "Icon Picker"              
})

The PropertyFieldViewPicker control allows users to select a SharePoint list view from a dropdown in the SPFx property pane. It automatically retrieves available views for a specified list ID.

To implement it, follow these steps:

1. Install the dependency: Ensure @pnp/spfx-property-controls is installed in your project.
2. Import the control: Import PropertyFieldViewPicker and the PropertyFieldViewPickerOrderBy enum.
3. Prepare properties: Define a property in your web part's interface to store the selected view ID (e.g., view: string).
4. Configure the property pane: Add the control to your groupFields configuration, providing the listId (usually retrieved from a PropertyFieldListPicker) and the context of the web part.

import { PropertyFieldViewPicker, PropertyFieldViewPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldViewPicker';

// Inside your web part's property pane configuration:
PropertyFieldViewPicker('view', {
  label: 'Select a view',
  listId: this.properties.list, // The ID of the list to fetch views from
  selectedView: this.properties.view, // The current stored view ID
  orderBy: PropertyFieldViewPickerOrderBy.Title,
  onPropertyChange: this.onPaneFieldChanged.bind(this),
  properties: this.properties,
  context: this.context,
  key: 'viewPickerFieldId'
})