SharePoint Framework Property Controls

https://pnp.github.io/sp-dev-fx-property-controls/
Admin
Provides developers with a set of reusable property pane controls for use in SharePoint Framework...
Tokens:27,154
Snippets:391
Trust Score:9.7
Update:4 months ago
Show doc for...
Tokens:
Raw
### Serve MkDocs Documentation Locally

Source: https://pnp.github.io/sp-dev-fx-property-controls/guides/mpa

Starts the local web server for MkDocs to view documentation. Ensure MkDocs and the Material theme are installed first.

```bash
mkdocs serve
```

--------------------------------

### Install Beta Release using npm

Source: https://pnp.github.io/sp-dev-fx-property-controls/beta

Use this command to install the latest beta version of the @pnp/spfx-property-controls package. This command ensures you are testing the most recent development build.

```bash
npm install @pnp/spfx-property-controls@next --save

```

--------------------------------

### Install Property Controls Dependency

Source: https://pnp.github.io/sp-dev-fx-property-controls

Install the @pnp/spfx-property-controls package to your project using npm. Use --save --save-exact for precise versioning.

```bash
npm install @pnp/spfx-property-controls --save --save-exact

```

--------------------------------

### Install Global Heft Dependency

Source: https://pnp.github.io/sp-dev-fx-property-controls/guides/mpa

Installs the Heft build system globally. Check if it's already installed using `npm list -g @rushstack/heft`.

```bash
npm install -g @rushstack/heft
```

--------------------------------

### Serve Project Locally

Source: https://pnp.github.io/sp-dev-fx-property-controls/guides/mpa

Starts the project development server. This command serves the project and allows for local testing.

```bash
npm run start
```

--------------------------------

### PropertyFieldButton Example Usage

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldButton

Demonstrates how to add the PropertyFieldButton control to the groupFields of a web part's property pane configuration. This example shows basic configuration including text, key, click handler, and primary button status.

```typescript
PropertyFieldButton("", {
      text:"Button",
      key:"buttonID",
      disabled:false,
      className:className,
      styles:styles,
      onClick:()=>{alert("Button Clicked")},
      iconProps:iconProps,
      isPrimary:true,
      isVisible:true

  })
```

--------------------------------

### Object Array for Items

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldOrder

Example of an array of objects that can be used with the PropertyFieldOrder control.

```json
[
  {"text": "Cat", "iconName": "Cat"},
  {"text": "Pig", "iconName": "Savings"},
  {"text": "Human", "iconName": "Running"},
  {"text": "Robot", "iconName": "Robot"},
  {"text": "Dog", "iconName": "FangBody"}
]
```

--------------------------------

### Collection Data Example

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCollectionData

Illustrates the structure of data returned by the PropertyFieldCollectionData control based on defined fields.

```json
[
  {"Title":"Person","Lastname":"1","Age":"42","City":"helsinki","Sign":true},
  {"Title":"Person","Lastname":"2","Age":"42","City":"helsinki","Sign":true}
]
```

--------------------------------

### Configure PropertyPaneWebPartInformation

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyPaneWebPartInformation

Add the PropertyPaneWebPartInformation control to your web part's property pane configuration. This example includes a description, a 'more info' link, and an embedded video.

```typescript
PropertyPaneWebPartInformation({
  description: `This is a <strong>demo webpart</strong>, used to demonstrate all the <a href="https://aka.ms/sppnp">PnP</a> property controls`,
  moreInfoLink: `https://pnp.github.io/sp-dev-fx-property-controls/`,
  videoProperties: {
    embedLink: `https://www.youtube.com/embed/d_9o3tQ90zo`,
    properties: { allowFullScreen: true}
  },
  key: 'webPartInfoId'
})
```

--------------------------------

### Render Markdown as Block Content

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyPaneMarkdownContent

Example of Markdown content that will be rendered as block elements, typically within a `<div>` or `<p>` tag.

```markdown
## This is a block element

```

--------------------------------

### Import PropertyFieldPassword

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldPassword

Import the PropertyFieldPassword control from the @pnp/spfx-property-controls library. Ensure you have the dependency installed.

```typescript
import { PropertyFieldPassword } from '@pnp/spfx-property-controls/lib/PropertyFieldPassword';

