### Install Beta Release

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/beta.md

Install the latest beta version of the @pnp/spfx-property-controls package using npm. This command saves the dependency to your project.

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

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

### Install @pnp/spfx-property-controls

Source: https://github.com/pnp/sp-dev-fx-property-controls/wiki/Getting-started

Install the property controls dependency using npm. Use --save --save-exact for precise versioning.

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

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

### Install Global Heft CLI

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/guides/mpa.md

Installs the Heft build tool globally, which is required for running Heft commands. Check if it's already installed using `npm list -g @rushstack/heft`.

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

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

### Serve Project Locally

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/guides/mpa.md

Starts the local development server for the project, allowing you to test changes.

```bash
npm run start
```

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

### Install Project Dependencies

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/guides/mpa.md

Run this command after cloning the repository to restore all necessary project dependencies.

```bash
npm install
```

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

### Serve Documentation Locally

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/guides/mpa.md

Starts the local web server for MkDocs, allowing you to view the project documentation in a web browser.

```bash
mkdocs serve
```

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

### Render Markdown as Block Content

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyPaneMarkdownContent.md

Example of Markdown content that will be rendered as block elements.

```Markdown
## This is a block element
```

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

### Import PropertyFieldSpinner

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldSpinner.md

Import the PropertyFieldSpinner control from the @pnp/spfx-property-controls library. Ensure the dependency is installed.

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

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

### Serve Project with Specific Locale

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/guides/mpa.md

Starts the local development server for the project with a specified locale, useful for testing localized versions.

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

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

### Render Markdown as Inline Content

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyPaneMarkdownContent.md

Example of Markdown content that will be rendered as inline elements.

```Markdown
This is an _inline_ element
```

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

### Import PropertyFieldMonacoEditor

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldMonacoEditor.md

Import the PropertyFieldMonacoEditor control from the @pnp/spfx-property-controls library. Ensure the dependency is installed.

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

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

### Import PropertyFieldButton

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldButton.md

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

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

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

### Sync Local Dev Branch

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/guides/contributing.md

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

```bash
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 PropertyFieldSearch to Property Pane

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldSearch.md

Configure the web part's property pane to include the PropertyFieldSearch control. This example shows how to set its key, placeholder text, initial value, and the callback for search events.

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

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

### Add PropertyFieldSpinButton to Property Pane

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

Configure and add the PropertyFieldSpinButton to your web part's property pane configuration. This example shows how to set various properties like label, initial value, step, min/max, 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 File Picker to Property Pane

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldFilePicker.md

Integrate the PropertyFieldFilePicker control into your web part's property pane configuration. This example shows how to set up the control with various properties like 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 PropertyFieldColorPicker to Property Pane

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

Configure the `groupFields` in your web part's property pane to include the PropertyFieldColorPicker control. This example shows how to set its label, initial selected color, and other configuration options.

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

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

### Add PropertyFieldFolderPicker to Property Pane

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldFolderPicker.md

Configure and add the PropertyFieldFolderPicker control to your web part's property pane. This example shows how to set the label, initial selection, 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"
    },
}),
```

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

### Define Web Part Property for GUID

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldGuid.md

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

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

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

### Navigate to Documentation Directory

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/guides/mpa.md

Changes the current directory to the location where the MkDocs documentation is stored.

```bash
cd ./docs/documentation
```

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

### Import PropertyPanePropertyEditor

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyPanePropertyEditor.md

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

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

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

### Import PropertyPaneWebPartInformation

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyPaneWebPartInformation.md

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

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

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

### Fetch ContentTypes for a Selected List

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldContentTypePicker.md

Configure the PropertyFieldContentTypePicker to fetch content types from a specific list identified by its GUID.

```typescript
PropertyFieldContentTypePicker('contentType', {
  label: 'Select a Content Type',
  context: this.context,
  selectedContentType: this.properties.contentType,
  listId: {list-guid} //"0da3b4b7-8ebd-4f15-87ee-afae5cacadad"
  disabled: false,
  orderBy: PropertyFieldContentTypeOrderBy.Name,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  properties: this.properties,
  onGetErrorMessage: null,
  deferredValidationTime: 0,
  key: 'contentTypePickerFieldId'
})
```

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

### Add PropertyPaneWebPartInformation to Property Pane

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyPaneWebPartInformation.md

Configure the web part's property pane to include the PropertyPaneWebPartInformation control. This snippet shows how to set the description, a 'more info' link, and video properties.

```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'
})
```

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

### Collection Data Example

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldCollectionData.md

This JSON represents the structure of data collected by the PropertyFieldCollectionData control, based on the defined fields.

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

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

### Import PropertyFieldColorPicker

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

Import the PropertyFieldColorPicker and PropertyFieldColorPickerStyle modules from the @pnp/spfx-property-controls library.

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

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

### PropertyFieldGuid with Custom Error Message

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldGuid.md

