

FieldPicker control

This control allows you to select one or multiple available site fields or list fields.

Here is an example of the control:

FieldPicker single selection mode:

FieldPicker multi selection mode:

How to use this control in your solutions

• Check that you installed the @pnp/spfx-controls-react dependency. Check out the getting started page for more information about installing the dependency.
• Import the control into your component:

import { FieldPicker } from "@pnp/spfx-controls-react/lib/FieldPicker";

• Use the FieldPicker control in your code as follows:

<FieldPicker
  context={this.props.context}
  group="Content Feedback"
  includeHidden={false}
  includeReadOnly={false}
  label="Select your field(s)"
  multiSelect={false}
  orderBy={FieldsOrderBy.Title}
  listId="00000000-0000-0000-0000-000000000000"
  onSelectionChanged={this.onFieldPickerChanged}
  showBlankOption={true}
/>

• The onSelectionChanged change event returns the field(s) and can be implemented as follows:

private onFieldPickerChanged (fields: ISPField | ISPField[]) {
  console.log("Fields:", fields);
}

Implementation

The FieldPicker control can be configured with the following properties:

Property	Type	Required	Description
context	BaseComponentContext	yes	The context object of the SPFx loaded webpart or customizer.
listId	string	no	The ID of the list or library you wish to select a column(s) from. When not specified, picker will be populated with site columns.
className	string	no	If provided, additional class name to provide on the dropdown element.
disabled	boolean	no	Whether or not the control is disabled.
includeHidden	boolean	no	Whether or not to include hidden fields. Default is true.
includeReadOnly	boolean	no	Whether or not to include read-only fields. Default is true.
group	string	no	Only show fields of a certain group.
filter	string	no	Filter fields from OData query (takes the upperhand of hidden, readOnly and group Filters).
orderBy	FieldsOrderBy	no	How to order the fields.
selectedFields	string | string[]	no	Internal names of the selected item(s). If you provide this, you must maintain selection state by observing onSelectionChanged events and passing a new value in when changed.
multiSelect	boolean	no	Indicates if multi-choice selections is allowed. Default is false.
label	string	no	The label to display.
placeholder	string	no	Input placeholder text. Displayed until option is selected.
onSelectionChanged	(newValue: ISPField | ISPField[]): void	no	Callback issued when the selected option changes.
filterItems	(fields: ISPField[]): ISPField[]	no	This function is invoked after the filtering has been done. This allows you to add additional custom filtering.
webAbsoluteUrl	string	no	Absolute Web Url of target site (user requires permissions).
showBlankOption	boolean	no	Whether or not to show a blank option. Default is false. Works only when multiSelect is false.

Enum FieldsOrderBy

Value
Title
InternalName