```

--------------------------------

### Configure PropertyPane with BrandFontPicker

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldBrandFontPicker

Add the PropertyFieldBrandFontPicker to your web part's property pane configuration. This example includes font preview.

```typescript
PropertyFieldBrandFontPicker('brandFont', {
  label: 'Brand Font',
  initialValue: this.properties.brandFont,
  onSelectionChanged: (fontToken) => {
    this.properties.brandFont = fontToken.value;
    this.onPropertyPaneFieldChanged('brandFont', fontToken.value);
  },
  context: this.context,
  showPreview: true,
  key: 'brandFontFieldId'
})
```

--------------------------------

### Render Markdown as Inline Content

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyPaneMarkdownContent

Example of Markdown content that will be rendered as inline elements, typically within a `<span>` tag.

```markdown
This is an _inline_ element

```

--------------------------------

### Syncing Local Dev Branch

Source: https://pnp.github.io/sp-dev-fx-property-controls/guides/contributing

Ensures your local 'dev' branch is up-to-date with the upstream repository before starting contributions.

```git
# assuming you are in the folder of your locally cloned fork....
git checkout dev

# assuming you have a remote named `upstream` pointing to the official **sp-dev-fx-property-controls** repo
git fetch upstream

# update your local dev to be a mirror of what's in the main repo
git pull --rebase upstream dev

```

--------------------------------

### Add Folder Picker to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldFolderPicker

Configure the PropertyFieldFolderPicker control within the `groupFields` of your web part's property pane. This example shows how to set the label, context, and enable folder creation.

```typescript
PropertyFieldFolderPicker('folderPicker', {
    context: this.context,
    onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
    properties: this.properties,
    key: "folderPickerId",
    label: "Folder Picker",
    selectedFolder: this.properties.folderPicker,
    canCreateFolders: true,
    onSelect: ((folder: IFolder) => { console.log(folder); this.properties.folderPicker = folder; }),
    rootFolder: {
        Name: "Documents",
        ServerRelativeUrl: "/sites/testSiteCollection/Shared Documents"
    },
})
```

--------------------------------

### Use PropertyFieldIconPicker in Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldIconPicker

Integrate the IconPicker control into your web part's property pane configuration. This example shows how to set up the control with basic properties like current icon, save handler, and labels.

```typescript
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"              
                }),
```

--------------------------------

### Custom Rendering for Collection Field

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCollectionData

Provides an example of how to implement custom rendering for a field within the PropertyFieldCollectionData control, including input handling and error reporting.

```typescript
{
  id: "customFieldId",
  title: "Custom Field",
  type: CustomCollectionFieldType.custom,
  onCustomRender: (field, value, onUpdate, item, itemId, onError) => {
    return (
      React.createElement("div", null,
        React.createElement("input", { key: itemId, value: value, onChange: (event: React.FormEvent<HTMLInputElement>) => {
          onUpdate(field.id, event.currentTarget.value);
          if (event.currentTarget.value === "error") {
            onError(field.id, "Value shouldn't be equal to error");
          } else {
            onError(field.id, "");
          }
        }}), " 🎉"
      )
    );
  }
}
```

--------------------------------

### Define Web Part Property

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldGuid

Define the string property in your web part's interface to store the GUID value.

```typescript
export interface IPropertyControlsTestWebPartProps {
  guid: string;
}

```

--------------------------------

### Default HTML Rendering in Markdown

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyPaneMarkdownContent

This example shows how Markdown with raw HTML elements is rendered by default. The control parses and attempts to render HTML tags like <hr/>.

```markdown
<hr/>
Text between rulers
<hr/>