Implement a custom error message for the PropertyFieldGuid control to guide users on correct input format.

```typescript
PropertyFieldGuid('guid', {
  key: 'guid',
  label: "GUID",
  value: this.properties.guid,
  errorMessage: "Please enter a correct GUID"
})
```

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

### Import PropertyFieldEnterpriseTermPicker

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldEnterpriseTermPicker.md

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

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

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

### Add PropertyFieldGuid to Property Pane

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldGuid.md

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

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

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

### Configure Localized Resources

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/index.md

Configure the localized resource path for property controls in your project's config.json file.

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

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

### Import PropertyFieldViewPicker

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldViewPicker.md

Import the PropertyFieldViewPicker control and its associated OrderBy enum from the @pnp/spfx-property-controls library.

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

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

### PropertyFieldNumber with Custom Validation

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldNumber.md

Implement custom validation logic for the PropertyFieldNumber control using the onGetErrorMessage property. This example enforces even numbers.

```typescript
PropertyFieldNumber("numberValue", {
  key: "numberValue",
  label: "Number value only",
  description: "Number field description",
  value: this.properties.numberValue,
  maxValue: 10,
  minValue: 1,
  disabled: false,
  onGetErrorMessage: (value: number) => {
    if (value % 2 !== 0) {
      return 'Only even numbers are allowed';
    }
    return '';
  }
})
```

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

### Configure PropertyFieldChoiceGroupWithCallout

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldChoiceGroupWithCallout.md

Add the PropertyFieldChoiceGroupWithCallout to your web part's property pane configuration. This example shows hover triggers and custom options.

```TypeScript
PropertyFieldChoiceGroupWithCallout('choiceGroupWithCalloutValue', {
  calloutContent: React.createElement('div', {}, 'Select preferable mobile platform'),
  calloutTrigger: CalloutTriggers.Hover,
  key: 'choiceGroupWithCalloutFieldId',
  label: 'Preferred mobile platform',
  options: [{
    key: 'iOS',
    text: 'iOS',
    checked: this.properties.choiceGroupWithCalloutValue === 'iOS'
  }, {
    key: 'Android',
    text: 'Android',
    checked: this.properties.choiceGroupWithCalloutValue === 'Android'
  }, {
    key: 'Other',
    text: 'Other',
    checked: this.properties.choiceGroupWithCalloutValue === 'Other'
  }]
})
```

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

### Configure PropertyFieldDropdownWithCallout in Property Pane

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

Add the PropertyFieldDropdownWithCallout to your web part's property pane configuration. This example uses 'Hover' as the callout trigger.

```TypeScript
PropertyFieldDropdownWithCallout('dropdownInfoHeaderKey', {
  calloutTrigger: CalloutTriggers.Hover,
  key: 'dropdownInfoHeaderFieldId',
  label: 'Select the version',
  options: [{
    key: 'v1.0.0',
    text: 'v1.0.0'
  }, {
    key: 'v1.0.1',
    text: 'v1.0.1'
  }, {
    key: 'v1.0.2',
    text: 'v1.0.2'
  }, {
    key: 'v2.0.0',
    text: 'v2.0.0'
  }],
  selectedKey: this.properties.dropdownInfoHeaderKey,
  calloutContent: dropdownInfoHeaderCallountContent
})
```

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

### Define Web Part Properties with Site Picker

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldSitePicker.md

Define the web part properties interface, including the type for selected sites using IPropertyFieldSite.

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

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

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

### Render Markdown with HTML

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyPaneMarkdownContent.md

By default, the control parses and renders raw HTML elements within Markdown content. This example shows Markdown with horizontal rules.

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

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

### Import PropertyFieldListPicker

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

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

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

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

### Add PropertyFieldMessage to Property Pane

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldMessage.md

Configure and add the PropertyFieldMessage control to your web part's property pane configuration. This example shows an error message.

```typescript
PropertyFieldMessage("", {
      key: "MessageKey",
      text: "Something went wrong... try later.",
      messageType: MessageBarType.error,
      isVisible: true
  })
```

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

### Import PropertyFieldSwatchColorPicker

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldSwatchColorPicker.md

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';
```

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

### Custom Rendering for Collection Field

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldCollectionData.md

Example of how to implement a custom rendering function for a field within the PropertyFieldCollectionData control, allowing for custom input elements and validation.

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

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

### Add PropertyFieldTeamPicker to Property Pane

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldTeamPicker.md

Configure the PropertyFieldTeamPicker control within the groupFields of your web part's property pane configuration. This example shows multi-select enabled.

```typescript
PropertyFieldTeamPicker('teams', {
  key: 'teamsPicker',
  context: this.context,
  label: 'Select teams',
  onPropertyChange: this.onPropertyPaneFieldChanged,
  properties: this.properties,
  initialTeams: this.properties.teams,
  multiSelect: true
})
```

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

### Import PropertyFieldSpinButton

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

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

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

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

### Import PropertyFieldGrid Control

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldGrid.md

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

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

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

### Add PropertyFieldCodeEditor to Property Pane

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldCodeEditor.md

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
  }
})
```

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