```

--------------------------------

### Add PropertyFieldSpinButton to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldSpinButton

Configure and add the PropertyFieldSpinButton control to your web part's property pane configuration. This example shows how to set various properties like label, initial value, min/max, step, and icons.

```typescript
PropertyFieldSpinButton('spinValue', {
  label: 'Spin Value',
  initialValue: this.properties.spinValue,
  onPropertyChange: this.onPropertyPaneFieldChanged,
  properties: this.properties,
  disabled: false,
  suffix: 'px',
  min: 0,
  max: 5,
  step: 0.25,
  decimalPlaces: 2,
  incrementIconName: 'CalculatorAddition',
  decrementIconName: 'CalculatorSubtract',
  key: 'spinButtonFieldId'
})
```

--------------------------------

### Add PropertyFieldSwatchColorPicker to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldSwatchColorPicker

Configure and add the PropertyFieldSwatchColorPicker control to the web part's property pane configuration. This example shows how to set the label, initial selected color, and define the available color options.

```typescript
PropertyFieldSwatchColorPicker('color', {
  label: 'Swatch Color',
  selectedColor: this.properties.color,
  colors: [
    { color: '#ffb900', label: 'Yellow' },
    { color: '#fff100', label: 'Light Yellow' },
    { color: '#d83b01', label: 'Orange'},
    { color: '#e81123', label: 'Red' },
    { color: '#a80000', label: 'Dark Red'},
    { color: '#5c005c', label: 'Dark Magenta' },
    { color: '#e3008c', label: 'Light Magenta'},
    { color: '#5c2d91', label: 'Purple'},
    { color: '#0078d4', label: 'Blue'},
    { color: '#00bcf2', label: 'Light Blue' },
    { color: '#008272', label: 'Teal'},
    { color: '#107c10', label: 'Green'},
    { color: '#bad80a', label: 'Light Green' },
    { color: '#eaeaea'},
    { color: 'black', label: 'Black'},
    { color: '#333333', label: 'Neutral'},
    { color: 'rgba(102, 102, 102, 0.5)', label: 'Half Gray' }
  ],
  onPropertyChange: this.onPropertyPaneFieldChanged,
  properties: this.properties,
  key: 'colorFieldId'
})
```

--------------------------------

### Add PropertyFieldColorPicker to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldColorPicker

Configure the PropertyFieldColorPicker control within the `groupFields` of your web part's property pane. This example shows common configuration options.

```typescript
PropertyFieldColorPicker('color', {
  label: 'Color',
  selectedColor: this.properties.color,
  onPropertyChange: this.onPropertyPaneFieldChanged,
  properties: this.properties,
  disabled: false,
  debounce: 1000,
  isHidden: false,
  alphaSliderHidden: false,
  style: PropertyFieldColorPickerStyle.Full,
  iconName: 'Precipitation',
  key: 'colorFieldId'
})
```

--------------------------------

### Add PropertyFieldSearch to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldSearch

Configure the PropertyFieldSearch control within the `groupFields` of your web part's property pane configuration. This example shows how to set a placeholder, initial value, and event handlers.

```typescript
PropertyFieldSearch("searchValue", {
      key: "search",
      placeholder: 'Search libraries',
      value: this.properties.searchValue,
      onSearch: this._onSearch,
      styles: { root: { margin: 10 } }
    }),
```

--------------------------------

### Add PropertyFieldPeoplePicker to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldPeoplePicker

Configure and add the PropertyFieldPeoplePicker control to the web part's property pane. This example shows how to set the label, initial data, allow duplicates, principal types, and other configuration options.

```typescript
PropertyFieldPeoplePicker('people', {
  label: 'PropertyFieldPeoplePicker',
  initialData: this.properties.people,
  allowDuplicate: false,
  principalType: [PrincipalType.Users, PrincipalType.SharePoint, PrincipalType.Security],
  onPropertyChange: this.onPropertyPaneFieldChanged,
  context: this.context,
  properties: this.properties,
  onGetErrorMessage: null,
  deferredValidationTime: 0,
  key: 'peopleFieldId',
  searchTextLimit: 3
})

```

--------------------------------

### Add PropertyFieldFilePicker to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldFilePicker

Integrate the PropertyFieldFilePicker control into your web part's property pane configuration by adding it to the groupFields array. This example shows basic configuration including context, callbacks, and labels.

```typescript
PropertyFieldFilePicker('filePicker', {
    context: this.context,
    filePickerResult: this.properties.filePickerResult,
    onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
    properties: this.properties,
    onSave: (e: IFilePickerResult) => { console.log(e); this.properties.filePickerResult = e;  },
    onChanged: (e: IFilePickerResult) => { console.log(e); this.properties.filePickerResult = e; },
    key: "filePickerId",
    buttonLabel: "File Picker",
    label: "File Picker",                  
})
```

--------------------------------

### Add PropertyFieldMonacoEditor to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldMonacoEditor

Configure the PropertyFieldMonacoEditor control within the groupFields of your web part's property pane configuration. This example sets the key, initial value, enables the minimap, specifies JSON as the language, and shows line numbers.

```typescript
PropertyFieldMonacoEditor('monacoEditor', {
      key: 'monacoEditor',
      value: this.properties.monacoEditorValue,
      showMiniMap: true,
      onChange: this.monacoChange ,
      language:"json",
      showLineNumbers:true,
    }),
```

--------------------------------

### Serve Project with French Locale

Source: https://pnp.github.io/sp-dev-fx-property-controls/guides/mpa

Serves the project locally with the French language locale applied. This is useful for testing localized content.

```bash
npm run start --locale=fr-fr
```

--------------------------------

### Import PropertyPanePropertyEditor

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyPanePropertyEditor

Import the PropertyPanePropertyEditor control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyPanePropertyEditor } from '@pnp/spfx-property-controls/lib/PropertyEditor';
```

--------------------------------

### Import PropertyPaneWebPartInformation

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyPaneWebPartInformation

Import the PropertyPaneWebPartInformation control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
```

--------------------------------

### Add PropertyFieldGuid to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldGuid

Configure the property pane to include the PropertyFieldGuid control, binding it to the 'guid' property.

```typescript
PropertyFieldGuid('guid', {
  key: 'guid',
  label: "GUID",
  value: this.properties.guid
})

```

--------------------------------

### Import PropertyFieldFilePicker

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldFilePicker

Import the necessary modules for the PropertyFieldFilePicker control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyFieldFilePicker, IPropertyFieldFilePickerProps, IFilePickerResult } from "@pnp/spfx-property-controls/lib/PropertyFieldFilePicker";
```

--------------------------------

### Import PropertyPaneMarkdownContent

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyPaneMarkdownContent

Import the PropertyPaneMarkdownContent control from the @pnp/spfx-property-controls library.

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

--------------------------------

### Import PropertyFieldViewPicker

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldViewPicker

Import the necessary modules for the PropertyFieldViewPicker control and its ordering enum.

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

--------------------------------

### Extend Named HTML Codes to Unicode

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyPaneMarkdownContent

Customize the mapping of named HTML codes to their Unicode character equivalents using the `namedCodesToUnicode` option. This example adds mappings for '<=' and '>='.

```typescript
PropertyPaneMarkdownContent({
  markdown: `
One hundred is &le; than one thousand, but is &ge than fifty.`,
  key: 'markdownSample',
  options: {
    namedCodesToUnicode: {
        le: '\u2264',
        ge: '\u2265',
    }
  }}),
```

--------------------------------

### Import PropertyFieldSpinner

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldSpinner

Import the PropertyFieldSpinner control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyFieldSpinner} from '@pnp/spfx-property-controls/lib/PropertyFieldSpinner';
```

--------------------------------

### Configure PropertyFieldTextWithCallout

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldTextWithCallout

Add the PropertyFieldTextWithCallout control to your web part's property pane configuration. This example shows configuration for hover triggers and custom callout content.

```typescript
PropertyFieldTextWithCallout('textInfoHeaderValue', {
  calloutTrigger: CalloutTriggers.Hover,
  key: 'textInfoHeaderFieldId',
  label: 'Describe your PnP passion with few words',
  calloutContent: React.createElement('span', {}, 'You can describe your passion with such words as strong, cosmic, all-absorbing, etc.'),
  calloutWidth: 150,
  value: this.properties.textInfoHeaderValue
})
```

--------------------------------

### Import PropertyFieldBrandFontPicker

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldBrandFontPicker

Import the necessary control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyFieldBrandFontPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldBrandFontPicker';
```

--------------------------------

### Import PropertyFieldColorPicker

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldColorPicker

Import the necessary components for the PropertyFieldColorPicker control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';
```

--------------------------------

### Import PropertyFieldGrid Control

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldGrid

Import the PropertyFieldGrid control and IItem interface from the @pnp/spfx-property-controls library.

```typescript
import { PropertyFieldGrid, IItem} from '@pnp/spfx-property-controls/lib/PropertyFieldGrid';
```

--------------------------------

### Configure Localized Resources

Source: https://pnp.github.io/sp-dev-fx-property-controls

Add the localized resource path to your project's config/config.json file. This ensures that the property controls can load their language-specific strings.

```json
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"

```

--------------------------------

### Add PropertyFieldCodeEditor to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCodeEditor

Configure and add the PropertyFieldCodeEditor control to your web part's property pane configuration. This example sets up an HTML code editor.

```typescript
PropertyFieldCodeEditor('htmlCode', {
  label: 'Edit HTML Code',
  panelTitle: 'Edit HTML Code',
  initialValue: this.properties.htmlCode,
  onPropertyChange: this.onPropertyPaneFieldChanged,
  properties: this.properties,
  disabled: false,
  key: 'codeEditorFieldId',
  language: PropertyFieldCodeEditorLanguages.HTML,
  options: {
    wrap: true,
    fontSize: 20,
    // more options
  }
})

```

--------------------------------

### Import PropertyFieldSwatchColorPicker

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldSwatchColorPicker

Import the necessary modules for the PropertyFieldSwatchColorPicker control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyFieldSwatchColorPicker, PropertyFieldSwatchColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldSwatchColorPicker';
```

--------------------------------

### Override HTML Element with Custom React Component

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyPaneMarkdownContent

Integrate custom React elements into the Markdown content by using the `overrides` prop. This example shows how to render a `<MyCustomControl>` component.

```typescript
// Import your React element
import MyCustomControl from 'MyCustomControl';

...

PropertyPaneMarkdownContent({
  markdown: `