### Add PropertyFieldListPicker to Property Pane

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldListPicker.md

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'
})
```

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

### Add PropertyFieldSpinner to Property Pane

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldSpinner.md

Add the PropertyFieldSpinner control to the groupFields configuration of your web part's property pane. This example shows a medium-sized spinner with a 'Loading ...' label.

```typescript
PropertyFieldSpinner("", {
      key: "sp1",
      size: SpinnerSize.medium,
      isVisible: true,
      label: "Loading ..."
  })
```

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

### Import PropertyFieldColumnPicker

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldColumnPicker.md

Import the necessary modules for using the PropertyFieldColumnPicker control and its ordering options.

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

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

### Add PropertyFieldMonacoEditor to Property Pane

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldMonacoEditor.md

Configure the property pane for your web part by adding the PropertyFieldMonacoEditor control to the groupFields. This example shows basic configuration with key, value, and event handlers.

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

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

### Request Microsoft Graph Permissions

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldTeamPicker.md

Configure Microsoft Graph permissions in your solution's package-solution.json file. 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"
    }]
  }
}
```

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

### Add PropertyFieldTextWithCallout to Property Pane

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

Configure the property pane for your web part by adding the PropertyFieldTextWithCallout control. This example shows how to set the label, callout content, trigger, and initial value.

```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://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldBrandFontPicker.md

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

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

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

### Configure PropertyFieldLabelWithCallout in Property Pane

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldLabelWithCallout.md

Add the PropertyFieldLabelWithCallout control to 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'
})
```

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

### Import PropertyFieldLabelWithCallout and CalloutTriggers

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldLabelWithCallout.md

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

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

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

### Add PropertyFieldDateTimePicker to Property Pane

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldDateTimePicker.md

Configure and add the PropertyFieldDateTimePicker control to the `groupFields` in your web part's property pane configuration. This example shows a date and time picker with 12-hour format.

```typescript
PropertyFieldDateTimePicker('datetime', {
  label: 'Select the date and time',
  initialDate: this.properties.datetime,
  dateConvention: DateConvention.DateTime,
  timeConvention: TimeConvention.Hours12,
  onPropertyChange: this.onPropertyPaneFieldChanged,
  properties: this.properties,
  onGetErrorMessage: undefined,
  deferredValidationTime: 0,
  key: 'dateTimeFieldId',
  showLabels: false
})
```

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

### Configure PropertyFieldToggleWithCallout

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

Add the PropertyFieldToggleWithCallout to your web part's property pane configuration. This example shows how to set 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 PropertyFieldSearch

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldSearch.md

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

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

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

### Import PropertyFieldOrder

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldOrder.md

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

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

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

### Use PropertyFieldIconPicker in Component

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldIconPicker.md

Integrate the PropertyFieldIconPicker control into your SharePoint Framework component's property pane configuration. This example demonstrates basic usage with essential properties like 'key', 'onSave', and 'label'.

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

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

### Import PropertyFieldDropdownWithCallout

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

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

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

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

### Add PropertyFieldButton to Property Pane

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldButton.md

Configure the PropertyFieldButton control within the groupFields of your web part's property pane. This example shows basic configuration including text, key, and an onClick handler.

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

  })
```

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

### Import PropertyFieldLinkWithCallout and CalloutTriggers

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldLinkWithCallout.md

Import the necessary modules for using the PropertyFieldLinkWithCallout control and defining callout trigger events.

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

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

### Import PropertyFieldContentTypePicker

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldContentTypePicker.md

Import the necessary modules for using the PropertyFieldContentTypePicker control.

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

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

### Add PropertyFieldPeoplePicker to Property Pane

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

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

```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'
})
```

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

### Import PropertyFieldDateTimePicker

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

Import the necessary modules for the PropertyFieldDateTimePicker control.

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

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

### Import PropertyFieldButtonWithCallout and CalloutTriggers

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldButtonWithCallout.md

Import the necessary modules for using the PropertyFieldButtonWithCallout control and its callout trigger options.

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

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

### Configure PropertyFieldEnterpriseTermPicker in Property Pane

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldEnterpriseTermPicker.md

Add the PropertyFieldEnterpriseTermPicker to your web part's property pane configuration. This example shows how to set a label, panel title, initial values, and limit terms by group and 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 PropertyFieldToggleWithCallout

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

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

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

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

### Import PropertyFieldCheckboxWithCallout

Source: https://github.com/pnp/sp-dev-fx-property-controls/blob/master/docs/documentation/docs/controls/PropertyFieldCheckboxWithCallout.md

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

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