### This is a heading 3

You can override any HTML you want

<MyCustomControl sampleMessage='This is a sample message'/>
`,
  key: 'markdownSample',
  options: {
    overrides: {
      h3: { // Markdown equivalent of ###
        props: {
          className: "ms-font-xl ms-fontColor-neutralDark",
        },
      },
      // Override the React element
      MyCustomControl: MyCustomControl
    }
  }}),
```

--------------------------------

### Import PropertyFieldSpinButton

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldSpinButton

Import the PropertyFieldSpinButton control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyFieldSpinButton } from '@pnp/spfx-property-controls/lib/PropertyFieldSpinButton';
```

--------------------------------

### Add PropertyFieldListPicker to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldListPicker

Configure and add the PropertyFieldListPicker control to the `groupFields` of your web part's property pane configuration. This example shows a single list picker.

```typescript
PropertyFieldListPicker('lists', {
  label: 'Select a list',
  selectedList: this.properties.lists,
  includeHidden: false,
  orderBy: PropertyFieldListPickerOrderBy.Title,
  disabled: false,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  properties: this.properties,
  context: this.context,
  onGetErrorMessage: null,
  deferredValidationTime: 0,
  key: 'listPickerFieldId'
})
```

--------------------------------

### Import PropertyFieldSearch

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldSearch

Import the PropertyFieldSearch control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyFieldSearch } from '@pnp/spfx-property-controls/lib/PropertyFieldSearch';
```

--------------------------------

### Add PropertyFieldCheckboxWithCallout to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCheckboxWithCallout

Integrate the PropertyFieldCheckboxWithCallout control into your web part's property pane configuration. This example shows how to configure the callout trigger, content, and text.

```typescript
PropertyFieldCheckboxWithCallout('checkboxWithCalloutValue', {
  calloutTrigger: CalloutTriggers.Click,
  key: 'checkboxWithCalloutFieldId',
  calloutContent: React.createElement('p', {}, 'Check the checkbox to accept Application Terms and Conditions'),
  calloutWidth: 200,
  text: 'Accept terms and conditions',
  checked: this.properties.checkboxWithCalloutValue
})
```

--------------------------------

### Add PropertyFieldButtonWithCallout to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldButtonWithCallout

Integrate the PropertyFieldButtonWithCallout control into your web part's property pane configuration. This example shows how to configure the button to trigger the callout on click.

```typescript
PropertyFieldButtonWithCallout('fakeProperty', {
  calloutTrigger: CalloutTriggers.Click,
  key: 'buttonWithCalloutFieldId',
  calloutContent: React.createElement('p', {}, 'Tests connection to the database with the parameters listed above'),
  calloutWidth: 150,
  text: 'Test connection',
  onClick: () => { /* Code to test db connection */ }
})
```

--------------------------------

### Import PropertyFieldColumnPicker

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldColumnPicker

Import the necessary modules for the PropertyFieldColumnPicker control and its order-by options.

```typescript
import { PropertyFieldColumnPicker, PropertyFieldColumnPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldColumnPicker';
```

--------------------------------

### Microsoft Graph Permissions

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldTeamPicker

Configure Microsoft Graph permissions in `config/package-solution.json`. `Team.ReadBasic.All` and `Files.Read` are the minimum required permissions.

```json
{
  "solution": {
    "webApiPermissionRequests": [
      {
      "resource": "Microsoft Graph",
      "scope": "Team.ReadBasic.All"
    }, {
      "resource": "Microsoft Graph",
      "scope": "Files.Read"
    }]
  }
}
```

--------------------------------

### Disabling Raw HTML Parsing in Markdown

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyPaneMarkdownContent

This example demonstrates how to disable the parsing of raw HTML elements in Markdown content by setting `disableParsingRawHTML` to `true`. HTML tags are then rendered as escaped characters.

```markdown
&lt;hr/&gt;
Text between rulers
&lt;hr/&gt;


```

--------------------------------

### Import PropertyFieldMonacoEditor

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldMonacoEditor

Import the PropertyFieldMonacoEditor control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyFieldMonacoEditor } from '@pnp/spfx-property-controls/lib/PropertyFieldMonacoEditor';
```

--------------------------------

### Add PropertyFieldLinkWithCallout to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldLinkWithCallout

Configure and add the PropertyFieldLinkWithCallout control to your web part's property pane configuration. This example shows how to trigger the callout on click and display custom content.

```typescript
PropertyFieldLinkWithCallout('fakeProp', {
  calloutTrigger: CalloutTriggers.Click,
  key: 'linkWithCalloutFieldId',
  calloutContent: React.createElement('p', {}, 'Click the link to open a new page with Application Terms & Conditions'),
  calloutWidth: 200,
  text: 'Terms & Conditions',
  href: 'https://github.com/pnp/sp-dev-fx-property-controls',
  target: '_blank'
})
```

--------------------------------

### Add PropertyFieldLabelWithCallout to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldLabelWithCallout

Integrate the PropertyFieldLabelWithCallout control into your web part's property pane configuration. This example shows how to set the callout trigger, key, content, width, and text.

```typescript
PropertyFieldLabelWithCallout('fakeProp', {
  calloutTrigger: CalloutTriggers.Click,
  key: 'LabelWithCalloutFieldId',
  calloutContent: 'Use dropdowns below to select list and list\'s field to work with',
  calloutWidth: 200,
  text: 'Select List and Field'
})

```

--------------------------------

### Update Project Dependencies for v2

Source: https://pnp.github.io/sp-dev-fx-property-controls/guides/migrate-from-v1

Update your project's package.json to include the recommended versions of React and Fluent UI for v2 of the property controls. This ensures compatibility and stability.

```json
"dependencies": {
    // other dependencies
    "office-ui-fabric-react": "6.214.0",
    "react": "16.8.5",
    "react-dom": "16.8.5"
  },
  "devDependencies": {
    "@types/react": "16.8.8",
    "@types/react-dom": "16.8.3"
  },


```

--------------------------------

### Import PropertyFieldOrder

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldOrder

Import the PropertyFieldOrder control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyFieldOrder } from '@pnp/spfx-property-controls/lib/PropertyFieldOrder';
```

--------------------------------

### Add PropertyFieldToggleWithCallout to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldToggleWithCallout

Integrate the PropertyFieldToggleWithCallout into your web part's property pane configuration. This example shows how to configure the label, callout content, text for ON/OFF states, and the initial checked state.

```typescript
PropertyFieldToggleWithCallout('toggleInfoHeaderValue', {
  calloutTrigger: CalloutTriggers.Click,
  key: 'toggleInfoHeaderFieldId',
  label: 'Turn on the PnP feature',
  calloutContent: React.createElement('p', {}, 'With this control you can enable or disable the PnP features in your web part'),
  onText: 'ON',
  offText: 'OFF',
  checked: this.properties.toggleInfoHeaderValue
})
```

--------------------------------

### Import necessary modules

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldDropdownWithCallout

Import the CalloutTriggers enum and the PropertyFieldDropdownWithCallout control from the @pnp/spfx-property-controls library.

```typescript
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader';
import { PropertyFieldDropdownWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldDropdownWithCallout';
```

--------------------------------

### Add PropertyFieldPassword to Web Part Configuration

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldPassword

Integrate the PropertyFieldPassword control into your web part's property pane configuration using the groupFields method. This example shows basic configuration with a label and an onChanged handler.

```typescript
PropertyFieldPassword("password", {
  key: "password",
  label: "password",
  value: this.properties.password,
  onChanged :  (value: string) => {
     console.log(value);
  }
})

```

--------------------------------

### Add PropertyFieldGrid to Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldGrid

Configure the PropertyFieldGrid control within the web part's property pane configuration using the 'groupFields' property. This example shows multi-select enabled with custom labels for columns.

```typescript
PropertyFieldGrid('gridItems', {
          multiSelect: true,
          items: gridItems,
          label: 'Grid Items',
          key: 'gridFieldId',
          defaultSelectedItems: this.properties.gridItems,
          maxHeight: 500,
          className: 'gridClass',
          styles:  {padding: 10},
          isVisible: true,
          maxHeight: 500,
          column1Label: 'File',
          column2Label: 'Location',
          onSelected: (item: IItem[]) => {
            console.log(item);
          }
          )
```

--------------------------------

### Import PropertyFieldEnterpriseTermPicker

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldEnterpriseTermPicker

Import the PropertyFieldEnterpriseTermPicker control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyFieldEnterpriseTermPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldEnterpriseTermPicker';
```

--------------------------------

### Import PropertyFieldListPicker

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldListPicker

Import the necessary modules for the PropertyFieldListPicker control and its ordering enum.

```typescript
import { PropertyFieldListPicker, PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker';
```

--------------------------------

### Import PropertyFieldTermPicker

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldTermPicker

Import the PropertyFieldTermPicker control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyFieldTermPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldTermPicker';
```

--------------------------------

### Import PropertyFieldRoleDefinitionPicker Modules

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldRoleDefinitionPicker

Import necessary modules for the PropertyFieldRoleDefinitionPicker control from the @pnp/spfx-property-controls library.

```typescript
import {
  IBasePermissions,
  IPropertyFieldRoleDefinitionPickerProps,
  PropertyFieldRoleDefinitionPicker,
  RoleTypeKind,
  IRoleDefinitionInformation
} from "@pnp/spfx-property-controls/lib/PropertyFieldRoleDefinitionPicker";
```

--------------------------------

### Import PropertyFieldDateTimePicker

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldDateTimePicker

Import the necessary modules for the PropertyFieldDateTimePicker control.

```typescript
import { PropertyFieldDateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-property-controls/lib/PropertyFieldDateTimePicker';
```

--------------------------------

### Configure PropertyFieldEnterpriseTermPicker in Property Pane

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldEnterpriseTermPicker

Add the PropertyFieldEnterpriseTermPicker control to the groupFields of your web part's property pane configuration. This example shows common configurations like allowing multiple selections and limiting terms by group or term set.

```typescript
PropertyFieldEnterpriseTermPicker('terms', {
  label: 'Select terms',
  panelTitle: 'Select terms',
  initialValues: this.properties.terms,
  allowMultipleSelections: true,
  excludeSystemGroup: false,
  onPropertyChange: this.onPropertyPaneFieldChanged,
  properties: this.properties,
  context: this.context,
  onGetErrorMessage: null,
  deferredValidationTime: 0,
  limitByGroupNameOrID: 'People',
  limitByTermsetNameOrID: 'Location',
  key: 'termSetsPickerFieldId',
  includeLabels: true
})
```

--------------------------------

### Import PropertyFieldTextWithCallout

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldTextWithCallout

Import the necessary modules for using the PropertyFieldTextWithCallout control and its callout triggers.

```typescript
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader';
import { PropertyFieldTextWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldTextWithCallout';
```

--------------------------------

### Import PropertyFieldButton

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldButton

Import the PropertyFieldButton control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyFieldButton} from '@pnp/spfx-property-controls/lib/PropertyFieldButton';
```

--------------------------------

### Import PropertyFieldLinkWithCallout

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldLinkWithCallout

Import the necessary modules for using the PropertyFieldLinkWithCallout control and its callout triggers.

```typescript
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout';
import { PropertyFieldLinkWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldLinkWithCallout';
```

--------------------------------

### Configure Multi Column Picker (Default)

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldColumnPicker

Configure the PropertyFieldColumnPicker for multi-column selection, returning the 'Title' of the selected columns.

```typescript
PropertyFieldColumnPicker('multiColumn', {
    label: 'Select columns',
    context: this.context,
    selectedColumn: this.properties.multiColumn,
    listId: this.properties.singleListFiltered,
    disabled: false,
    orderBy: PropertyFieldColumnPickerOrderBy.Title,
    onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
    properties: this.properties,
    onGetErrorMessage: null,
    deferredValidationTime: 0,
    key: 'multiColumnPickerFieldId',
    displayHiddenColumns: false,
    columnReturnProperty: IColumnReturnProperty.Title,
    multiSelect: true
})
```

--------------------------------

### Configure Multi Column Picker (Multiselect Dropdown)

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldColumnPicker

Configure the PropertyFieldColumnPicker for multi-column selection, rendering as a multiselect dropdown and returning the 'Title' of the selected columns.

```typescript
PropertyFieldColumnPicker('multiColumn', {
    label: 'Select columns',
    context: this.context,
    selectedColumn: this.properties.multiColumn,
    listId: this.properties.singleListFiltered,
    disabled: false,
    orderBy: PropertyFieldColumnPickerOrderBy.Title,
    onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
    properties: this.properties,
    onGetErrorMessage: null,
    deferredValidationTime: 0,
    key: 'multiColumnPickerFieldId',
    displayHiddenColumns: false,
    columnReturnProperty: IColumnReturnProperty.Title,
    multiSelect: true,
    renderFieldAs: IPropertyFieldRenderOption["Multiselect Dropdown"]
})
```

--------------------------------

### Define Web Part Properties

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldColorPicker

Define the interface for your web part's properties, including a property to store the selected color.

```typescript
export interface IPropertyControlsTestWebPartProps {
  color: string;
}
```

--------------------------------

### Define Web Part Properties

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldFolderPicker

Define the interface for your web part's properties, including a property to store the selected folder object.

```typescript
export interface IPropertyControlsTestWebPartProps {
  folderPicker: IFolder;
}
```

--------------------------------

### Import PropertyFieldMessage and MessageBarType

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldMessage

Import the necessary modules for using the PropertyFieldMessage control and message bar types.

```typescript
import { PropertyFieldMessage} from '@pnp/spfx-property-controls/lib/PropertyFieldMessage';
import { MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
```

--------------------------------

### Import PropertyFieldCodeEditor Modules

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCodeEditor

Import the necessary modules for the PropertyFieldCodeEditor control and its language enum.

```typescript
import { PropertyFieldCodeEditor, PropertyFieldCodeEditorLanguages } from '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor';

```

--------------------------------

### Import PropertyFieldSitePicker

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldSitePicker

Import the PropertyFieldSitePicker module to use it in your component.

```typescript
import { PropertyFieldSitePicker } from '@pnp/spfx-property-controls/lib/PropertyFieldSitePicker';
```

--------------------------------

### Import PropertyFieldGuid

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldGuid

Import the PropertyFieldGuid control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyFieldGuid } from '@pnp/spfx-property-controls/lib/PropertyFieldGuid';

```

--------------------------------

### Importing Modules for PropertyFieldChoiceGroupWithCallout

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldChoiceGroupWithCallout

Import the necessary modules from the @pnp/spfx-property-controls package to use the PropertyFieldChoiceGroupWithCallout control.

```typescript
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader';
import { PropertyFieldChoiceGroupWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldChoiceGroupWithCallout';
```

--------------------------------

### Import PropertyFieldMultiSelect

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldMultiSelect

Import the PropertyFieldMultiSelect control from the @pnp/spfx-property-controls library.

```typescript
import { PropertyFieldMultiSelect } from '@pnp/spfx-property-controls/lib/PropertyFieldMultiSelect';
```

--------------------------------

### Define Web Part Properties with IPickerTerms

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldEnterpriseTermPicker

Define the web part properties, including a property to store the selected terms using the IPickerTerms interface.

```typescript
import { IPickerTerms } from "@pnp/spfx-property-controls/lib/PropertyFieldEnterpriseTermPicker";

export interface IPropertyControlsTestWebPartProps {
  terms: IPickerTerms;
}
```

--------------------------------

### Define Grid Items

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldGrid

Define an array of IItem objects to populate the PropertyFieldGrid. Each item requires a key, icon, title, and description.

```typescript
const gridItems:IItem[] = [
  {
    key: "1",
    icon: React.createElement(DocumentBulletListRegular) ,
    title: "File 1",
    description: "This is the first document"
  },
  {
    key: "2",
    icon: React.createElement(DocumentBulletListRegular) ,
    title: "File 2",
    description: "This is the 2 document"
  },
  {
    key: "3",
    icon: React.createElement(DocumentBulletListRegular) ,
    title: "File 3",
    description: "This is the 3 document"
  },
  {
    key: "4",
    icon: React.createElement(DocumentBulletListRegular) ,
    title: "File 4",
    description: "This is the 4 document"
  }
 ];
```

--------------------------------

### Define Site Property Interface

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldSitePicker

Define the interface for your web part properties, including the sites property which uses IPropertyFieldSite.

```typescript
import { IPropertyFieldSite } from "@pnp/spfx-property-controls/lib/PropertyFieldSitePicker";

export interface IPropertyControlsTestWebPartProps {
  sites: IPropertyFieldSite[];
}
```

--------------------------------

### Import PropertyFieldFolderPicker

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldFolderPicker

Import the necessary modules for using the PropertyFieldFolderPicker control in your SPFx web part.

```typescript
import { IFolder, IPropertyFieldFolderPickerProps , PropertyFieldFolderPicker } from "@pnp/spfx-property-controls/lib/PropertyFieldFolderPicker";
```

--------------------------------

### Define Web Part Properties for Column Picker

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldColumnPicker

Define the interface for your web part properties to store the selected column(s).

```typescript
export interface IPropertyControlsTestWebPartProps {
  list: string; // Stores the list ID

  // BEGIN: Added
  column: string; // Stores the single column property (property can be configured)
  // END: Added

  // BEGIN: Added
  multiColumn: string; // Stores the multi column property (property can be configured)
  // END: Added
}
```

--------------------------------

### Import PropertyFieldCheckboxWithCallout

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCheckboxWithCallout

Import the necessary modules for using the PropertyFieldCheckboxWithCallout control and CalloutTriggers in your SharePoint Framework component.

```typescript
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout';
import { PropertyFieldCheckboxWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldCheckboxWithCallout';
```

--------------------------------

### Define Web Part Properties

Source: https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCodeEditor

Define the interface for your web part's properties, including a property to store the HTML code.

```typescript
export interface IPropertyControlsTestWebPartProps {
  htmlCode: string;
}

```
Tokens:
Raw