+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFIeldFolderPicker/index.html b/controls/PropertyFIeldFolderPicker/index.html
new file mode 100644
index 00000000..96e986da
--- /dev/null
+++ b/controls/PropertyFIeldFolderPicker/index.html
@@ -0,0 +1,1253 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Testing out a beta release
+
+
+
+
+ Testing out a beta release 
¶
+All you need to do for testing out a beta release of @pnp/spfx-property-controls is to install the dependency as follows:
npm install @pnp/spfx-property-controls@next --save
+Beta control documentation¶
+The control documentation is only live for public releases, not for beta versions. If you want to checkout the markdown files of all controls in the dev branch: beta documentation.
Next Steps¶
+Once you installed the beta version, you can start using the controls in your solution. Go to the homepage to get an overview of all the available controls and the steps to get started: home.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldButton/index.html b/controls/PropertyFieldButton/index.html
new file mode 100644
index 00000000..3a53d204
--- /dev/null
+++ b/controls/PropertyFieldButton/index.html
@@ -0,0 +1,1280 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldFolderPicker control¶
+This control allows you to explore and select a folder from the property pane. +It also allows the user to create a new folder at the current level being explored.
+Here is an example of the control:
+PropertyFieldFolderPicker example usage
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your webpart: +
import { IFolder, IPropertyFieldFolderPickerProps , PropertyFieldFolderPicker } from "@pnp/spfx-property-controls/lib/PropertyFieldFolderPicker";
+Create a new property for your web part, for example:
+export interface IPropertyControlsTestWebPartProps {
+ folderPicker: IFolder;
+}
+-
+
- Add the folder picker property control to the
groupFieldsof the web part property pane configuration:
+
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"
+ },
+}),
+Implementation¶
+The PropertyFieldFolderPicker control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| context | +BaseComponentContext | +yes | +The context object of the SPFx loaded webpart. | +
| label | +string | +yes | +The label for the control. | +
| rootFolder | +IFolder | +yes | +The lowest level folder that can be explored. This can be the root folder of a library. | +
| selectedFolder | +IFolder | +yes | +Store the results of the folder picker. | +
| defaultFolder | +IFolder | +no | +The default folder to be selected or explored. | +
| properties | +any | +yes | +Parent web part properties, this object is used to update the property value. | +
| key | +string | +yes | +A unique key that indicates the identity of this control. | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the data gets changed. | +
| required | +boolean | +no | +Is selection required. | +
| disabled | +boolean | +no | +Is the control disabled. | +
| canCreateFolders | +boolean | +no | +Allow current user to create folders on the target location. If enabled, you need to ensure that the user has the required permissions. | +
| onSelect | +(folder: IFolder): void | +no | +Callback function called after a folder is selected. | +
| siteAbsoluteUrl | +string | +no | +The absolute url of the site you want to pick a folder from (if different than the site the webpart is installed on) | +
interface IFolder
The value returned from the selected folder object.
+| Value | +Type | +Description | +
|---|---|---|
| Name | +string | +Name of the folder. | +
| ServerRelativeUrl | +string | +Server relative URL of the folder. | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldButtonWithCallout/index.html b/controls/PropertyFieldButtonWithCallout/index.html
new file mode 100644
index 00000000..d2b310be
--- /dev/null
+++ b/controls/PropertyFieldButtonWithCallout/index.html
@@ -0,0 +1,1268 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldButton control¶
+This control generates a Button Control .
+PropertyFieldButton example usage
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldButton} from '@pnp/spfx-property-controls/lib/PropertyFieldButton';
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldButton("", {
+ text={"Button"}
+ key={"buttonID"}
+ disabled={false}
+ className={className}
+ styles={styles}
+ onClick={()=>{alert("Button Clicked")}}
+ iconProps={iconProps}
+ isPrimary={true}
+ isVIsible={true}
+
+ })
+Implementation¶
+The PropertyFieldButton control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| styles | +IButtonStyles | +no | +styles object | +
| classname | +string | +no | +css ClassName | +
| isVisible | +boolean | +yes | +Indicate if button is visible | +
| text | +string | +no | +text of button | +
| isPrimary | +boolean | +yes | +indicate Button is a primary button | +
| iconProps | +IIconProps | +no | +text of button | +
| disable | +boolean | +no | +Disable control | +
| onClick | +(e:any) =>void | +yes | +Onclick function | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldCheckboxWithCallout/index.html b/controls/PropertyFieldCheckboxWithCallout/index.html
new file mode 100644
index 00000000..2ee695c6
--- /dev/null
+++ b/controls/PropertyFieldCheckboxWithCallout/index.html
@@ -0,0 +1,1276 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldButtonWithCallout control¶
+This control generates a button control with a callout.
+PropertyFieldButtonWithCallout rendering
+
PropertyFieldButtonWithCallout callout opened
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout';
+import { PropertyFieldButtonWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldButtonWithCallout';
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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 */ }
+})
+Implementation¶
+The PropertyFieldButtonWithCallout control uses the same implementation as the default PropertyPaneButton and has the following additional properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| calloutContent | +React.ReactNode | +no | +Callout content - any HTML | +
| calloutWidth | +number | +no | +Custom width for callout including borders. If value is 0, no width is applied. | +
| calloutTrigger | +CalloutTriggers | +no | +Event to show the callout | +
| gapSpace | +number | +no | +The gap between the callout and the target | +
Enum CalloutTriggers
| Name | +Description | +
|---|---|
| Click | +Shows the callout when you hover over the icon | +
| Hover | +Shows the callout when you click on the icon | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldChoiceGroupWithCallout/index.html b/controls/PropertyFieldChoiceGroupWithCallout/index.html
new file mode 100644
index 00000000..d05339ef
--- /dev/null
+++ b/controls/PropertyFieldChoiceGroupWithCallout/index.html
@@ -0,0 +1,1287 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldCheckboxWithCallout control¶
+This control generates a checkbox control with a callout.
+PropertyFieldCheckboxWithCallout rendering
+
PropertyFieldCheckboxWithCallout callout opened
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout';
+import { PropertyFieldCheckboxWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldCheckboxWithCallout';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ checkboxWithCalloutValue: boolean;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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
+})
+Implementation¶
+The PropertyFieldCheckboxWithCallout control uses the same implementation as the default PropertyPaneCheckbox and has the following additional properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| calloutContent | +React.ReactNode | +no | +Callout content - any HTML | +
| calloutWidth | +number | +no | +Custom width for callout including borders. If value is 0, no width is applied. | +
| calloutTrigger | +CalloutTriggers | +no | +Event to show the callout | +
| gapSpace | +number | +no | +The gap between the callout and the target | +
Enum CalloutTriggers
| Name | +Description | +
|---|---|
| Click | +Shows the callout when you hover over the icon | +
| Hover | +Shows the callout when you click on the icon | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldCodeEditor/index.html b/controls/PropertyFieldCodeEditor/index.html
new file mode 100644
index 00000000..53580d20
--- /dev/null
+++ b/controls/PropertyFieldCodeEditor/index.html
@@ -0,0 +1,1336 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldChoiceGroupWithCallout control¶
+This control generates a choice group control with a callout.
+PropertyFieldChoiceGroupWithCallout rendering
+
PropertyFieldChoiceGroupWithCallout callout opened
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader';
+import { PropertyFieldChoiceGroupWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldChoiceGroupWithCallout';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ choiceGroupWithCalloutValue: string;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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'
+ }]
+})
+Implementation¶
+The PropertyFieldChoiceGroupWithCallout control uses the same implementation as the default PropertyPaneChoiceGroup and has the following additional properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| calloutContent | +React.ReactNode | +no | +Callout content - any HTML | +
| calloutWidth | +number | +no | +Custom width for callout including borders. If value is 0, no width is applied. | +
| calloutTrigger | +CalloutTriggers | +no | +Event to show the callout | +
| gapSpace | +number | +no | +The gap between the callout and the target | +
Enum CalloutTriggers
| Name | +Description | +
|---|---|
| Click | +Shows the callout when you hover over the icon | +
| Hover | +Shows the callout when you click on the icon | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldCollectionData/index.html b/controls/PropertyFieldCollectionData/index.html
new file mode 100644
index 00000000..2c1b3eb0
--- /dev/null
+++ b/controls/PropertyFieldCollectionData/index.html
@@ -0,0 +1,1601 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldCodeEditor control¶
+This control generates a code editor which can be used to add custom styling or content to your web part.
+PropertyFieldCodeEditor
+
PropertyFieldCodeEditor editing experience
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldCodeEditor, PropertyFieldCodeEditorLanguages } from '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ htmlCode: string;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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
+ }
+})
+Implementation¶
+The PropertyFieldCodeEditor control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| label | +string | +yes | +Property field label displayed on top. | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| panelTitle | +string | +yes | +Title of the code editor panel. | +
| initialValue | +string | +no | +Defines the initial code. | +
| language | +PropertyFieldCodeEditorLanguages | +no | +Sets the language on the code editor. | +
| properties | +any | +yes | +Parent web part properties, this object is use to update the property value. | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the date gets changed. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| options | +AceOptions | +no | +Additional properties available to the Ace editor. | +
| panelWidth | +string | +no | +Width of the panel that contains the Ace editor | +
Enum PropertyFieldCodeEditorLanguages
| Name | +
|---|
| css | +
| JavaScript | +
| JSON | +
| Handlebars | +
| HTML | +
| Plain Text | +
| Sass | +
| TypeScript | +
| XML | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldColorPicker/index.html b/controls/PropertyFieldColorPicker/index.html
new file mode 100644
index 00000000..f6b891d9
--- /dev/null
+++ b/controls/PropertyFieldColorPicker/index.html
@@ -0,0 +1,1402 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldCollectionData control¶
+This property field control gives you the ability to insert a list / collection data which can be used in your web part. For example: you want to specify multiple locations for showing a weather information.
+The control allows you to specify multiple data types like: string, number, boolean, or dropdown.
+PropertyFieldCollectionData
+
The type of data you get returned depends on the fields you defined. For the example above, the data looks like this:
+[
+ {"Title":"Person","Lastname":"1","Age":"42","City":"helsinki","Sign":true},
+ {"Title":"Person","Lastname":"2","Age":"42","City":"helsinki","Sign":true}
+]
+How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldCollectionData, CustomCollectionFieldType } from '@pnp/spfx-property-controls/lib/PropertyFieldCollectionData';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ collectionData: any[];
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldCollectionData("collectionData", {
+ key: "collectionData",
+ label: "Collection data",
+ panelHeader: "Collection data panel header",
+ manageBtnLabel: "Manage collection data",
+ value: this.properties.collectionData,
+ fields: [
+ {
+ id: "Title",
+ title: "Firstname",
+ type: CustomCollectionFieldType.string,
+ required: true
+ },
+ {
+ id: "Lastname",
+ title: "Lastname",
+ type: CustomCollectionFieldType.string
+ },
+ {
+ id: "Age",
+ title: "Age",
+ type: CustomCollectionFieldType.number,
+ required: true
+ },
+ {
+ id: "City",
+ title: "Favorite city",
+ type: CustomCollectionFieldType.dropdown,
+ options: [
+ {
+ key: "antwerp",
+ text: "Antwerp"
+ },
+ {
+ key: "helsinki",
+ text: "Helsinki"
+ },
+ {
+ key: "montreal",
+ text: "Montreal"
+ }
+ ],
+ required: true
+ },
+ {
+ id: "Sign",
+ title: "Signed",
+ type: CustomCollectionFieldType.boolean
+ }
+ ],
+ disabled: false
+})
+Sample of custom field rendering¶
+Here is an example of how you can render your own controls in the PropertyFieldCollectionData control:
{
+ 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, "");
+ }
+ }}), " 🎉"
+ )
+ );
+ }
+}
+Implementation¶
+The PropertyFieldCollectionData control can be configured with the following properties:
| Property | +Type | +Required | +Description | +Default Value | +
|---|---|---|---|---|
| key | +string | +yes | +An unique key that indicates the identity of this control. | ++ |
| label | +string | +yes | +Property field label displayed on top. | ++ |
| panelHeader | +string | +yes | +Label to be used as the header in the panel. | ++ |
| panelDescription | +string | +no | +Property that allows you to specify a description in the collection panel. | ++ |
| manageBtnLabel | +string | +yes | +Label of the button to open the panel. | ++ |
| saveBtnLabel | +string | +no | +Label of the save button. | ++ |
| saveAndAddBtnLabel | +string | +yes | +Label of the save and add button. | ++ |
| cancelBtnLabel | +string | +yes | +Label of the cancel button. | ++ |
| fields | +ICustomCollectionField[] | +yes | +The fields to be used for the list of collection data. | ++ |
| value | +string | +yes | +The collection data value. | ++ |
| enableSorting | +boolean | +no | +Specify if you want to be able to sort the items in the collection. | +false | +
| disabled | +boolean | +no | +Specify if the control is disabled. | +false | +
| disableItemCreation | +boolean | +no | +Allows you to specify if user can create new items. | +false | +
| disableItemDeletion | +boolean | +no | +Allows you to specify if users can delete already inserted items. | +false | +
| panelClassName | +string | +no | +Allows you to specify a custom CSS class name for the collection data panel. | ++ |
| tableClassName | +string | +no | +Allows you to specify a custom CSS class name for the collection data table inside the panel. | ++ |
| panelProps | +IPanelProps | +no | +Allows you to pass in props of the panel such as type and size to control the underlying panel. | ++ |
Interface ICustomCollectionField
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| id | +string | +yes | +ID of the field. | +
| title | +string | +yes | +Title of the field. This will be used for the label in the table. | +
| type | +CustomCollectionFieldType | +yes | +Specifies the type of field to render. | +
| disable | +(item: any) => boolean | +no | +Conditionally disable a field. | +
| disableEdit | +boolean | +no | +Allows you to specify if a field is disabled for editing. | +
| required | +boolean | +no | +Specify if the field is required. | +
| options | +IDropdownOption[] | (fieldId: string, item: any) => IDropdownOption[] | +no | +Dropdown options. Only necessary when dropdown type is used. Options can be either a static array or a function that will calculate the values dynamically and can react to the current item. | +
| onRenderOption | +IRenderFunction |
+no | +Dropdown custom options render method. Only for the dropdown field type. | +
| placeholder | +string | +no | +Placeholder text which will be used for the input field. If not provided the input title will be used. | +
| defaultValue | +any | +no | +Specify a default value for the input field. | +
| deferredValidationTime | +number | +no | +Field will start to validate after users stop typing for deferredValidationTime milliseconds. Default: 200ms. |
+
| onGetErrorMessage | +(value: any, index: number, crntItem: any): string | Promise |
+no | +The method is used to get the validation error message and determine whether the input value is valid or not. It provides you the current row index and the item you are currently editing. | +
| onCustomRender | +(field: ICustomCollectionField, value: any, onUpdate: (fieldId: string, value: any) => void, item: any, itemUniqueId: string, onCustomFieldValidation: (fieldId: string, errorMessage: string) => void) => JSX.Element | +no | +This property is only required if you are using the custom field type and it can be used to specify the custom rendering of your control in the collection data. |
+
| isVisible | +(field: ICustomCollectionField, items: any[]) => boolean | +no | +The method is used to toggle column visibility depending on current state of editing items | +
| iconFieldRenderMode | +CollectionIconFieldRenderMode | +no | +Icon field render mode: text box or IconPicker |
+
Enum CustomCollectionFieldType
| Type | +Description | +
|---|---|
| string | +Text field | +
| number | +Number field | +
| boolean | +Checkbox | +
| dropdown | +Dropdown field. You will have to specify the options property when using this field type |
+
| fabricIcon | +Name of the Office UI Fabric icon | +
| url | +URL field | +
| custom | +This gives you control over the whole field rendering. Be sure to provide the onCustomRender method to render your control in the collection data. |
+
| color | +Color field | +
Type CollectionIconFieldRenderMode
export type CollectionIconFieldRenderMode = 'textbox' | 'picker';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldColumnPicker/index.html b/controls/PropertyFieldColumnPicker/index.html
new file mode 100644
index 00000000..547ac85f
--- /dev/null
+++ b/controls/PropertyFieldColumnPicker/index.html
@@ -0,0 +1,1499 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldColorPicker control¶
+This control generates a color picker that you can use inside the property pane.
+PropertyFieldColorPicker
+
PropertyFieldColorPicker color selector
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ color: string;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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'
+})
+Implementation¶
+The PropertyFieldColorPicker control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| label | +string | +yes | +Property field label displayed on top. | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| debounce | +number | +no | +Specify delay after which control value will be set. | +
| isHidden | +boolean | +no | +Specify if the control needs to be hidden. | +
| selectedColor | +string or IColor | +no | +The CSS-compatible string or an IColor object to describe the initial color | +
| alphaSliderHidden | +boolean | +no | +When true, the alpha slider control is hidden | +
| showPreview | +boolean | +no | +Whether to show color preview box. | +
| style | +PropertyFieldColorPickerStyle | +no | +Determines how the control is displayed (defaults to inline) | +
| iconName | +string | +no | +The name of the UI Fabric Font Icon to use for Inline display (defaults to Color) | +
| valueAsObject | +boolean | +no | +When true, the property is returned as an IColor object. When false (default), the property is returned as a CSS-compatible string | +
| properties | +any | +yes | +Parent web part properties, this object is use to update the property value. | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the date gets changed. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
Enum PropertyFieldColorPickerStyle
| Name | +Description | +
|---|---|
| Full | +Display the full control in the property pane | +
| Inline | +Display the color picker inline | +
Value¶
+By default, the Color Picker returns the value as a CSS-compatible string. This allows you the flexibility of simply assigning the value to an inline style as is and this is usually sufficient. However, this also limits the information directly available to you since the format could be a Hex code, an RGBA value, or even a named color and may not be suitable for advanced scenarios.
+By setting the valueAsObject property to true, you will always receive a consistent IColor object that provides you detailed information about the chosen color. Here are the properties available in the IColor object:
| Property | +Type | +Description | +
|---|---|---|
| str | +string | +CSS-compatible string (this is the same value that would normally be returned when valueAsObject is false) |
+
| hex | +string | +Hex value (does not reflect alpha) | +
| r | +number | +Red | +
| g | +number | +Green | +
| b | +number | +Blue | +
| h | +number | +Hue | +
| s | +number | +Saturation | +
| v | +number | +Value | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldContentTypePicker/index.html b/controls/PropertyFieldContentTypePicker/index.html
new file mode 100644
index 00000000..62fe6be0
--- /dev/null
+++ b/controls/PropertyFieldContentTypePicker/index.html
@@ -0,0 +1,1329 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldColumnPicker control¶
+This control generates a column picker field that can be used in the property pane of your SharePoint Framework web parts.
+The control automatically retrieves the columns for a given SharePoint list:
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldColumnPicker, PropertyFieldColumnPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldColumnPicker';
+-
+
- You'll probably want to use this control in combination with the PropertyFieldListPicker. Make sure to select the
multiSelectprop tofalse, as this control is designed to work with a single list. Store the list id in your web part properties, as follows:
+
export interface IPropertyControlsTestWebPartProps {
+ list: string; // Stores the list ID
+}
+-
+
- Create a new property for your web part, as indicated between the
BEGIN:andEND:comments below:
+
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
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
// Single column selection returning 'Internal Name' of the selected column
+PropertyFieldColumnPicker('column', {
+ label: 'Select a column',
+ context: this.context,
+ selectedColumn: this.properties.column,
+ listId: this.properties.singleListFiltered,
+ disabled: false,
+ orderBy: PropertyFieldColumnPickerOrderBy.Title,
+ onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
+ properties: this.properties,
+ onGetErrorMessage: null,
+ deferredValidationTime: 0,
+ key: 'columnPickerFieldId',
+ displayHiddenColumns: false,
+ columnReturnProperty: IColumnReturnProperty["Internal Name"]
+})
+
+// Multi column selection returning the 'Title' of the selected columns
+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
+})
+
+// Multi column selection returning the 'Title' of the selected columns as a multi-select dropdown
+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"]
+})
+Implementation¶
+The PropertyFieldColumnPicker control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| label | +string | +yes | +Property field label displayed on top. | +
| listId | +string | +yes | +The ID of the list or library you wish to select a column(s) from. | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| context | +BaseComponentContext | +yes | +Context of the current web part. | +
| selectedColumn | +string | string[] | +no | +Initial selected column(s) of the control. | +
| orderBy | +PropertyFieldColumnPickerOrderBy | +no | +Specify the property on which you want to order the retrieve set of columns. | +
| multiSelect | +boolean | +no | +Specify if you want to have a single or multi-column picker. By default this is set to false (single column picker). |
+
| webAbsoluteUrl | +string | +no | +Absolute Web Url of target site (user requires permissions) | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the date gets changed. | +
| properties | +any | +yes | +Parent web part properties, this object is use to update the property value. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| onGetErrorMessage | +function | +no | +The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. | +
| deferredValidationTime | +number | +no | +Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. |
+
| columnsToExclude | +string[] | +no | +Defines columns by which should be excluded from the column picker control. You can specify column titles or IDs | +
| filter | +string | +no | +Filter columns from OData query. | +
| onColumnsRetrieved | +(columns: ISPColumn[]) => PromiseLike |
+no | +Callback that is called before the dropdown is populated. | +
| displayHiddenColumns | +boolean | +no | +Hidden columns to be returned or not. By default this is set to false (No Hidden columns) |
+
| columnReturnProperty | +IColumnReturnProperty | +no | +Property to be returned for the selected column(s). | +
| renderFieldAs | +IPropertyFieldRenderOption | +no | +Property to render the control as Choice group or Multiselect Dropdown. This is applicable only if the multiselect is true. By default the control will be displayed as Choice Group |
+
Enum PropertyFieldColumnPickerOrderBy
| Name | +Description | +
|---|---|
| Id | +Sort by column ID | +
| Title | +Sort by column title | +
Enum IColumnReturnProperty
| Name | +Description | +
|---|---|
| Id | +Column ID to be returned |
+
| Title | +Column Title to be returned |
+
| Internal Name | +Column InternalName to be returned |
+
Enum IPropertyFieldRenderOption
+| Name | Description |
+| ---- | ---- |
+| Choice Group | Render the control as multi-select checkbox list
+| Multiselect Dropdown | Render the control as multi-select dropdown
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldDateTimePicker/index.html b/controls/PropertyFieldDateTimePicker/index.html
new file mode 100644
index 00000000..fe6bcee7
--- /dev/null
+++ b/controls/PropertyFieldDateTimePicker/index.html
@@ -0,0 +1,1376 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldContentTypePicker control¶
+This control generates a ContentType picker field that can be used in the property pane of your SharePoint Framework web parts.
+The control automatically retrieves the ContentType for a given SharePoint Site or selected SharePoint list:
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldContentTypePicker, PropertyFieldContentTypePickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldContentTypePicker';
+-
+
- You'll probably want to use this control in combination with the PropertyFieldListPicker. Make sure to select the
multiSelectprop tofalse, as this control is designed to work with a single list. Store the list id in your web part properties, as follows:
+
export interface IPropertyControlsTestWebPartProps {
+ list: string; // Stores the list ID
+}
+-
+
- Create a new property for your web part, as indicated between the
BEGIN:andEND:comments below:
+
export interface IPropertyControlsTestWebPartProps {
+ list: string; // Stores the list ID
+
+ // BEGIN: Added
+ view: string; // Stores the view ID
+ contentType : string // stores the contenttype ID
+ // END: Added
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane 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'
+})
+-
+
- To fetch the contentTypes of a particular site, change the property pane configuration as follows: +
PropertyFieldContentTypePicker('contentType', {
+ label: 'Select a Content Type',
+ context: this.context,
+ selectedContentType: this.properties.contentType,
+ disabled: false,
+ webAbsoluteUrl:"https://****.sharepoint.com/sites/*****",
+ orderBy: PropertyFieldContentTypeOrderBy.Name,
+ onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
+ properties: this.properties,
+ onGetErrorMessage: null,
+ deferredValidationTime: 0,
+ key: 'contentTypePickerFieldId'
+})
+
-
+
- To fetch the contentTypes of selected list, change the property pane configuration as follows: +
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'
+})
+
-
+
- If ListID specified in the propertiesc is not available in the selected site, the control will error out as follows +
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'
+})
+
Implementation¶
+The PropertyFieldContentTypePicker control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| label | +string | +yes | +Property field label displayed on top. | +
| listId | +string | +no | +The ID of the list or library you wish to select a contentType from. | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| context | +BaseComponentContext | +yes | +Context of the current web part. | +
| selectedContentType | +string | +string[] | +no | +
| orderBy | +PropertyFieldContentTypeOrderBy | +no | +Specify the property on which you want to order the retrieve set of ContentTypes. | +
| webAbsoluteUrl | +string | +no | +Absolute Web Url of target site (user requires permissions) | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the date gets changed. | +
| properties | +any | +yes | +Parent web part properties, this object is use to update the property value. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| onGetErrorMessage | +function | +no | +The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. | +
| deferredValidationTime | +number | +no | +Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. |
+
| contentTypesToExclude | +string[] | +no | +Defines contentTypes by which should be excluded from the contentType picker control. You can specify contentType titles or IDs | +
| filter | +string | +no | +Filter contentTypes from OData query. | +
| onContentTypesRetrieved | +(contentType: ISPContentType[]) => PromiseLike |
+no | +Callback that is called before the dropdown is populated. | +
Enum PropertyFieldContentTypePickerOrderBy
| Name | +Description | +
|---|---|
| Id | +Sort by contentType ID | +
| Title | +Sort by contentType title | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldDropdownWithCallout/index.html b/controls/PropertyFieldDropdownWithCallout/index.html
new file mode 100644
index 00000000..8749bb88
--- /dev/null
+++ b/controls/PropertyFieldDropdownWithCallout/index.html
@@ -0,0 +1,1302 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldDateTimePicker control¶
+This control generates a Date and Time picker field that can be used in the property pane of your SharePoint Framework web parts.
+The control can be configured to be date only or date and time.
+Date only
+
Date picker
+
Date and time
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldDateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-property-controls/lib/PropertyFieldDateTimePicker';
+-
+
- Create a new property for your web part, for example: +
import { IDateTimeFieldValue } from "@pnp/spfx-property-controls/lib/PropertyFieldDateTimePicker";
+
+export interface IPropertyControlsTestWebPartProps {
+ datetime: IDateTimeFieldValue;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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: null,
+ deferredValidationTime: 0,
+ key: 'dateTimeFieldId',
+ showLabels: false
+})
+Implementation¶
+The PropertyFieldDateTimePicker control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| label | +string | +yes | +Property field label displayed on top. | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| initialData | +IDateTimeFieldValue | +yes | +Initial date and time value of the control. | +
| formatData | +function | +no | +Defines a formatDate function that can override the output value. | +
| dateConvention | +DateConvention | +no | +Defines the date convention to use. By default this is set to date and time. | +
| timeConvention | +TimeConvention | +no | +Defines the time convention to use. By default this is set to 24-hour clock convention. | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the date gets changed. | +
| properties | +any | +yes | +Parent web part properties, this object is use to update the property value. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| onGetErrorMessage | +function | +no | +The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. | +
| deferredValidationTime | +number | +no | +Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. |
+
| showLabels | +boolean | +no | +Specify if labels in front of Date and Time parts should be rendered. By default this is set to true |
+
Interface IDateTimeFieldValue
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| value | +Date | +yes | +JavaScript date value. | +
| displayValue | +string | +yes | +Date value formatted as a string. | +
Enum DateConvention
| Name | +Description | +
|---|---|
| DateTime | +Shows the date and time picker | +
| Date | +Shows only the date picker | +
Enum TimeConvention
| Name | +Description | +
|---|---|
| Hours12 | +Specify the hours in 12-hours (AM / PM) time convention. | +
| Hours24 | +Specify the hours in 24-hours time convention. | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldEnterpriseTermPicker/index.html b/controls/PropertyFieldEnterpriseTermPicker/index.html
new file mode 100644
index 00000000..7679e19c
--- /dev/null
+++ b/controls/PropertyFieldEnterpriseTermPicker/index.html
@@ -0,0 +1,1430 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldDropDownWithCallout control¶
+This control generates a dropdown control with a callout.
+PropertyFieldDropDownWithCallout rendering
+
PropertyFieldDropDownWithCallout callout opened
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader';
+import { PropertyFieldDropdownWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldDropdownWithCallout';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ dropdownInfoHeaderKey: string;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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
+})
+-
+
- Implement the
calloutContentfunction as follows:
+
private getDropdownInfoHeaderCalloutContent(): JSX.Element {
+ const selectedKey: string = this.properties.dropdownInfoHeaderKey;
+
+ if (selectedKey) {
+ return React.createElement('div', {}, `you have selected ${selectedKey}`);
+ } else {
+ return React.createElement('div', {}, `you haven't selected any version`);
+ }
+}
+Implementation¶
+The PropertyFieldDropDownWithCallout control uses the same implementation as the default PropertyPaneDropdown and has the following additional properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| calloutContent | +React.ReactNode | +no | +Callout content - any HTML | +
| calloutWidth | +number | +no | +Custom width for callout including borders. If value is 0, no width is applied. | +
| calloutTrigger | +CalloutTriggers | +no | +Event to show the callout | +
| gapSpace | +number | +no | +The gap between the callout and the target | +
Enum CalloutTriggers
| Name | +Description | +
|---|---|
| Click | +Shows the callout when you hover over the icon | +
| Hover | +Shows the callout when you click on the icon | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldFilePicker/index.html b/controls/PropertyFieldFilePicker/index.html
new file mode 100644
index 00000000..08a942c3
--- /dev/null
+++ b/controls/PropertyFieldFilePicker/index.html
@@ -0,0 +1,1509 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldEnterpriseTermPicker control¶
+This control generates a term picker that can be used in the property pane of your SharePoint Framework web parts.
+++Disclaimer: This control makes use of the
+@pnp/sp-taxonomymodule to retrieve the managed metadata information. It leads to increase of the bundle/package size if the control is being used. Use the control for "enterprise" scenarios (large term stores with lots of objects) or if you need to request labels for terms.
Empty term picker
+
Selecting terms
+
Selected terms in the panel
+
Empty term picker
+
Term picker: Auto Complete
+
Limit the term set to a specific group or termset
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldEnterpriseTermPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldEnterpriseTermPicker';
+-
+
- Create a new property for your web part, for example: +
import { IPickerTerms } from "@pnp/spfx-property-controls/lib/PropertyFieldEnterpriseTermPicker";
+
+export interface IPropertyControlsTestWebPartProps {
+ terms: IPickerTerms;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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
+})
+Implementation¶
+The PropertyFieldEnterpriseTermPicker control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| label | +string | +yes | +Property field label displayed on top. | +
| panelTitle | +string | +yes | +TermSet Picker Panel title. | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| context | +BaseComponentContext | +yes | +Context of the current web part. | +
| initialValues | +IPickerTerms | +no | +Defines the selected by default term sets. | +
| allowMultipleSelections | +boolean | +no | +Defines if the user can select only one or many term sets. Default value is false. | +
| excludeSystemGroup | +boolean | +no | +Indicator to define if the system Groups are exclude. Default is false. | +
| limitByGroupNameOrID | +string | +no | +Limit the term sets that can be used by the group name or ID. | +
| limitByTermsetNameOrID | +string | +no | +Limit the terms that can be picked by the Term Set name or ID. | +
| hideTermStoreName | +boolean | +no | +Specifies if you want to show or hide the term store name from the panel. | +
| isTermSetSelectable | +boolean | +no | +Specify if the term set itself is selectable in the tree view. | +
| disabledTermIds | +string[] | +no | +Specify which terms should be disabled in the term set so that they cannot be selected. | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the date gets changed. | +
| properties | +any | +yes | +Parent web part properties, this object is use to update the property value. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| onGetErrorMessage | +function | +no | +The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. | +
| deferredValidationTime | +number | +no | +Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. |
+
| resolveDelay | +number | +no | +The delay time in ms before resolving suggestions, which is kicked off when input has been changed. e.g. if a second input change happens within the resolveDelay time, the timer will start over. Only until after the timer completes will onResolveSuggestions be called. Default is 500. | +
| includeLabels | +boolean | +no | +Specifies if term labels should be loaded from the store. | +
Interface IPickerTerms
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| key | +string | +yes | +The ID of the term | +
| name | +string | +yes | +The name of the term | +
| path | +string | +yes | +The path of the term | +
| termSet | +string | +yes | +The Id of the parent term set of the term | +
| termSetName | +string | +no | +The Name of the parent term set of the term | +
Differences between PropertyFieldEnterpriseTermPicker and PropertyFieldTermPicker¶
+PropertyFieldEnterpriseTermPicker is implemented to be used for "enterprise" Term Stores with large amount of groups, terms sets, and terms. It loads term sets and terms on demand - only at the moment when specified group or term set has been expanded in the Term Store Tree.
+To implement on-demand loading PropertyFieldEnterpriseTermPicker uses @pnp/sp-taxonomy module from @pnp/pnpjs library. It increases the size of a bundle when the control is used.
+Additionaly, PropertyFieldEnterpriseTermPicker allows to request labels for the terms in the picker.
PropertyFieldTermPicker loads all the groups and term sets from the term service during the initial request. This approach fits most of the scenarios with small and medium number of objects in a term store. Besides that, PropertyFieldTermPicker does not use any additional libraries or modules to retrieve data from the taxonomy service which makes it much more lightweight option in comparison with PropertyFieldEnterpriseTermPicker. See PropertyFieldTermPicker for implementation details.
We recommend to use PropertyFieldTermPicker control if you don't need on-demand loading or term labels.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldGrid/index.html b/controls/PropertyFieldGrid/index.html
new file mode 100644
index 00000000..c39ca131
--- /dev/null
+++ b/controls/PropertyFieldGrid/index.html
@@ -0,0 +1,1331 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldFilePicker control¶
+File picker control allows to browse and select a file from various places via the property pane. +Currently supported locations
+-
+
- Recent files - tab allows to select a file from recently modified files based on the search results. +
- Web search - tab uses Bing cognitive services to look for a file. (Only images) +
- OneDrive - tab allows to select a file from the user's One Drive. +
- Site document libraries - tab allows to select a file from the existing site document libraries. +
- Upload - tab allows to upload a file from local drive. +
- From a link - tab allows to paste a link to the document. +
Overview¶
+The control supports all types of file, however it also allows to specify list of extensions for the files that are going to be looked displayed. Currently, only single file selection is supported.
+
Different display types¶
+File picker support 3 types of views : List, Compact list and Tiles. In case Tiles view is selected, the control shows the thumbnail of the file.
+
Breadcrumb support¶
+The control displays breadcrumb navigation that allows to easily switch folders or document libraries.
+
Paged data load¶
+File picker doesn't load all the files that exist in the folder. Instead, it allows to specify how many results are loaded in a batch, and executes paged requests when new data is required.
+
PropertyFieldFilePicker example usage
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your webpart: +
import { PropertyFieldFilePicker, IPropertyFieldFilePickerProps, IFilePickerResult } from "@pnp/spfx-property-controls/lib/PropertyFieldFilePicker";
+Create a new property for your web part, for example:
+export interface IPropertyControlsTestWebPartProps {
+ filePickerResult: IFilePickerResult;
+}
+-
+
- Add the file picker property control to the
groupFieldsof the web part property pane configuration:
+
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",
+})
+Implementation¶
+The PropertyFieldFilePicker control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| properties | +any | +yes | +Parent web part properties, this object is used to update the property value. | +
| key | +string | +yes | +A unique key that indicates the identity of this control. | +
| context | +BaseComponentContext | +yes | +Current webpart context. | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the data gets changed. | +
| label | +string | +no | +Specifies the text describing the file picker. | +
| buttonLabel | +string | +no | +Specifies the label of the file picker button. | +
| buttonIcon | +string | +no | +In case it is provided the file picker will be rendered as an action button. | +
| onSave | +(filePickerResult: IFilePickerResult) => void | +yes | +Handler when the file has been selected and picker has been closed. | +
| onChange | +(filePickerResult: IFilePickerResult) => void | +no | +Handler when the file selection has been changed. | +
| onCancel | +() => void | +no | +Handler when the file picker panel has been closed without selection of a file. | +
| accepts | +string[] | +no | +Array of strings containing allowed files extensions. E.g. [".gif", ".jpg", ".jpeg", ".bmp", ".dib", ".tif", ".tiff", ".ico", ".png", ".jxr", ".svg"] | +
| required | +boolean | +no | +Sets the label to inform that the value is required. | +
| bingAPIKey | +string | +no | +Used to execute WebSearch. If not provided SearchTab will not be available. | +
| disabled | +boolean | +no | +Specifies if the picker button is disabled | +
| itemsCountQueryLimit | +number | +no | +Number of items to obtain when executing REST queries. Default 100. | +
| hideRecentTab | +boolean | +no | +Specifies if RecentTab should be hidden. | +
| hideWebSearchTab | +boolean | +no | +Specifies if WebSearchTab should be hidden. | +
| hideStockImages | +boolean | +no | +Specifies if StockImagesTab should be hidden. | +
| hideOrganisationalAssetTab | +boolean | +no | +Specifies if OrganisationalAssetTab should be hidden. | +
| hideOneDriveTab | +boolean | +no | +Specifies if OneDriveTab should be hidden. | +
| hideSiteFilesTab | +boolean | +no | +Specifies if SiteFilesTab should be hidden. | +
| hideLocalUploadTab | +boolean | +no | +Specifies if LocalUploadTab should be hidden. | +
| hideLinkUploadTab | +boolean | +no | +Specifies if LinkUploadTab should be hidden. | +
| storeLastActiveTab | +boolean | +no | +Specifies if last active tab will be stored after the Upload panel has been closed. Note: the value of selected tab is stored in the queryString hash. Default true |
+
| defaultSelectedTab | +FilePickerTabType | +no | +Specify a tab to be selected by default. If not specified, it will default to "RecentTab". | +
| allowExternalLinks | +boolean | +no | +Specifies if external links should be allowed. | +
| checkIfFileExists | +boolean | +no | +When using file links, this property allows the user to choose if the control should check if the link point to a file that exists or not. | +
| includePageLibraries | +boolean | +no | +Specifies if site pages should be displayed. | +
interface IFilePickerResult
The value returned from the selected file object.
+| Value | +Type | +Description | +
|---|---|---|
| fileName | +string | +File name of the result with the extension. | +
| fileNameWithoutExtension | +string | +File name of the result without the extension. | +
| fileAbsoluteUrl | +string | +Absolute URL of the file. Null in case of file upload. | +
| downloadFileContent | +() => Promise |
+Function allows to download file content. Returns File object. | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldGuid/index.html b/controls/PropertyFieldGuid/index.html
new file mode 100644
index 00000000..bd75732e
--- /dev/null
+++ b/controls/PropertyFieldGuid/index.html
@@ -0,0 +1,1262 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldGrid control¶
+This control generates a Grid Control .
+PropertyFieldGrid example usage
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldGrid, IItem} from '@pnp/spfx-property-controls/lib/PropertyFieldGrid';
+- define the items to show in the grid:
+
+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"
+ }
+ ];
+
+- Add the custom property Grid to the `groupFields` of the web part property pane configuration:
+
+ 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);
+ }
+ )
+Implementation¶
+The PropertyFieldGrid control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| styles | +IButtonStyles | +no | +styles object (root container) | +
| classname | +string | +no | +css ClassName (root container) | +
| isVisible | +boolean | +no | +Indicate if grid is visible | +
| label | +string | +no | +label of Grid | +
| defaultSelectedItems | +(items:IItem[]) =>void | +no | +defined default Item selected | +
| maxHeigth | +number | +no | +max height of the container , default 400px | +
| onSelected | +item[] | +no | +selected Items when are selected | +
| items | +IItem[] | +yes | +Items to show | +
| multiSelect | +boolean | +no | +Enable multiSelect , default single | +
| column1Label | +string | +no | +Label for header of first grid column | +
| column2Label | +string | +no | +Label for header of second grid column | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldIconPicker/index.html b/controls/PropertyFieldIconPicker/index.html
new file mode 100644
index 00000000..60255f48
--- /dev/null
+++ b/controls/PropertyFieldIconPicker/index.html
@@ -0,0 +1,1329 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldGuid control¶
+This control generates an input field for GUID. Incorrect GUID entered will result into an invalid input.
+PropertyFieldGuid example usage
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldGuid } from '@pnp/spfx-property-controls/lib/PropertyFieldGuid';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ guid: string;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldGuid('guid', {
+ key: 'guid',
+ label: "GUID",
+ value: this.properties.guid
+})
+-
+
- You can also implement the property your own error message with the
errorMessageproperty with the following syntax:
+
PropertyFieldGuid('guid', {
+ key: 'guid',
+ label: "GUID",
+ value: this.properties.guid,
+ errorMessage: "Please enter a correct GUID"
+})
+Implementation¶
+The PropertyFieldGuid control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| label | +string | +yes | +Property field label displayed on top. | +
| value | +string | +no | +Value to be displayed in the Guid field. | +
| errorMessage | +string | +no | +If set, this will be displayed as an error message. | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldLabelWithCallout/index.html b/controls/PropertyFieldLabelWithCallout/index.html
new file mode 100644
index 00000000..2e6bd69a
--- /dev/null
+++ b/controls/PropertyFieldLabelWithCallout/index.html
@@ -0,0 +1,1267 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ IconPicker control¶
+Property pane icon picker control that allows to search and select an icon from office-ui-fabric-react icons.
+Overview¶
+The control allows selecting an icon from the list of icons available in the office-ui-fabric-react library. Icon list is a static copy of available icons. Currently, only one icon selection is supported.
+
Displayed in the panel¶
+Icon picker always opens a new panel where you can pick an icon. The panel displays all the icons and maintains readability. Picker does not displays selected icon outside the panel.
+
How to use this control¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out the getting started page for more information about installing the dependency.
+ - Import the following module to your component: +
import { PropertyFieldIconPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldIconPicker';
+-
+
- Use the
PropertyFieldIconPickercontrol in your code as follows:
+
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"
+ }),
+Implementation¶
+The PropertyFieldIconPicker component can be configured with the following properties:
+| Property | +Type | +Required | +Description | +
|---|---|---|---|
| buttonLabel | +string | +no | +Specifies the label of the icon picker button. | +
| onSave | +(iconName: string) => void | +yes | +Handler when the icon has been selected and picker has been closed. | +
| onChanged | +(iconName: string) => void | +no | +Handler when the icon selection has been changed. | +
| disabled | +boolean | +no | +Specifies if the picker button is disabled | +
| buttonClassName | +boolean | +no | +If provided, additional class name will be added to the picker button | +
| panelClassName | +boolean | +no | +If provided, additional class name will be added to the picker panel | +
| currentIcon | +string | +no | +Specifies default selected icon | +
| renderOption | +dialog, panel |
+no | +Specifies how to render list of Icons, Values : 'Panel' or 'Dialog' default value 'Panel' | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the teams get changed. |
+
| properties | +any | +yes | +Parent web part properties, this object is used to update the property value. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| label | +string | +no | +A label to describe the icon picker control. | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldLinkWithCallout/index.html b/controls/PropertyFieldLinkWithCallout/index.html
new file mode 100644
index 00000000..f7d7d464
--- /dev/null
+++ b/controls/PropertyFieldLinkWithCallout/index.html
@@ -0,0 +1,1269 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldLabelWithCallout control¶
+This control generates a label control with a callout.
+PropertyFieldLabelWithCallout rendering
+
PropertyFieldLabelWithCallout callout opened
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout';
+import { PropertyFieldLabelWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldLabelWithCallout';
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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'
+})
+Implementation¶
+The PropertyFieldLabelWithCallout control uses the same implementation as the default PropertyPaneLabel and has the following additional properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| calloutContent | +React.ReactNode | +no | +Callout content - any HTML | +
| calloutWidth | +number | +no | +Custom width for callout including borders. If value is 0, no width is applied. | +
| calloutTrigger | +CalloutTriggers | +no | +Event to show the callout | +
| gapSpace | +number | +no | +The gap between the callout and the target | +
Enum CalloutTriggers
| Name | +Description | +
|---|---|
| Click | +Shows the callout when you hover over the icon | +
| Hover | +Shows the callout when you click on the icon | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldListPicker/index.html b/controls/PropertyFieldListPicker/index.html
new file mode 100644
index 00000000..507a050b
--- /dev/null
+++ b/controls/PropertyFieldListPicker/index.html
@@ -0,0 +1,1420 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldLinkWithCallout control¶
+This control generates a link control with a callout.
+PropertyFieldLinkWithCallout rendering
+
PropertyFieldLinkWithCallout callout opened
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout';
+import { PropertyFieldLinkWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldLinkWithCallout';
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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'
+})
+Implementation¶
+The PropertyFieldLinkWithCallout control uses the same implementation as the default PropertyPaneLink and has the following additional properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| calloutContent | +React.ReactNode | +no | +Callout content - any HTML | +
| calloutWidth | +number | +no | +Custom width for callout including borders. If value is 0, no width is applied. | +
| calloutTrigger | +CalloutTriggers | +no | +Event to show the callout | +
| gapSpace | +number | +no | +The gap between the callout and the target | +
Enum CalloutTriggers
| Name | +Description | +
|---|---|
| Click | +Shows the callout when you hover over the icon | +
| Hover | +Shows the callout when you click on the icon | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldMessage/index.html b/controls/PropertyFieldMessage/index.html
new file mode 100644
index 00000000..2a83ef5c
--- /dev/null
+++ b/controls/PropertyFieldMessage/index.html
@@ -0,0 +1,1257 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldListPicker control¶
+This control generates a list picker field that can be used in the property pane of your SharePoint Framework web parts.
+The control can be configured as a single or multi-selection list picker:
+Single list picker
+
Multi list picker
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldListPicker, PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ lists: string | string[]; // Stores the list ID(s)
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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'
+})
+Implementation¶
+The PropertyFieldListPicker control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| label | +string | +yes | +Property field label displayed on top. | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| context | +BaseComponentContext | +yes | +Context of the current web part. | +
| selectedList | +string | string[] | IPropertyFieldList | IPropertyFieldList[] | +no | +Initial selected list set of the control. | +
| baseTemplate | +number | +no | +BaseTemplate ID of the lists or libraries you want to return. | +
| includeHidden | +boolean | +no | +Specify if you want to include hidden lists in the list picker. By default this is set to true. |
+
| orderBy | +PropertyFieldListPickerOrderBy | +no | +Specify the property on which you want to order the retrieve set of lists. | +
| multiSelect | +boolean | +no | +Specify if you want to have a single or multi-list picker. By default this is set to false (single list picker). |
+
| showSelectAll | +boolean | +no | +Specify if you want the Select All checkbox. By default this is set to false (mult-list picker only). |
+
| selectAllInList | +boolean | +no | +Specify where to show the Select All checkbox. When false (default), checkbox is shown before the label, when true it is shown with the lists (mult-list picker only). | +
| selectAllInListLabel | +string | +no | +The label to use for the in list select all checkbox (mult-list picker only). | +
| webAbsoluteUrl | +string | +no | +Absolute Web Url of target site (user requires permissions) | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the date gets changed. | +
| properties | +any | +yes | +Parent web part properties, this object is use to update the property value. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| onGetErrorMessage | +function | +no | +The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. | +
| deferredValidationTime | +number | +no | +Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. |
+
| listsToExclude | +string[] | +no | +Defines list titles which should be excluded from the list picker control (list title or ID). | +
| filter | +string | +no | +Filter list from OData query (takes precedence over Hidden and BaseTemplate Filters). | +
| onListsRetrieved | +(lists: ISPList[]) => PromiseLike |
+no | +Callback that is called before the dropdown is populated. | +
| includeListTitleAndUrl | +boolean | +no | +Specifies if the picker returns list id, title and url as an object instead on id. | +
| contentTypeId | +string | +no | +Specifies a content type ID , or a portion of one. If specified, all the lists presented in the control will have at least one content type beginning with the specified content type id. | +
Interface IPropertyFieldList
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| id | +string | +yes | +The ID of the list | +
| title | +string | +no | +List's title | +
| url | +string | +no | +List's server relative url | +
Enum PropertyFieldListPickerOrderBy
| Name | +Description | +
|---|---|
| Id | +Sort by list / library ID | +
| Title | +Sort by list / library title | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldMonacoEditor/index.html b/controls/PropertyFieldMonacoEditor/index.html
new file mode 100644
index 00000000..e45aa88a
--- /dev/null
+++ b/controls/PropertyFieldMonacoEditor/index.html
@@ -0,0 +1,1298 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldMessage control¶
+This control generates a Message Bar that will show messages .
+PropertyFieldMessage example usage
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldMessage} from '@pnp/spfx-property-controls/lib/PropertyFieldMessage';
+import { MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldMessage("", {
+ key: "MessageKey",
+ text: "Something went wrong... try later.",
+ messageType: MessageBarType.error,
+ isVisible: true
+ })
+Implementation¶
+The PropertyFieldMessage control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| text | +string | +yes | +Message Text | +
| messageType | +MessageBarType | +yes | +type of message | +
| multiline | +boolean | +no | +Indicate if message is multiline | +
| classname | +string | +no | +css ClassName | +
| isVisible | +boolean | +yes | +Indicate if message is visible | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldMultiSelect/index.html b/controls/PropertyFieldMultiSelect/index.html
new file mode 100644
index 00000000..e0a67c57
--- /dev/null
+++ b/controls/PropertyFieldMultiSelect/index.html
@@ -0,0 +1,1250 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldMonacoEditor control¶
+This control implement Microsoft Monaco Editor.
+PropertyFieldMonacoEditor example usage
+
+
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldMonacoEditor } from '@pnp/spfx-property-controls/lib/PropertyFieldMonacoEditor';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ monacoEditorValue: string;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldMonacoEditor('monacoEditor', {
+ key: 'monacoEditor',
+ value: this.properties.monacoEditorValue,
+ showMiniMap: true,
+ onChange: this.monacoChange ,
+ language:"json",
+ showLineNumbers:true,
+ }),
+Implementation¶
+The PropertyFieldMonacoEditor control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| value | +number | +yes | +Value field. | +
| theme | +string | +no | +'vs-dark' | +
| readOnly | +boolean | +no | +editor is read only | +
| showLineNumbers | +boolean | +no | +Show line number - default no | +
| showMiniMap | +boolean | +no | +Show Mini Map - default yes | +
| onChange | +(newValue:string) => void; | +no | +If set, this method is used to get the the input value when it changed | +
| language | +string | +yes | +language, please see https://microsoft.github.io/monaco-editor/index.html for all supported languages | +
| jsonDiagnosticsOptions | +monaco.languages.json.DiagnosticsOptions | +no | +see https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.json.DiagnosticsOptions.html | +
| jscriptDiagnosticsOptions | +monaco.languages.typescript.DiagnosticsOptions | +no | +see https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.typescript.DiagnosticsOptions.html | +
| panelWidth | +number | +no | +Panel Width default 800px. | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldNumber/index.html b/controls/PropertyFieldNumber/index.html
new file mode 100644
index 00000000..eec3c6ee
--- /dev/null
+++ b/controls/PropertyFieldNumber/index.html
@@ -0,0 +1,1329 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldMultiSelect control¶
+This control generates a dropdown with the possibility of selecting multiple values.
+Multi-select field rendering
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldMultiSelect } from '@pnp/spfx-property-controls/lib/PropertyFieldMultiSelect';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ multiSelect: string[];
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldMultiSelect('multiSelect', {
+ key: 'multiSelect',
+ label: "Multi select field",
+ options: [
+ {
+ key: "EN",
+ text: "EN"
+ },
+ {
+ key: "FR",
+ text: "FR"
+ },
+ {
+ key: "NL",
+ text: "NL"
+ }
+ ],
+ selectedKeys: this.properties.multiSelect
+})
+Implementation¶
+The PropertyFieldMultiSelect control uses the same implementation as the default PropertyPaneDropdown control and has the following additional properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| selectedKeys | +string[] OR number[] | +no | +Specifies the selected keys. | +
++Important: Do not make use of the
+selectedKeyproperty. This property is inherited from thePropertyPaneDropdowncontrol.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldOrder/index.html b/controls/PropertyFieldOrder/index.html
new file mode 100644
index 00000000..253bbe2d
--- /dev/null
+++ b/controls/PropertyFieldOrder/index.html
@@ -0,0 +1,1418 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldNumber control¶
+This control generates an input field for numbers. Text is not allowed as this will result into an invalid input.
+PropertyFieldNumber example usage
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldNumber } from '@pnp/spfx-property-controls/lib/PropertyFieldNumber';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ numberValue: number;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldNumber("numberValue", {
+ key: "numberValue",
+ label: "Number value only",
+ description: "Number field description",
+ value: this.properties.numberValue,
+ maxValue: 10,
+ minValue: 1,
+ disabled: false
+})
+-
+
- You can also implement your own validation with the
onGetErrorMessageproperty as follows:
+
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 '';
+ }
+})
+Implementation¶
+The PropertyFieldNumber control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| label | +string | +yes | +Property field label displayed on top. | +
| description | +string | +no | +The number field input description. | +
| placeholder | +string | +no | +Placeholder text to be displayed in the number field. | +
| value | +number | +no | +Value to be displayed in the number field. | +
| maxValue | +number | +no | +Maximum number that can be inserted. | +
| minValue | +number | +no | +Minimum number that can be inserted. | +
| ariaLabel | +string | +no | +The aria label for the number field. | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| errorMessage | +string | +no | +If set, this will be displayed as an error message. | +
| onGetErrorMessage | +(value: number) => string | +no | +If set, this method is used to get the validation error message and determine whether the input value is valid or not. | +
| deferredValidationTime | +number | +no | +Number field will start to validate after users stop typing for deferredValidationTime milliseconds. |
+
| precision | +number | +no | +Precision to round the value to. If the precision is not defined the value is not rounded. | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldPassword/index.html b/controls/PropertyFieldPassword/index.html
new file mode 100644
index 00000000..e44356b8
--- /dev/null
+++ b/controls/PropertyFieldPassword/index.html
@@ -0,0 +1,1254 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldOrder control¶
+This control generates a list that can be easily reordered using drag and drop and/or arrow buttons.
+PropertyFieldOrder
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldOrder } from '@pnp/spfx-property-controls/lib/PropertyFieldOrder';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ orderedItems: Array<any>;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldOrder("orderedItems", {
+ key: "orderedItems",
+ label: "Ordered Items",
+ items: this.properties.orderedItems,
+ properties: this.properties,
+ onPropertyChange: this.onPropertyPaneFieldChanged
+})
+Item Rendering¶
+By default, items will render using the toString() method for each element in your items array. This works well for simple arrays of strings, numbers, etc.
Object Property¶
+When working with an array of objects, you can specify the name of the property to use as the display value by specifying the textProperty property.
For instance, for an array of objects like the following:
+[
+ {"text": "Cat", "iconName": "Cat"},
+ {"text": "Pig", "iconName": "Savings"},
+ {"text": "Human", "iconName": "Running"},
+ {"text": "Robot", "iconName": "Robot"},
+ {"text": "Dog", "iconName": "FangBody"}
+]
+To prevent every item from showing as [object Object], you can set the textProperty property to the name of the property you would like to use for display:
PropertyFieldOrder("orderedItems", {
+ key: "orderedItems",
+ label: "Ordered Items",
+ items: this.properties.orderedItems,
+ textProperty: "text",
+ properties: this.properties,
+ onPropertyChange: this.onPropertyPaneFieldChanged
+})
+
Custom Rendering¶
+You can fully customize how items are rendered by providing the onRenderItem callback function and returning whatever JSX.Element you want.
For example, you can define your function in a tsx file like this:
+import * as React from 'react';
+
+export const orderedItem = (item:any, index:number): JSX.Element => {
+ return (
+ <span>
+ <i className={"ms-Icon ms-Icon--" + item.iconName} style={{paddingRight:'4px'}}/>
+ {item.text}
+ </span>
+ );
+};
+You can then import this function into your webpart using the relative path to this file similar to the following:
+import { orderedItem } from './components/OrderedItem';
+Then you can simply reference it in your PropertyFieldOrder:
PropertyFieldOrder("orderedItems", {
+ key: "orderedItems",
+ label: "Ordered Items",
+ items: this.properties.orderedItems,
+ onRenderItem: orderedItem,
+ properties: this.properties,
+ onPropertyChange: this.onPropertyPaneFieldChanged
+})
+
Implementation¶
+The PropertyFieldOrder control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| label | +string | +yes | +Property field label displayed on top. | +
| items | +Array |
+yes | +An array of values to reorder. | +
| textProperty | +string | +no | +The property to use for display, when undefined, the toString() method of the object is used (ignored when the onRenderItem function is specified) | +
| maxHeight | +number | +no | +The maximum height for the items in px (when not set, the control expands as necessary) | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| disableDragAndDrop | +boolean | +no | +When true, drag and drop reordering is disabled (defaults to false) | +
| removeArrows | +boolean | +no | +When true, arrow buttons are not displayed (defaults to false) | +
| moveUpIconName | +string | +no | +The name of the UI Fabric Font Icon to use for the move up button (defaults to ChevronUpSmall) | +
| moveDownIconName | +string | +no | +The name of the UI Fabric Font Icon to use for the move down button (defaults to ChevronDownSmall) | +
| onRenderItem | +function | +no | +Optional callback to provide custom rendering of the item (default is simple text based on either item or the property identified in the textProperty) | +
| properties | +any | +yes | +Parent web part properties, this object is use to update the property value. | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the date gets changed. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldPeoplePicker/index.html b/controls/PropertyFieldPeoplePicker/index.html
new file mode 100644
index 00000000..189cd2cb
--- /dev/null
+++ b/controls/PropertyFieldPeoplePicker/index.html
@@ -0,0 +1,1403 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldPassword control¶
+This control generates an input field for password. Text is not visible .
+PropertyFieldPassword example usage
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldPassword } from '@pnp/spfx-property-controls/lib/PropertyFieldPassword';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ password: string;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldPassword("password", {
+ key: "password",
+ label: "password",
+ value: this.properties.password,
+ onChanged : (value: string) => {
+ console.log(value);
+ }
+})
+Implementation¶
+The PropertyFieldPassword control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| label | +string | +no | +Property field label displayed on top. | +
| value | +string | +no | +Value to be displayed in the number field. | +
| onChanged | +(value: string) => void | +no | +If set, this method is used to get the the input value | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldRoleDefinitionPicker/index.html b/controls/PropertyFieldRoleDefinitionPicker/index.html
new file mode 100644
index 00000000..0bfeafe2
--- /dev/null
+++ b/controls/PropertyFieldRoleDefinitionPicker/index.html
@@ -0,0 +1,1413 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldPeoplePicker control¶
+This control generates a people / group picker that can be used in the property pane of your SharePoint Framework web parts.
+Searching for persons
+
Searching for groups
+
Selected people / groups
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldPeoplePicker, PrincipalType } from '@pnp/spfx-property-controls/lib/PropertyFieldPeoplePicker';
+-
+
- Create a new property for your web part, for example: +
import { IPropertyFieldGroupOrPerson } from "@pnp/spfx-property-controls/lib/PropertyFieldPeoplePicker";
+
+export interface IPropertyControlsTestWebPartProps {
+ people: IPropertyFieldGroupOrPerson[];
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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'
+})
+Implementation¶
+The PropertyFieldPeoplePicker control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| label | +string | +yes | +Property field label displayed on top. | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| context | +BaseComponentContext | +yes | +Context of the current web part. | +
| initialData | +IPropertyFieldGroupOrPerson[] | +no | +Initial data to load in the people picker (optional). | +
| allowDuplicate | +boolean | +no | +Defines if the People Picker allows to select duplicated users (optional). | +
| multiSelect | +boolean | +no | +Define if you want to allow multi user / group selection. (optional, true by default). | +
| principalType | +PrincipalType[] | +no | +Define which type of data you want to retrieve: User, SharePoint groups, Security groups. Multiple are possible. | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the date gets changed. | +
| properties | +any | +yes | +Parent web part properties, this object is use to update the property value. | +
| targetSiteUrl | +string | +no | +Specify the URL of the target site from which you want to retrieve the users/groups. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| onGetErrorMessage | +function | +no | +The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. | +
| deferredValidationTime | +number | +no | +Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. |
+
Interface IPropertyFieldGroupOrPerson
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| id | +string | +no | +The ID of the group | +
| description | +string | +no | +Group description | +
| fullName | +string | +yes | +Users' full name or group display name | +
| login | +string | +yes | +Users' login or group provider name (when security group) or group account name (when SharePoint group). | +
| string | +no | +Users' email | +|
| jobTitle | +string | +no | +Users' job title | +
| initials | +string | +no | +Users' initials | +
| imageUrl | +string | +no | +Users' profile image URL | +
Enum PrincipalType
The PrincipalType enum can be used to specify the types of information you want to query: User, Security groups, and/or SharePoint groups.
| Name | +Description | +
|---|---|
| Users | +To specify if you want to retrieve users. | +
| Security | +To specify if you want to retrieve security groups. | +
| SharePoint | +To specify if you want to retrieve SharePoint groups. | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldSearch/index.html b/controls/PropertyFieldSearch/index.html
new file mode 100644
index 00000000..a91ef1db
--- /dev/null
+++ b/controls/PropertyFieldSearch/index.html
@@ -0,0 +1,1290 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldRoleDefinitionPicker control¶
+Role Definition picker control allows to select role definitions of a specific web via the property pane.
+Overview¶
+The control allows a you to pick role definitions from a dropdown control. It supports role definition selection using the dropdown control of Office fabric UI with multi-select enabled.
+
PropertyFieldRoleDefinitionPicker example usage
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your webpart: +
import { IBasePermissions, IPropertyFieldRoleDefinitionPickerProps , PropertyFieldRoleDefinitionPicker, RoleTypeKind , IRoleDefinitionInformation } from "@pnp/spfx-property-controls/lib/PropertyFieldRoleDefinitionPicker";
+Create a new property for your web part, for example:
+export interface IPropertyControlsTestWebPartProps {
+ roleDefinitions: IRoleDefinitionInformation[];
+}
+-
+
- Add the role definition picker property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldRoleDefinitionPicker('roleDefinitions', {
+ context: this.context,
+ label: "Role Definitions",
+ roleDefinitions: this.properties.roleDefinitions,
+ onPropertyChange: this.onPropertyPaneFieldChanged,
+ properties: this.properties,
+ key: "roleDefinitionPickerId",
+ selectedRoleDefinition:["Full Control"],
+ roleDefinitionsToExclude: ["System.LimitedView"],
+})
+Implementation¶
+The PropertyFieldRoleDefinitionPicker control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| properties | +any | +yes | +Parent web part properties, this object is used to update the property value. | +
| key | +string | +yes | +A unique key that indicates the identity of this control. | +
| context | +BaseComponentContext | +yes | +Current webpart context. | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the data gets changed. | +
| label | +string | +no | +Specifies the text describing the role definition picker. | +
| webAbsoluteUrl | +string | +no | +Absolute Web Url of target site (user requires permissions) | +
| required | +boolean | +no | +Sets the label to inform that the value is required. | +
| disabled | +boolean | +no | +Specifies if the picker button is disabled | +
| roleDefinitions | +IRoleDefinitionInformation[] | +yes | +The value of selected role definitions | +
| multiSelect | +boolean | +no | +Specify if you want to have a single or multi-select role definition picker. By default this is set to true (multi-select role picker). |
+
| selectedRoleDefinition | +string[] | +no | +Pre-selected role definitions for the picker control | +
| roleDefinitionsToExclude | +string[] | +no | +Role definitions to be excluded from the picker control | +
| onRoleDefinitionsRetrieved | +(roleDefinitions: IRoleDefinitionInformation[]) => PromiseLike<IRoleDefinitionInformation[]> | IRoleDefinitionInformation[] |
+no | +Callback that is called before the dropdown is populated. | +
| onGetErrorMessage | +function | +no | +The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. | +
interface IRoleDefinitionInformation
The value returned from the selected role definition.
+| Value | +Type | +Description | +
|---|---|---|
| Id | +number | +Id of the role definition. | +
| Name | +string | +Name of the selected role definition. | +
| Description | +string | +Description of selected role definition. | +
| Hidden | +boolean | +Whether selected role definition is hidden or not. | +
| Order | +number | +Order of selected role definition. | +
| RoleTypeKind | +RoleTypeKind | +RoleTypeKind of selected role definition. | +
| BasePermissions | +IBasePermissions | +BasePermissions of selected role definition. | +
interface IBasePermissions
| Value | +Type | +
|---|---|
| Low | +number | +
| High | +number | +
type RoleTypeKind
| Value | +Type | +
|---|---|
| RoleTypeKind | +0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldSitePicker/index.html b/controls/PropertyFieldSitePicker/index.html
new file mode 100644
index 00000000..238038d0
--- /dev/null
+++ b/controls/PropertyFieldSitePicker/index.html
@@ -0,0 +1,1351 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldSearch control¶
+This control generates an input field for Search.
+PropertyFieldSearch example usage
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldSearch } from '@pnp/spfx-property-controls/lib/PropertyFieldSearch';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ searchValue: string;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldSearch("searchValue", {
+ key: "search",
+ placeholder: 'Search libraries',
+ value: this.properties.searchValue,
+ onSearch: this._onSearch,
+ styles: { root: { margin: 10 } }
+ }),
+Implementation¶
+The PropertyFieldSearch control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| PlaceHolder | +string | +no | +Property field PlaceHolder displayed on input. | +
| value | +number | +no | +Value to be displayed in field. | +
| underlined | +boolean | +no | +Indicate if control is render as underline | +
| styles | +ISearchBoxStyles | +no | +Styles to apply | +
| className | +string | +no | +Class Name | +
| onSearch | +(value: string) => void | +no | +If set, this method is used to get the the input value when user press enter key | +
| onChange | +(value: string) => void | +no | +If set, this method is used to get the the input value when it changed | +
| onClear | +(ev: any) => void | +no | +If set, this method is fired when user click the clear (cross) on the input field | +
| onEscape | +(ev: any) => void | +no | +If set, this method is fired when user press the escape key | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldSliderWithCallout/index.html b/controls/PropertyFieldSliderWithCallout/index.html
new file mode 100644
index 00000000..2c23ddfe
--- /dev/null
+++ b/controls/PropertyFieldSliderWithCallout/index.html
@@ -0,0 +1,1287 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldSitePicker control¶
+This control generates a site picker that can be used in the property pane of your SharePoint Framework web parts.
+Searching for sites
+
Selected sites
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldSitePicker } from '@pnp/spfx-property-controls/lib/PropertyFieldSitePicker';
+-
+
- Create a new property for your web part, for example: +
import { IPropertyFieldSite } from "@pnp/spfx-property-controls/lib/PropertyFieldSitePicker";
+
+export interface IPropertyControlsTestWebPartProps {
+ sites: IPropertyFieldSite[];
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldSitePicker('sites', {
+ label: 'Select sites',
+ initialSites: this.properties.sites,
+ context: this.context,
+ deferredValidationTime: 500,
+ multiSelect: true,
+ onPropertyChange: this.onPropertyPaneFieldChanged,
+ properties: this.properties,
+ key: 'sitesFieldId'
+})
+Implementation¶
+The PropertyFieldSitePicker control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| label | +string | +yes | +Property field label displayed on top. | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| context | +BaseComponentContext | +yes | +Context of the current web part. | +
| initialSites | +IPropertyFieldSite[] | +no | +Initial sites to load in the site picker (optional). | +
| multiSelect | +boolean | +no | +Define if you want to allow multiple sites selection. (optional, false by default). | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the sites get changed. |
+
| properties | +any | +yes | +Parent web part properties, this object is use to update the property value. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| onGetErrorMessage | +function | +no | +The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. | +
| deferredValidationTime | +number | +no | +Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. |
+
| trimDuplicates | +boolean | +no | +Specifies if the duplicates should be trimmed. false by default. Applicable if mode is set to site or web. | +
| additionalQuery | +string | +no | +If provided will be added to the search query as AND part. Applicable if mode is set to site or web. | +
Interface IPropertyFieldSite
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| id | +string | +no | +The ID of the site | +
| title | +string | +no | +Site's display name | +
| url | +string | +no | +URL to the site | +
| webId | +string | +no | +The ID of the web | +
| hubSiteId | +string | +no | +ID of the hub site. | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldSpinButton/index.html b/controls/PropertyFieldSpinButton/index.html
new file mode 100644
index 00000000..28a03e27
--- /dev/null
+++ b/controls/PropertyFieldSpinButton/index.html
@@ -0,0 +1,1317 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldSliderWithCallout control¶
+This control generates a slider control with a callout.
+PropertyFieldSliderWithCallout rendering
+
PropertyFieldSliderWithCallout callout opened
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader';
+import { PropertyFieldSliderWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldSliderWithCallout';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ sliderWithCalloutValue: number;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldSliderWithCallout('sliderWithCalloutValue', {
+ calloutContent: React.createElement('div', {}, 'Select background image opacity'),
+ calloutTrigger: CalloutTriggers.Click,
+ calloutWidth: 200,
+ key: 'sliderWithCalloutFieldId',
+ label: 'Opacity',
+ max: 100,
+ min: 0,
+ step: 1,
+ showValue: true,
+ value: this.properties.sliderWithCalloutValue,
+ debounce: 1000
+})
+Implementation¶
+The PropertyFieldSliderWithCallout control uses the same implementation as the default PropertyPaneSlider and has the following additional properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| calloutContent | +React.ReactNode | +no | +Callout content - any HTML | +
| calloutWidth | +number | +no | +Custom width for callout including borders. If value is 0, no width is applied. | +
| calloutTrigger | +CalloutTriggers | +no | +Event to show the callout | +
| gapSpace | +number | +no | +The gap between the callout and the target | +
| debounce | +number | +no | +Time specified in milliseconds after which the onChanged handler is going to be called. | +
Enum CalloutTriggers
| Name | +Description | +
|---|---|
| Click | +Shows the callout when you hover over the icon | +
| Hover | +Shows the callout when you click on the icon | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldSpinner/index.html b/controls/PropertyFieldSpinner/index.html
new file mode 100644
index 00000000..dba66567
--- /dev/null
+++ b/controls/PropertyFieldSpinner/index.html
@@ -0,0 +1,1250 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldSpinButton control¶
+This control generates a spin button which allows the user to incrementally adjust a value in small steps.
+PropertyFieldSpinButton initial render
+
PropertyFieldSpinButton increment
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldSpinButton } from '@pnp/spfx-property-controls/lib/PropertyFieldSpinButton';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ spinValue: number;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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'
+})
+Implementation¶
+The PropertyFieldSpinButton control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| label | +string | +yes | +Property field label displayed on top. | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| initialValue | +number | +no | +Initial number value of the control. | +
| step | +number | +no | +The difference between the two adjacent values of the SpinButton (default is 1) | +
| min | +number | +no | +The minimum value (no minimum when unspecified) | +
| max | +number | +no | +The minimum value (no minimum when unspecified) | +
| incrementIconName | +string | +no | +The name of the UI Fabric Font Icon to use for the increment button (defaults to ChevronUpSmall) | +
| decrementIconName | +string | +no | +The name of the UI Fabric Font Icon to use for the decrement button (defaults to ChevronDownSmall) | +
| suffix | +string | +no | +An optional string value to append to the field display | +
| decimalPlaces | +number | +no | +The number of decimal places to show/allow (defaults to 0) | +
| properties | +any | +yes | +Parent web part properties, this object is use to update the property value. | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the date gets changed. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldSwatchColorPicker/index.html b/controls/PropertyFieldSwatchColorPicker/index.html
new file mode 100644
index 00000000..643e2d3b
--- /dev/null
+++ b/controls/PropertyFieldSwatchColorPicker/index.html
@@ -0,0 +1,1409 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldSpinner control¶
+This control generates a Message Bar that will show messages .
+PropertyFieldSpinner example usage
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldSpinner} from '@pnp/spfx-property-controls/lib/PropertyFieldSpinner';
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldSpinner("", {
+ key: "sp1",
+ size: SpinnerSize.medium,
+ isVisible: true,
+ label: "Loading ..."
+ })
+Implementation¶
+The PropertyFieldSpinner control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| size | +SpinnerSize | +yes | +Size of Spinner | +
| classname | +string | +no | +css ClassName | +
| isVisible | +boolean | +yes | +Indicate if message is visible | +
| Label | +string | +no | +Label to Show | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldTeamPicker/index.html b/controls/PropertyFieldTeamPicker/index.html
new file mode 100644
index 00000000..2b60aaa2
--- /dev/null
+++ b/controls/PropertyFieldTeamPicker/index.html
@@ -0,0 +1,1347 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldSwatchColorPicker control¶
+This control generates a swatch color picker that you can use inside the property pane.
+PropertyFieldSwatchColorPicker
+
PropertyFieldColorPicker color selector
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldSwatchColorPicker, PropertyFieldSwatchColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldSwatchColorPicker';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ color: string;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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'
+})
+Implementation¶
+The PropertyFieldColorPicker control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| label | +string | +yes | +Property field label displayed on top. | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| selectedColor | +string or IColor | +no | +The CSS-compatible string or an IColor object to describe the initial color | +
| color | +IPropertyFieldSwatchColorOption[] | +yes | +The color choices (color can be any CSS-Compatible string, labels are optional and will be shown as a tooltip on the swatch) | +
| showAsCircles | +boolean | +no | +When true, color cells are shown as circles. When false (default), color cells are shown as squares | +
| columnCount | +number | +no | +The number of cells to show per row (defaults to 6, minimum of 1 and maximum of 8) | +
| style | +PropertyFieldSwatchColorPickerStyle | +no | +Determines how the control is displayed (defaults to inline) | +
| iconName | +string | +no | +The name of the UI Fabric Font Icon to use for Inline display (defaults to Color) | +
| valueAsObject | +boolean | +no | +When true, the property is returned as an IColor object. When false (default), the property is returned as a CSS-compatible string | +
| properties | +any | +yes | +Parent web part properties, this object is use to update the property value. | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the date gets changed. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
Enum PropertyFieldSwatchColorPickerStyle
| Name | +Description | +
|---|---|
| Full | +Display the full control in the property pane | +
| Inline | +Display the color picker inline | +
Value¶
+By default, the Swatch Color Picker returns the value as a CSS-compatible string. This allows you the flexibility of simply assigning the value to an inline style as is and this is usually sufficient. However, this also limits the information directly available to you since the format could be a Hex code, an RGBA value, or even a named color and may not be suitable for advanced scenarios.
+By setting the valueAsObject property to true, you will always receive a consistent IColor object that provides you detailed information about the chosen color. Here are the properties available in the IColor object:
| Property | +Type | +Description | +
|---|---|---|
| str | +string | +CSS-compatible string (this is the same value that would normally be returned when valueAsObject is false) |
+
| hex | +string | +Hex value (does not reflect alpha) | +
| r | +number | +Red | +
| g | +number | +Green | +
| b | +number | +Blue | +
| h | +number | +Hue | +
| s | +number | +Saturation | +
| v | +number | +Value | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldTermPicker/index.html b/controls/PropertyFieldTermPicker/index.html
new file mode 100644
index 00000000..cca07ac1
--- /dev/null
+++ b/controls/PropertyFieldTermPicker/index.html
@@ -0,0 +1,1441 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldTeamPicker control¶
+This control generates a team picker that can be used in the property pane of your SharePoint Framework web parts.
+Searching for teams
+
Selected teams
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Request Microsoft Graph permissions in
config/package-solution.json:
+
{
+ "solution": {
+ "webApiPermissionRequests": [
+ {
+ "resource": "Microsoft Graph",
+ "scope": "Team.ReadBasic.All"
+ }, {
+ "resource": "Microsoft Graph",
+ "scope": "Files.Read"
+ }]
+ }
+}
+
+
+Note
+Team.ReadBasic.All and Files.Read is a minimum set of permissions needed for the component. For other options please see List Joined Teams and Get Drive documentation.
-
+
- Import the following modules to your component: +
import { PropertyFieldSitePicker } from '@pnp/spfx-property-controls/lib/PropertyFieldSitePicker';
+-
+
- Create a new property for your web part, for example: +
import { IPropertyFieldTeam } from '../../PropertyFieldTeamPicker';
+
+export interface IPropertyControlsTestWebPartProps {
+ teams: IPropertyFieldTeam[];
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldTeamPicker('teams', {
+ key: 'teamsPicker',
+ context: this.context,
+ label: 'Select teams',
+ onPropertyChange: this.onPropertyPaneFieldChanged,
+ properties: this.properties,
+ initialTeams: this.properties.teams,
+ multiSelect: true
+})
+Implementation¶
+The PropertyFieldTeamPicker control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| label | +string | +yes | +Property field label displayed on top. | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| context | +BaseComponentContext | +yes | +Context of the current web part. | +
| initialTeams | +IPropertyFieldTeam[] | +no | +Initial teams to load in the site picker (optional). | +
| multiSelect | +boolean | +no | +Define if you want to allow multiple teams selection. (optional, false by default). | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the teams get changed. |
+
| properties | +any | +yes | +Parent web part properties, this object is used to update the property value. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| onGetErrorMessage | +function | +no | +The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. | +
| deferredValidationTime | +number | +no | +Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. |
+
Interface IPropertyFieldTeam
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| id | +string | +no | +The ID of the team (group) | +
| title | +string | +no | +Teams's display name | +
| url | +string | +no | +URL to the underlying site | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldTextWithCallout/index.html b/controls/PropertyFieldTextWithCallout/index.html
new file mode 100644
index 00000000..5ee126dd
--- /dev/null
+++ b/controls/PropertyFieldTextWithCallout/index.html
@@ -0,0 +1,1276 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldTermPicker control¶
+This control generates a term picker that can be used in the property pane of your SharePoint Framework web parts.
+++Disclaimer: This control makes use of the
+ProcessQueryAPI end-points to retrieve the managed metadata information. This will get changed once the APIs for managing managed metadata will become available.
Empty term picker
+
Selecting terms
+
Selected terms in the panel
+
Empty term picker
+
Term picker: Auto Complete
+
Limit the term set to a specific group or termset
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldTermPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldTermPicker';
+-
+
- Create a new property for your web part, for example: +
import { IPickerTerms } from "@pnp/spfx-property-controls/lib/PropertyFieldTermPicker";
+
+export interface IPropertyControlsTestWebPartProps {
+ terms: IPickerTerms;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldTermPicker('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'
+})
+Implementation¶
+The PropertyFieldTermPicker control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| label | +string | +yes | +Property field label displayed on top. | +
| panelTitle | +string | +yes | +TermSet Picker Panel title. | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| context | +BaseComponentContext | +yes | +Context of the current web part. | +
| initialValues | +IPickerTerms | +no | +Defines the selected by default term sets. | +
| allowMultipleSelections | +boolean | +no | +Defines if the user can select only one or many term sets. Default value is false. | +
| excludeSystemGroup | +boolean | +no | +Indicator to define if the system Groups are exclude. Default is false. | +
| limitByGroupNameOrID | +string | +no | +Limit the term sets that can be used by the group name or ID. | +
| limitByTermsetNameOrID | +string | +no | +Limit the terms that can be picked by the Term Set name or ID. | +
| hideTermStoreName | +boolean | +no | +Specifies if you want to show or hide the term store name from the panel. | +
| isTermSetSelectable | +boolean | +no | +Specify if the term set itself is selectable in the tree view. | +
| areTermsSelectable | +boolean | +no | +Specify if the terms are selectable in the tree view. Default value is true |
+
| areTermsHidden | +boolean | +no | +Specify if the terms are hidden from the tree view. | +
| disabledTermIds | +string[] | +no | +Specify which terms should be disabled in the term set so that they cannot be selected. | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the date gets changed. | +
| properties | +any | +yes | +Parent web part properties, this object is use to update the property value. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| onGetErrorMessage | +function | +no | +The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. | +
| deferredValidationTime | +number | +no | +Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. |
+
| resolveDelay | +number | +no | +The delay time in ms before resolving suggestions, which is kicked off when input has been changed. e.g. if a second input change happens within the resolveDelay time, the timer will start over. Only until after the timer completes will onResolveSuggestions be called. Default is 500. | +
| anchorId | +string | +no | +When using LimitByTermsetNameOrId, set the anchorid to a child term in the TermSet to be able to select terms from that level and below. | +
Interface IPickerTerms
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| key | +string | +yes | +The ID of the term | +
| name | +string | +yes | +The name of the term | +
| path | +string | +yes | +The path of the term | +
| termSet | +string | +yes | +The Id of the parent term set of the term | +
| termSetName | +string | +no | +The Name of the parent term set of the term | +
Differences between PropertyFieldEnterpriseTermPicker and PropertyFieldTermPicker¶
+PropertyFieldEnterpriseTermPicker is implemented to be used for "enterprise" Term Stores with large amount of groups, terms sets, and terms. It loads term sets and terms on demand - only at the moment when specified group or term set has been expanded in the Term Store Tree.
+To implement on-demand loading PropertyFieldEnterpriseTermPicker uses @pnp/sp-taxonomy module from @pnp/pnpjs library. It increases the size of a bundle when the control is used.
+Additionally, PropertyFieldEnterpriseTermPicker allows to request labels for the terms in the picker.
PropertyFieldTermPicker loads all the groups and term sets from the term service during the initial request. This approach fits most of the scenarios with small and medium number of objects in a term store. Besides that, PropertyFieldTermPicker does not use any additional libraries or modules to retrieve data from the taxonomy service which makes it much more lightweight option in comparison with PropertyFieldEnterpriseTermPicker. See PropertyFieldTermPicker for implementation details.
We recommend to use PropertyFieldTermPicker control if you don't need on-demand loading or term labels.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldToggleWithCallout/index.html b/controls/PropertyFieldToggleWithCallout/index.html
new file mode 100644
index 00000000..c64ebe2f
--- /dev/null
+++ b/controls/PropertyFieldToggleWithCallout/index.html
@@ -0,0 +1,1277 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldTextWithCallout control¶
+This control generates a text field control with a callout.
+PropertyFieldTextWithCallout rendering
+
PropertyFieldTextWithCallout callout opened
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader';
+import { PropertyFieldTextWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldTextWithCallout';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ textInfoHeaderValue: string;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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
+})
+Implementation¶
+The PropertyFieldTextWithCallout control uses the same implementation as the default PropertyPaneTextField and has the following additional properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| calloutContent | +React.ReactNode | +no | +Callout content - any HTML | +
| calloutWidth | +number | +no | +Custom width for callout including borders. If value is 0, no width is applied. | +
| calloutTrigger | +CalloutTriggers | +no | +Event to show the callout | +
| gapSpace | +number | +no | +The gap between the callout and the target | +
Enum CalloutTriggers
| Name | +Description | +
|---|---|
| Click | +Shows the callout when you hover over the icon | +
| Hover | +Shows the callout when you click on the icon | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyFieldViewPicker/index.html b/controls/PropertyFieldViewPicker/index.html
new file mode 100644
index 00000000..433b05de
--- /dev/null
+++ b/controls/PropertyFieldViewPicker/index.html
@@ -0,0 +1,1356 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldToggleWithCallout control¶
+This control generates a toggle control with a callout.
+PropertyFieldToggleWithCallout rendering
+
PropertyFieldToggleWithCallout callout opened
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader';
+import { PropertyFieldToggleWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldToggleWithCallout';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ toggleInfoHeaderValue: boolean;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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
+})
+Implementation¶
+The PropertyFieldToggleWithCallout control uses the same implementation as the default PropertyPaneToggle and has the following additional properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| calloutContent | +React.ReactNode | +no | +Callout content - any HTML | +
| calloutWidth | +number | +no | +Custom width for callout including borders. If value is 0, no width is applied. | +
| calloutTrigger | +CalloutTriggers | +no | +Event to show the callout | +
| gapSpace | +number | +no | +The gap between the callout and the target | +
Enum CalloutTriggers
| Name | +Description | +
|---|---|
| Click | +Shows the callout when you hover over the icon | +
| Hover | +Shows the callout when you click on the icon | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyPaneMarkdownContent/index.html b/controls/PropertyPaneMarkdownContent/index.html
new file mode 100644
index 00000000..1023b195
--- /dev/null
+++ b/controls/PropertyPaneMarkdownContent/index.html
@@ -0,0 +1,1542 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyFieldViewPicker control¶
+This control generates a view picker field that can be used in the property pane of your SharePoint Framework web parts.
+The control automatically retrieves the views for a given SharePoint list:
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyFieldViewPicker, PropertyFieldViewPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldViewPicker';
+-
+
- You'll probably want to use this control in combination with the PropertyFieldListPicker. Make sure to select the
multiSelectprop tofalse, as this control is designed to work with a single list. Store the list id in your web part properties, as follows:
+
export interface IPropertyControlsTestWebPartProps {
+ list: string; // Stores the list ID
+}
+-
+
- Create a new property for your web part, as indicated between the
BEGIN:andEND:comments below:
+
export interface IPropertyControlsTestWebPartProps {
+ list: string; // Stores the list ID
+
+ // BEGIN: Added
+ view: string; // Stores the view ID
+ // END: Added
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyFieldViewPicker('view', {
+ label: 'Select a view',
+ listId: this.properties.list,
+ selectedView: this.properties.view,
+ orderBy: PropertyFieldViewPickerOrderBy.Title,
+ disabled: false,
+ onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
+ properties: this.properties,
+ context: this.context,
+ onGetErrorMessage: null,
+ deferredValidationTime: 0,
+ key: 'viewPickerFieldId'
+})
+Implementation¶
+The PropertyFieldViewPicker control can be configured with the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| label | +string | +yes | +Property field label displayed on top. | +
| listId | +string | +yes | +The ID of the list or library you wish to select a view from. | +
| disabled | +boolean | +no | +Specify if the control needs to be disabled. | +
| context | +BaseComponentContext | +yes | +Context of the current web part. | +
| selectedView | +string | +no | +Initial selected view of the control. | +
| orderBy | +PropertyFieldViewPickerOrderBy | +no | +Specify the property on which you want to order the retrieve set of views. | +
| webAbsoluteUrl | +string | +no | +Absolute Web Url of target site (user requires permissions) | +
| onPropertyChange | +function | +yes | +Defines a onPropertyChange function to raise when the date gets changed. | +
| properties | +any | +yes | +Parent web part properties, this object is use to update the property value. | +
| key | +string | +yes | +An unique key that indicates the identity of this control. | +
| onGetErrorMessage | +function | +no | +The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. | +
| deferredValidationTime | +number | +no | +Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. |
+
| viewsToExclude | +string[] | +no | +Defines views by which should be excluded from the view picker control. You can specify view titles or IDs | +
| filter | +string | +no | +Filter views from OData query. | +
| onViewsRetrieved | +(views: ISPView[]) => PromiseLike |
+no | +Callback that is called before the dropdown is populated. | +
Enum PropertyFieldViewPickerOrderBy
| Name | +Description | +
|---|---|
| Id | +Sort by view ID | +
| Title | +Sort by view title | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyPanePropertyEditor/index.html b/controls/PropertyPanePropertyEditor/index.html
new file mode 100644
index 00000000..19138524
--- /dev/null
+++ b/controls/PropertyPanePropertyEditor/index.html
@@ -0,0 +1,1234 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyPaneMarkdownContent control¶
+This control allows you to embed content in a property pane using Markdown content.
+You can use this control to easily provide guidance for your users and create other content that is not easily created otherwise.
+It supports any arbitrary HTML without using dangerouslySetInnerHTML, and allows overriding any HTML tag.
PropertyPaneMarkdownContent rendering
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyPaneMarkdownContent } from '@pnp/spfx-property-controls/lib/PropertyPaneMarkdownContent';
+-
+
- Create a string with Markdown content for your property pane, for example: +
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 from [markdown-to-jsx](https://probablyup.com/markdown-to-jsx/) ❤️</small>`
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyPaneMarkdownContent({
+ markdown: md,
+ key: 'markdownSample'
+})
+Indentation¶
+Pay close attention to the indentation in your Markdown string. The Markdown parser assumes that four spaces preceding your content means a code block. This means that the following Markdown will render most of the content a code block:
+const md: string = `
+ To get started select an items from the library.
+
+ You can pick any items from the list, provided that is has a valid \`id\` attribute.`
+Producing the following HTML:
+
To solve this issue, make sure that your content is not indented.
+const md: string = `To get started select an items from the library.
+
+You can pick any items from the list, provided that is has a valid \`id\` attribute.`
+Which will produce the following HTML:
+
Overriding rendering of HTML elements¶
+You can override the rendering of any HTML element by specifying an overrides prop to the options.
For example, to override the CSS class of H3 elements (which is defined by a ### in Markdown), you can override the className attribute using the following code:
PropertyPaneMarkdownContent({
+ markdown: `
+### This is a heading 3
+
+You can override any HTML you want`,
+ key: 'markdownSample',
+ options: {
+ overrides: {
+ h3: { // Markdown equivalent of ###
+ props: {
+ className: "ms-font-xl ms-fontColor-neutralDark",
+ },
+ },
+ }
+ }}),
+You can also render your own React elements using the overrides prop. For example, if you have a MyCustomControl React element, you can use the following:
// 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
+ }
+ }}),
+Rendering all elements as inline or block elements¶
+By default, the control will attempt to determine whether the Markdown content should be wrapped in a <div>, <p>, or <span> to render content as block or inline elements.
For example, the following Markdown will be rendered as inline content:
+This is an _inline_ element
+And the following Markdown will be rendered as block content:
+## This is a block element
+However, you can override rendering all HTML as block elements or inline elements by passing forceBlock: true or forceInline: true to the component's options prop.
Named unicode¶
+By default the control converts named html codes to their unicode character equivalents:
+-
+
- &:
&
+ - ':
'
+ - >:
>
+ - <:
<
+ - (space):
+ - ":
"
+
If you need to extend this map of named codes and unicode characters, you can pass a list of additional html codes by using the namedCodesToUnicode option as object with the code names needed as follows:
PropertyPaneMarkdownContent({
+ markdown: `
+One hundred is ≤ than one thousand, but is &ge than fifty.`,
+ key: 'markdownSample',
+ options: {
+ namedCodesToUnicode: {
+ le: '\u2264',
+ ge: '\u2265',
+ }
+ }}),
+Disabling parsing raw HTML¶
+By default, the PropertyPaneMarkdownContent control will parse raw HTML elements in your Markdown content and will attempt to render them.
For example, this Markdown string will render text between two horizontal rulers:
+<hr/>
+Text between rulers
+<hr/>
+If you do not wish to render raw HTML from your Markdown, you can specify disableParsingRawHTML: true, which will render the same Markdown as follows:
<hr/>
+Text between rulers
+<hr/>
+Implementation¶
+PropertyPaneMarkdownContent¶
+The PropertyPaneMarkdownContent control has the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| markdown | +string | +yes | +Markdown content you wish to display in the property pane | +
| key | +string | +yes | +A unique identifier for the property pane control | +
| options | +IMarkdownProps | +no | +Optional settings to control how Markdown content is rendered | +
IMarkdownProps¶
+| Property | +Type | +Required | +Description | +
|---|---|---|---|
| disableParsingRawHTML | +Boolean | +no | +true disables parsing of raw HTML elements within Markdown. |
+
| forceBlock | +Boolean | +no | +true forces rendering all input strings as blocks. |
+
| forceInline | +Boolean | +no | +true forces rendering all input strings as inline elements. |
+
| namedCodesToUnicode | +object[] | +no | +An array of objects to override named HTML codes to their unicode equivalents. | +
| overrides | +object[] | +no | +An array of HTML elements to override during rendering. | +
This control uses the markdown-to-jsx component to render safe HTML. For more information and advanced settings, please refer to the markdown-to-jsx documentation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/controls/PropertyPaneWebPartInformation/index.html b/controls/PropertyPaneWebPartInformation/index.html
new file mode 100644
index 00000000..3737f725
--- /dev/null
+++ b/controls/PropertyPaneWebPartInformation/index.html
@@ -0,0 +1,1292 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyPanePropertyEditor control¶
+This control allows the user to edit the webpart properties in JSON. It can also be used to export properties of a webpart and later import them again to a similar webpart on a different page. If the user clicks 'export' a file named 'webpartproperties.json' is presented for download. The same file can be uploaded to a new instance of the same webpart on for instance another site or page.
+PropertyPanePropertyEditor rendering in property pane
+
PropertyPanePropertyEditor rendering when expanded
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyPanePropertyEditor } from '@pnp/spfx-property-controls/lib/PropertyPanePropertyEditor';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ toggleInfoHeaderValue: boolean;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
PropertyPanePropertyEditor({
+ webpart: this,
+ key: 'propertyEditor'
+})
+Implementation¶
+The PropertyEditor control has the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| webpart | +BaseClientSideWebPart | +yes | +The webpart, which is in principle the current webpart, of which you want to be able to edit the properties from | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/css/extra.css b/css/extra.css
new file mode 100644
index 00000000..18a92540
--- /dev/null
+++ b/css/extra.css
@@ -0,0 +1,32 @@
+.md-logo {
+ height: 32px;
+ width: 150px;
+}
+
+.md-logo img {
+ width: 100% !important;
+ height: auto !important;
+ margin-top: -0.25em;
+}
+
+.md-header{
+ height: 75px;
+}
+
+.md-container{
+ padding-top: 70px;
+}
+
+.md-sidebar[data-md-state="lock"]{
+ padding-top: 75px;
+}
+
+.md-footer {
+ margin-top: 5em;
+}
+
+@media only screen and (max-width: 76.1875em) {
+ .md-nav--primary .md-nav__title--site .md-nav__button {
+ width: 150px;
+ }
+}
diff --git a/getting-started/index.html b/getting-started/index.html
new file mode 100644
index 00000000..1976cc4c
--- /dev/null
+++ b/getting-started/index.html
@@ -0,0 +1,1120 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyPaneWebPartInformation control¶
+This control allows you to specify a description, a 'read more' link, and an optional embedded video
+PropertyPaneWebPartInformation rendering
+
How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your component: +
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
+-
+
- Create a new property for your web part, for example: +
export interface IPropertyControlsTestWebPartProps {
+ toggleInfoHeaderValue: boolean;
+}
+-
+
- Add the custom property control to the
groupFieldsof the web part property pane configuration:
+
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'
+})
+Implementation¶
+The PropertyPaneWebPartInformation control has the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| description | +string | +yes | +Description content - any HTML | +
| moreInfoLink | +string | +no | +A URL providing optional additional information | +
| moreInfoLinkTarget | +string | +no | +An optional target for the link. Defaults to '_blank' | +
| videoProperties | +IVideoEmbedProperties | +no | +A video properties object specifying an optionally embedded video | +
Class IVideoEmbedProperties
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| embedLink | +string | +yes | +A link to an embeddable video. The video will be embedded in an iframe. See the example above for details | +
| width | +number | +no | +optional width of the iframe | +
| height | +number | +no | +optional height of the iframe | +
| properties | +object | +no | +additional properties to set on the iframe element | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/guides/contributing/index.html b/guides/contributing/index.html
new file mode 100644
index 00000000..c79e7a55
--- /dev/null
+++ b/guides/contributing/index.html
@@ -0,0 +1,1162 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Getting started¶
+Installation¶
+To get started you have to install the following dependency to your project: @pnp/spfx-property-controls.
Enter the following command to install the dependency to your project:
+npm install @pnp/spfx-property-controls --save --save-exact
+Configuration¶
+Once the package is installed, you will have to configure the resource file of the property controls to be used in your project. You can do this by opening the config/config.json and adding the following line to the localizedResources property:
"PropertyControlStrings": "./node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
+Next Steps¶
+Once you installed the dependency you can start using the controls in your solution. Go to the documentation homepage to get an overview of all the available controls: home.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/guides/index.html b/guides/index.html
new file mode 100644
index 00000000..20eeb490
--- /dev/null
+++ b/guides/index.html
@@ -0,0 +1,1084 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Contribution guidelines¶
+We appreciate that you're interested in helping with moving the project forward. Before you submit your first PR, please read the following guide. We'd hate to see you work on something that someone else is already working on, something that we agreed not to do or something that doesn't match the project.
+Sharing is caring!
+You have an idea for a new control¶
+Awesome! Good ideas are invaluable for every product. Before you start hacking away, please check if there is no similar idea already listed in the issue list. If not, please create a new issue describing your idea. Once we agree on the feature scope and architecture, the feature will be ready for building. Don't hesitate to mention in the issue if you'd like to build the feature yourself.
+When building a new control, try to add your control to the default provided web part so that everyone can test it out. Please also provide the documentation for your controls in the documentation section.
+You have a suggestion for improving an existing control¶
+Nothing is perfect. If you have an idea how to improve an existing control, let us know by submitting an issue in the issue list. Some things are done for a reason, but some are not. Let's discuss what you think and see how the project could be improved for everyone.
+You've found a bug¶
+Bugs happen. When you find a bug, please have a look at the issue list if a similar bug has already been logged. If not, let us know what doesn't work and how we can reproduce it. If we can't reproduce your bug, we will ask you for clarification, which will only make it longer to fix it.
+Fixing typos¶
+Typos are embarrassing! Most PR's that fix typos will be accepted immediately. In order to make it easier to review the PR, please narrow the focus instead of sending a huge PR of fixes.
+Tips¶
+Before contributing:
+-
+
-
+
ensure that the dev branch on your fork is in sync with the original sp-dev-fx-property-controls repository + ```sh + # assuming you are in the folder of your locally cloned fork.... + git checkout dev
+assuming you have a remote named
+upstreampointing 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 +```
+
+ -
+
create a feature branch for your change. If you'll get stuck on an issue or merging your PR will take a while, this will allow you to have a clean dev branch that you can use for contributing other changes +
+sh + git checkout -b my-contribution
+
DO's & DON'Ts¶
+-
+
- DO follow the same project and test structure as the existing project. +
- DO include tests when adding new functionality and features. When fixing bugs, start with adding a test that highlights how the current behavior is broken. +
- DO keep discussions focused. When a new or related topic comes up it's often better to create new issue than to side track the conversation. +
- DO NOT submit PR's for coding style changes. +
- DO NOT surprise us with big PR's. Instead file an issue & start a discussion so we can agree on a direction before you invest a large amount of time. +
- DO NOT commit code you didn't write. +
- DO NOT submit PR's that refactor existing code without a discussion first. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/guides/migrate-from-v1/index.html b/guides/migrate-from-v1/index.html
new file mode 100644
index 00000000..25ea0ac2
--- /dev/null
+++ b/guides/migrate-from-v1/index.html
@@ -0,0 +1,1133 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Project guides¶
+Following is an overview of guides for this project. If you're considering contributing to the project, reading up on these guides will help you understand the project structure and get started developing for it.
+-
+
- Contributing - how you can contribute to the project +
- Minimal Path to Awesome - setup your development environment +
- Submitting a PR - how to submit a PR +
- Migrating from V1 - how to migrate from v1 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/guides/mpa/index.html b/guides/mpa/index.html
new file mode 100644
index 00000000..f869c8a5
--- /dev/null
+++ b/guides/mpa/index.html
@@ -0,0 +1,1133 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Migrating from v1 to v2¶
+Most of the controls have no breaking changes when moving from v1 to v2. However, some APIs were changed to make the library more stable and controls behavior more even.
+Also, we've bumped up React and Fluent UI versions used in the library. It means you will need to update package.json file in your SPFx projects.
The below guide is an overview of what it takes to migrate from v1 to v2. If we missed something, please let us know in the issues list so we can update the guide. Thanks!
+v2 Supports SharePoint Online Only¶
+v2 of Reusable Controls is based on SharePoint Framework 1.11 and, as a result, does not support SharePoint on-premises.
+++Important: Please, use v1 if you plan to deploy your solution on-premises.
+
React and Fluent UI versions¶
+v2 of Reusable Controls uses React.js v16.8.5 and Fluent UI (Office UI Fabric React) v6.214.0.
+Although it is not necessary to use the same modules' versions in your project, we highly recommend to update your solution accordingly:
+"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",
+ },
+The easiest way to upgrade SharePoint Framework solution is to use Office365 CLI spfx project upgrade command.
APIs Changes¶
+...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/guides/submitting-pr/index.html b/guides/submitting-pr/index.html
new file mode 100644
index 00000000..ec496d94
--- /dev/null
+++ b/guides/submitting-pr/index.html
@@ -0,0 +1,1102 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Minimal Path to Awesome¶
+The shortest way to prepare your local copy of the project for development and testing.
+Install prerequisites¶
+Before you start contributing to this project, you will need Node.js. This project has been tested with the 10.x version of Node.js and the version of NPM that comes with it. You can use Node Version Manager to switch between different versions of Node.js.
+Get the local version of the project¶
+-
+
- fork this repository +
- clone your fork +
- in the command line: +
- run
npm installto restore dependencies
+ - run
gulp serveto serve your project
+ - Start making your changes +
Documentation¶
+SharePoint Framework Property Controls uses MkDocs to publish documentation pages. See more information about installing MkDocs on your operating system at http://www.mkdocs.org/#installation.
+Also, documentation uses custom MkDocs theme that should be installed as well. See Material theme for MkDocs
+Once you have MkDocs and Material theme installed on your machine, in the command line:
+-
+
- run
cd ./docs/documentationto change directory to where the manual pages are stored
+ - run
mkdocs serveto start the local web server with MkDocs and view the documentation in the web browser
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/helpers/PropertyPaneHelpers/index.html b/helpers/PropertyPaneHelpers/index.html
new file mode 100644
index 00000000..6f7ca6c2
--- /dev/null
+++ b/helpers/PropertyPaneHelpers/index.html
@@ -0,0 +1,1252 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Submitting a PR¶
+We appreciate your initiative and would love to integrate your work with the rest of the project! Here is how you can help us do it as quickly as possible.
+-
+
- check, that your feature branch is up-to-date. If it's not, there is a risk of merge conflicts or other issues that will complicate merging your changes into the main repository. Refer to these resources for more information on syncing your repo: +
- GitHub Help: Syncing a Fork +
- AC: Keep Your Forked Git Repo Updated with Changes from the Original Upstream Repo +
-
+
Looking for a quick cheat sheet? Look no further:
+```sh
+assuming you are in the folder of your locally cloned fork....¶
+git checkout dev
+assuming you have a remote named
+upstreampointing to the official sp-dev-fx-property-controls repo¶git fetch upstream
+update your local dev branch to be a mirror of what's in the main repo¶
+git pull --rebase upstream dev
+switch to your branch where you are working, say "issue-xyz"¶
+git checkout issue-xyz
+update your branch to update its fork point to the current tip of dev & put your changes on top of it¶
+git rebase dev +
+`` +- submit PR to the **dev** branch of the main repo. PRs submitted to other branches will be declined +- let us know what's in the PR: is it a new command, bug fix or a minor update in the docs? The clearer the information you provide, the quicker your PR can be verified and merged +- ideally 1 PR = 1 commit - this makes it easier to keep the log clear for everyone and track what's changed. If you're new to working with git, we'll squash your commits for you when merging your changes into the main repo +- don't worry about changing the version or adding yourself to the list of contributors inpackage.json`. We'll do that for you when merging your changes.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..67dffc1e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,1355 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PropertyPaneHelpers¶
+These are helpers to interact with the property pane of the web part. Currently this helper allows you to show a spinner when the property pane is loading resources. This could be loading controls, fetching data, ... Normally you would get a white property pane until all data is loaded.
+How to use this control in your solutions¶
+-
+
- Check that you installed the
@pnp/spfx-property-controlsdependency. Check out The getting started page for more information about installing the dependency.
+ - Import the following modules to your main web part TypeScript file: +
import { PropertyPaneHelpers } from '@pnp/spfx-property-controls/lib/helpers';
+-
+
- You can use the following example to add the spinner to your web part property pane: +
/**
+ * Load property pane resources
+ */
+protected async loadPropertyPaneResources(): Promise<void> {
+ PropertyPaneHelpers.setSpinner({
+ bgColor: "white",
+ spinnerProps: {
+ styles: () => {
+ return {
+ circle: {
+ height: 80,
+ width: 80
+ }
+ };
+ }
+ }
+ });
+
+ // Write here the code you want to add to load your resources
+
+ PropertyPaneHelpers.clearSpinner(200);
+}
+Implementation¶
+The setSpinner method allows you to set the following properties:
| Property | +Type | +Required | +Description | +
|---|---|---|---|
| bgColor | +string | +no | +Spinner background color | +
| className | +string | +no | +Class name to style the spinner yourself. | +
| spinnerProps | +ISpinnerProps | +no | +Spinner properties from Office UI Fabric. | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/search/search_index.json b/search/search_index.json
new file mode 100644
index 00000000..9255abe7
--- /dev/null
+++ b/search/search_index.json
@@ -0,0 +1 @@
+{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Reusable property pane controls for the SharePoint Framework solutions \u00b6 This repository provides developers with a set of reusable property pane controls that can be used in their SharePoint Framework (SPFx) solutions. Attention In order to migrate to v2 and v3 from v1 it is advised to follow this guide: Migrating from V1 . Library Versions \u00b6 Currently there are 3 active versions of the controls. Please, reference the table below to see what version to use in your project. Version SPFx minimal dependency Fluent UI (Office UI Fabric React) version SharePoint Version Comments v3 1.13.* 7.174.1 Online The most current, actively maintained version of the library. v2 1.11.0 6.214.0 Online The version deprecated and not actively maintained. We strongly recommend to update to SPFx 1.13.* and v3 of Controls. v1 1.3.0 5.131.0 On-Prem The version is maintained for SharePoint On-Prem 2016 and 2019 implementations. Be aware that the controls might not work in solutions you're building for on-premises. As for on-premises solutions version 1.1.0 will get used. Attention If you are using v3 of the Controls with SPFx 1.12.1 you will need to cast web part context to any to pass it to the controls. Getting started \u00b6 Installation \u00b6 To get started you have to install the following dependency to your project: @pnp/spfx-property-controls . Enter the following command to install the dependency to your project: npm install @pnp/spfx-property-controls --save --save-exact Configuration \u00b6 Note Since v1.7.0 the localized resource path will automatically be configured during the dependency installing. Once the package is installed, you will have to configure the resource file of the property controls to be used in your project. You can do this by opening the config/config.json and adding the following line to the localizedResources property: \"PropertyControlStrings\" : \"node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js\" Telemetry \u00b6 All controls gather telemetry to verify the usage. Only the name of the control and related data gets captured. More information about the service that we are using for this can be found here: PnP Telemetry Proxy . Since version 1.17.0 it is possible to opt-out of the telemetry by adding the following code to your web part: import PnPTelemetry from \"@pnp/telemetry-js\" ; ... const telemetry = PnPTelemetry . getInstance (); telemetry . optOut (); Controls \u00b6 The following controls are currently available: PropertyFieldButton (Property pane Button) PropertyFieldCodeEditor (Property pane code editor) PropertyFieldCollectionData (Property pane collection data editor) PropertyFieldColorPicker (Property pane color picker) PropertyFieldColumnPicker (Property pane list column picker) PropertyFieldDateTimePicker (Property pane date and time selector) PropertyFieldFilePicker (Property pane file picker) PropertyFieldFolderPicker (Property pane folder picker) PropertyFieldGrid (Property pane Grid control) PropertyFieldGuid (Property pane GUID editor) PropertyFieldIconPicker (Property pane icon picker) PropertyFieldListPicker (Property pane list selector) PropertyFieldMessage (Property pane message) PropertyFieldMonacoEditor (Property pane Monaco Editor) PropertyFieldMultiSelect (Property pane multi select dropdown) PropertyFieldNumber (Property pane number editor) PropertyFieldOrder (Property pane ordered list editor) PropertyFieldPassword (Property pane password editor) PropertyFieldPeoplePicker (Property pane people / group selector) PropertyFieldRoleDefinitionPicker (Property pane role definition picker) PropertyFieldSearch (Property pane search box) PropertyFieldSitePicker (Property pane site selector) PropertyFieldSpinButton (Property pane spin button) PropertyFieldSpinner (Property pane spinner) PropertyFieldSwatchColorPicker (Property pane color selector) PropertyFieldTeamPicker (Property pane team selector) PropertyFieldTermPicker (Property pane managed metadata term selector) PropertyFieldEnterpriseTermPicker (Property pane managed metadata term selector for enterprise scenarios) PropertyFieldViewPicker (Property pane view selector) PropertyPaneMarkdownContent (Property pane markdown content) PropertyPanePropertyEditor (Property pane control that allows raw editing, export and import of webpart properties) PropertyPaneWebPartInformation (Property pane webpart information panel) The following controls are extended controls that show a callout next to the label PropertyFieldButtonWithCallout (Property button field with callout) PropertyFieldCheckboxWithCallout (Property checkbox field with callout) PropertyFieldChoiceGroupWithCallout (Property choice group field with callout) PropertyFieldDropdownWithCallout (Property dropdown field with callout) PropertyFieldLabelWithCallout (Property label field with callout) PropertyFieldLinkWithCallout (Property link field with callout) PropertyFieldSliderWithCallout (Property slider field with callout) PropertyFieldTextWithCallout (Property text field with callout) PropertyFieldToggleWithCallout (Property toggle field with callout)","title":"Home"},{"location":"#reusable-property-pane-controls-for-the-sharepoint-framework-solutions","text":"This repository provides developers with a set of reusable property pane controls that can be used in their SharePoint Framework (SPFx) solutions. Attention In order to migrate to v2 and v3 from v1 it is advised to follow this guide: Migrating from V1 .","title":"Reusable property pane controls for the SharePoint Framework solutions"},{"location":"#library-versions","text":"Currently there are 3 active versions of the controls. Please, reference the table below to see what version to use in your project. Version SPFx minimal dependency Fluent UI (Office UI Fabric React) version SharePoint Version Comments v3 1.13.* 7.174.1 Online The most current, actively maintained version of the library. v2 1.11.0 6.214.0 Online The version deprecated and not actively maintained. We strongly recommend to update to SPFx 1.13.* and v3 of Controls. v1 1.3.0 5.131.0 On-Prem The version is maintained for SharePoint On-Prem 2016 and 2019 implementations. Be aware that the controls might not work in solutions you're building for on-premises. As for on-premises solutions version 1.1.0 will get used. Attention If you are using v3 of the Controls with SPFx 1.12.1 you will need to cast web part context to any to pass it to the controls.","title":"Library Versions"},{"location":"#getting-started","text":"","title":"Getting started"},{"location":"#installation","text":"To get started you have to install the following dependency to your project: @pnp/spfx-property-controls . Enter the following command to install the dependency to your project: npm install @pnp/spfx-property-controls --save --save-exact","title":"Installation"},{"location":"#configuration","text":"Note Since v1.7.0 the localized resource path will automatically be configured during the dependency installing. Once the package is installed, you will have to configure the resource file of the property controls to be used in your project. You can do this by opening the config/config.json and adding the following line to the localizedResources property: \"PropertyControlStrings\" : \"node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js\"","title":"Configuration"},{"location":"#telemetry","text":"All controls gather telemetry to verify the usage. Only the name of the control and related data gets captured. More information about the service that we are using for this can be found here: PnP Telemetry Proxy . Since version 1.17.0 it is possible to opt-out of the telemetry by adding the following code to your web part: import PnPTelemetry from \"@pnp/telemetry-js\" ; ... const telemetry = PnPTelemetry . getInstance (); telemetry . optOut ();","title":"Telemetry"},{"location":"#controls","text":"The following controls are currently available: PropertyFieldButton (Property pane Button) PropertyFieldCodeEditor (Property pane code editor) PropertyFieldCollectionData (Property pane collection data editor) PropertyFieldColorPicker (Property pane color picker) PropertyFieldColumnPicker (Property pane list column picker) PropertyFieldDateTimePicker (Property pane date and time selector) PropertyFieldFilePicker (Property pane file picker) PropertyFieldFolderPicker (Property pane folder picker) PropertyFieldGrid (Property pane Grid control) PropertyFieldGuid (Property pane GUID editor) PropertyFieldIconPicker (Property pane icon picker) PropertyFieldListPicker (Property pane list selector) PropertyFieldMessage (Property pane message) PropertyFieldMonacoEditor (Property pane Monaco Editor) PropertyFieldMultiSelect (Property pane multi select dropdown) PropertyFieldNumber (Property pane number editor) PropertyFieldOrder (Property pane ordered list editor) PropertyFieldPassword (Property pane password editor) PropertyFieldPeoplePicker (Property pane people / group selector) PropertyFieldRoleDefinitionPicker (Property pane role definition picker) PropertyFieldSearch (Property pane search box) PropertyFieldSitePicker (Property pane site selector) PropertyFieldSpinButton (Property pane spin button) PropertyFieldSpinner (Property pane spinner) PropertyFieldSwatchColorPicker (Property pane color selector) PropertyFieldTeamPicker (Property pane team selector) PropertyFieldTermPicker (Property pane managed metadata term selector) PropertyFieldEnterpriseTermPicker (Property pane managed metadata term selector for enterprise scenarios) PropertyFieldViewPicker (Property pane view selector) PropertyPaneMarkdownContent (Property pane markdown content) PropertyPanePropertyEditor (Property pane control that allows raw editing, export and import of webpart properties) PropertyPaneWebPartInformation (Property pane webpart information panel) The following controls are extended controls that show a callout next to the label PropertyFieldButtonWithCallout (Property button field with callout) PropertyFieldCheckboxWithCallout (Property checkbox field with callout) PropertyFieldChoiceGroupWithCallout (Property choice group field with callout) PropertyFieldDropdownWithCallout (Property dropdown field with callout) PropertyFieldLabelWithCallout (Property label field with callout) PropertyFieldLinkWithCallout (Property link field with callout) PropertyFieldSliderWithCallout (Property slider field with callout) PropertyFieldTextWithCallout (Property text field with callout) PropertyFieldToggleWithCallout (Property toggle field with callout)","title":"Controls"},{"location":"beta/","text":"Testing out a beta release \u00b6 All you need to do for testing out a beta release of @pnp/spfx-property-controls is to install the dependency as follows: npm install @pnp/spfx-property-controls@next --save Beta control documentation \u00b6 The control documentation is only live for public releases, not for beta versions. If you want to checkout the markdown files of all controls in the dev branch: beta documentation . Next Steps \u00b6 Once you installed the beta version, you can start using the controls in your solution. Go to the homepage to get an overview of all the available controls and the steps to get started: home .","title":"Beta testing"},{"location":"beta/#testing-out-a-beta-release","text":"All you need to do for testing out a beta release of @pnp/spfx-property-controls is to install the dependency as follows: npm install @pnp/spfx-property-controls@next --save","title":"Testing out a beta release"},{"location":"beta/#beta-control-documentation","text":"The control documentation is only live for public releases, not for beta versions. If you want to checkout the markdown files of all controls in the dev branch: beta documentation .","title":"Beta control documentation"},{"location":"beta/#next-steps","text":"Once you installed the beta version, you can start using the controls in your solution. Go to the homepage to get an overview of all the available controls and the steps to get started: home .","title":"Next Steps"},{"location":"getting-started/","text":"Getting started \u00b6 Installation \u00b6 To get started you have to install the following dependency to your project: @pnp/spfx-property-controls . Enter the following command to install the dependency to your project: npm install @pnp/spfx-property-controls --save --save-exact Configuration \u00b6 Once the package is installed, you will have to configure the resource file of the property controls to be used in your project. You can do this by opening the config/config.json and adding the following line to the localizedResources property: \"PropertyControlStrings\" : \"./node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js\" Next Steps \u00b6 Once you installed the dependency you can start using the controls in your solution. Go to the documentation homepage to get an overview of all the available controls: home .","title":"Getting started"},{"location":"getting-started/#getting-started","text":"","title":"Getting started"},{"location":"getting-started/#installation","text":"To get started you have to install the following dependency to your project: @pnp/spfx-property-controls . Enter the following command to install the dependency to your project: npm install @pnp/spfx-property-controls --save --save-exact","title":"Installation"},{"location":"getting-started/#configuration","text":"Once the package is installed, you will have to configure the resource file of the property controls to be used in your project. You can do this by opening the config/config.json and adding the following line to the localizedResources property: \"PropertyControlStrings\" : \"./node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js\"","title":"Configuration"},{"location":"getting-started/#next-steps","text":"Once you installed the dependency you can start using the controls in your solution. Go to the documentation homepage to get an overview of all the available controls: home .","title":"Next Steps"},{"location":"about/license/","text":"License MIT License Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.","title":"License"},{"location":"about/release-notes/","text":"Releases \u00b6 3.18.0 \u00b6 Enhancements \u00b6 SharePoint Framework v1.19.0 support 3.17.1 \u00b6 Fixes \u00b6 Fixes for Webpack 5: #621 3.17.0 \u00b6 New control(s) \u00b6 PropertyFieldButton : New Control PropertyFieldButton #613 PropertyFieldGrid : New Control PropertyFieldGrid #614 Enhancements \u00b6 fast-serve : ast-serve update to match the most recent changes. #606 PropertyFieldContentTypePicker : PropertyFieldContentTypePicker control #611 PropertyFieldFilePicker : add a delete button to the selected file #579 PropertyFieldFilePicker : Fix root site org asset library showing no items in file picker (https://github.com/pnp/sp-dev-fx-property-controls/pull/603) PropertyFieldFolderPicker : added siteAbsoluteUrl to FOlderPicker (https://github.com/pnp/sp-dev-fx-property-controls/pull/602) Fixes \u00b6 General Helper : toRelativeUrl returns proper relative url in case of root site (https://github.com/pnp/sp-dev-fx-property-controls/pull/609) Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Daniel Lind\u00e9n , Jake , Jo\u00e3o Mendes , Nishkalank Bezawada , ramonitor , Russell gove , Sergei Sergeev . 3.16.0 \u00b6 Enhancements \u00b6 PropertyFieldSitePicker : disabled property not implemented in UI #577 Fixes \u00b6 PropertyFieldMonacoEditor and PropertyFieldCodeEditor : fix text selection in code editor #590 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Luna Heyman , srpmtt . 3.15.1 \u00b6 Fixes \u00b6 PropertyFieldChoiceGroupWithCallout deletes properties #592 3.15.0 \u00b6 Enhancements \u00b6 SharePoint Framework v1.18.2 support Fixes \u00b6 Localization : Errors in en-gb loc file #582 Localization : Errors in german language #589 PropertyFieldFilePicker : fix Tiles view #562 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): andrew-lott , Clem S-K , Tom F. . 3.14.0 \u00b6 Enhancements \u00b6 PropertyFieldListPicker : Implemented functionality to select multiple base templates #568 fast-serve : Fast-serve updated to the latest version and serve warnings fixed. #579 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Chandani Prajapati , Sergei Sergeev . 3.13.0 \u00b6 Enhancements \u00b6 PropertyFieldCollectionData : add panelProps property to collection data #546 SharePoint Framework v1.17.1 support Fixes \u00b6 Italian localization updated #549 Fixed multiple typos #550 Swedish localization updated #553 PropertyPanePropertyEditor : crash when property undefined/null #552 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Chad Eiserloh , Gitwey , Jake Stanger , Luca3082 , Valeras Narbutas . 3.12.0 \u00b6 Enhancements \u00b6 PropertyFieldFilePicker : Site Tab - Adding scrolling for many libraries #525 SPListPickerService : add ContentTypes/Name to the query #521 Czech localization added #527 Fixes \u00b6 Documentations fix for PropertyPaneHelpers #536 ColorPicker : localization for Fluent UI ColorPicker #535 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Brian Krainer Jacobsen , Chad Eiserloh , krishna-vijas , Martin Zamazal . 3.11.0 \u00b6 Enhancements \u00b6 SharePoint Framework v1.16.0 support Fixes \u00b6 TermPicker : missed documentation for anchorId property #496 FilePicker : Operations not working for 100+ Items #497 FilePicker : File Sorting not working on file size properly #501 PropertyFieldMessage : documentation typos fix #504 FilePicker : Sorting on Large Libraries / Folders Must do Server-Side Sorting #503 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Chad Eiserloh , Chandani Prajapati , Hilton Giesenow . 3.10.0 \u00b6 Enhancements \u00b6 Arabic locale is missing #461 PropertyFieldTermPicker : anchorId support #491 Fixes \u00b6 FilePicker : Fixed an internal typo in the codebase #474 ListPicker : documentation updates #490 PropertyFieldCollectionData : Adding new translation for Field Issues label #486 FilePicker : Page Type icons not appearing in the Site Pages library view #475 FilePicker : Tiles are Missing for Site Pages #478 FilePicker : Sorting Does Not Work #487 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Chad Eiserloh , JeanNetryValere , Hilton Giesenow , nviolero , Paul Schaeflein . 3.9.0 \u00b6 Enhancements \u00b6 SharePoint Framework v1.15.2 support 3.8.0 \u00b6 New control(s) \u00b6 Localizations for en-gb #454 Enhancements \u00b6 PropertyFieldSitePicker : Site Picker search for any input string #386 fast-serve : bump support to 1.14.0 #386 PropertyFieldCollectionData : allow to conditionally disable specific field in the item #464 Fixes \u00b6 PropertyFieldListPicker : Remove debugger #455 PropertyFieldCollectionData : Add button is invisible on a root site #462 PropertyFieldCollectionData : fieldValidation for custom fields did not get called if no onGetErrorMessage had been defined #446 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Gautam Sheth , Jasey Waegebaert , IRRDC , Markus Langer , Milan Holemans , Peter Cox . 3.7.0 \u00b6 Enhancements \u00b6 PropertyFieldListPicker : ability to provide content type id #441 PropertyFieldColorPicker : provide preview of the current selected color #447 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Milan Holemans , Russell gove . 3.6.0 \u00b6 New control(s) \u00b6 PropertyFieldMonacoEditor : new control - Monaco editor #439 Enhancements \u00b6 SharePoint Framework v1.14.0 support Improved documentation Fixes \u00b6 PropertyFieldCollectionData : Add button is disabled when it should not be #436 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Chad Eiserloh , GuidoZam , Jo\u00e3o Mendes . 3.5.0 \u00b6 Fixes \u00b6 Multiple controls: Update imports to support controls in ACEs #431 3.4.0 \u00b6 Enhancements \u00b6 PropertyFieldFilePicker : ability to set default tab #412 PropertyFieldCollectionData : ability to use IconPicker for icon field #423 PropertyFieldFilePicker : Added a feature to allow external links / Added a feature to show the Site Pages in the Site tab #421 Fixes \u00b6 PropertyFieldSearch : documentation fix #417 FilePicker : cannot find library by its name in multilingual sites #389 PropertyFieldDateTimePicker : formatDate property doesn't apply to the textbox value in the property pane #388 PropertyFieldCollectionData : number input shows placeholder instead of 0 #379 PropertyFieldChoiceGroupWithCallout : iconProps not working #424 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): 19ahmed99 , Christian Frizell , GuidoZam . 3.3.0 \u00b6 Enhancements \u00b6 SharePoint Framework v1.13.* support PropertyPanePropertyEditor : Add translations for property editor control button and header #399 PropertyFieldCollectionData : Adds conditional column visibility #394 Include mystrings.d.ts in definition output #393 PropertyFieldCollectionData : onGetErrorMessage support for boolean, custom and color fields. #395 PropertyFieldCodeEditor : Added panelWidth property #404 PropertyFieldCollectionData : Allow falsey keys as dropdown options #397 PropertyFieldFilePicker : Add a handler to close a filepicker #401 Fixes \u00b6 PropertyPanePropertyEditor : Minor fix to allow PropertyEditor control to update properties when their current value is blank #384 PropertyFieldSitePicker : Some sites do not show up in Property Field Site Picker control #402 PropertyFieldOrder : Not working with array of objects #396 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): ellinge , M365Bass , Patrik Hellgren . 3.2.0 \u00b6 Enhancements \u00b6 PropertyFieldColorPicker : Add debounce property to color picker control #352 fast-serve : Add fast-serve support #370 Fixes \u00b6 PropertyFieldFilePicker : Stock images url is getting a 404 server error #364 PropertyFieldColumnPicker : Filter not working properly #356 PropertyFieldTextWithCallout : Fix TextWithCallout read-only in SPFx 1.12.1 #372 PropertyFieldFilePicker : React crash on large folders #371 PropertyFieldFilePicker : documentation formatting fix #368 PropertyFieldCollectionData : PropertyFieldCollectionData is not setting sortIdx on resulting collection when using Add and Save #369 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Ari Gunawan , Chrisrb05 , Gautam Sheth , Konrad K. , Mark Bice , Sergei Sergeev . 3.1.0 \u00b6 Enhancements \u00b6 SharePoint Framework v1.12.1 support PropertyFieldColumnPicker : Multiselect dropdown option #354 Fixes \u00b6 PropertyFieldSitePicker : Site Picker doesn't return sites with title starting from the typed string #355 Contributors \u00b6 Special thanks to our contributor: Sudharsan Kesavanarayanan . 3.0.0 \u00b6 Enhancements \u00b6 SharePoint Framework v1.12 support (Breaking change) FLuent UI v7 support 2.7.0 \u00b6 Enhancements \u00b6 PropertyFieldColorPicker : Add debounce property to color picker control #352 Fixes \u00b6 PropertyFieldFilePicker : Stock images url is getting a 404 server error #364 PropertyFieldColumnPicker : Filter not working properly #356 PropertyFieldFilePicker : React crash on large folders #371 PropertyFieldCollectionData : PropertyFieldCollectionData is not setting sortIdx on resulting collection when using Add and Save #369 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Chrisrb05 , Konrad K. , Mark Bice . 2.6.0 \u00b6 Fixes \u00b6 PropertyFieldSitePicker : Site Picker doesn't return sites with title starting from the typed string #355 2.5.0 \u00b6 New control(s) \u00b6 PropertyFieldEditableComboBox : new editable combobox control based on Fluent ComboBox. #339 PropertyFieldColumnPicker : new column picker control #343 Fixes \u00b6 PropertyFieldNumber : The property field number is loosing decimal value on futher edits of the properties. #344 PropertyFieldCollectionData : validation error persists after item deletion #341 FolderPicker : Correct FolderPicker link alignment Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Mike Homol , Sudharsan Kesavanarayanan , Victor Pollet . 2.4.0 \u00b6 Enhancements \u00b6 PropertyFieldCodeEditor : Added an options property to the CodeEditor. Allows setting of any of the Ace Editor options outlined here #322 PropertyFieldCollectionData : Support for a Color Picker control #326 Support for nested web part properties (example: targetProperty : 'a.b.c') in all controls PropertyFieldSitePicker : display site URL #330 PropertyPanePropertyEditor : Support of dynamic properties ( DynamicData ) #331 Fixes \u00b6 Documentation fix for PropertyFIeldPassword : value is of type string , not number . #324 PropertyFieldCollectionData : Dropdown validation not working as expected #321 PropertyFieldPeoplePicker : targetProperty is not updated properly when using nested/complex attributes #221 PropertyFieldSitePicker : if a single subsite is selected all others are selected as well #329 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Corey Roth , kflogdev . 2.3.0 \u00b6 New control(s) \u00b6 PropertyFieldIconPicker : new icon picker control #319 Enhancements \u00b6 PropertyFieldTermPicker : two properties: areTermsSelectable and areTermsHidden #313 PropertyFieldListPicker : ability to return Title and relative URL of the list #281 Fixes \u00b6 Documentation fix: spelling fix on index.md #320 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Corey Roth , Gautam Sheth , Jonathan Cardy , Konrad K. . 2.2.0 \u00b6 New control(s) \u00b6 PropertyFieldTeamPicker : new Teams picker control #303 Contributors \u00b6 Special thanks to our contributor: Jo\u00e3o Mendes . 2.1.1 \u00b6 Fixes \u00b6 Localizations fix #311 2.1.0 \u00b6 Enhancements \u00b6 Auto-generated localizations PropertyFieldNumber : ability to set float values #299 PropertyFieldGuid : new GUID editor control #300 FolderExplorerService : support special characters if folder name #305 FilePicker : Stock Images support #306 Fixes \u00b6 Documentation: Fixed formatting of list of Controls #298 PropertyFieldNumber : gives \"Maximum update depth exceeded\" error #282 Documentation fix: PropertyFieldCollectionData - required custom field should call onUpdate before onError to correctly display required error message #284 PropertyFieldNumber : Improper handling of falsey minValue or maxValue #150 PropertyFieldFilePicker : Org Assets library is not displayed #295 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Anoop Tatti , Gautam Sheth , Jim Love . 2.0.0 \u00b6 New control(s) \u00b6 Office UI Fabric version 6 support 1.20.0 \u00b6 New control(s) \u00b6 PropertyFieldRoleDefinitionPicker : new Role Definition Picker control #268 PropertyFieldFolderPicker : new Folder Picker control #272 PropertyPaneMarkdownContent : new Markdown Content control #162 Enhancements \u00b6 PropertyFieldCollectionData : Dynamic options #260 Fixes \u00b6 Documentation fix: Link to PropertyFieldListPicker control points to PropertyFieldMessage #269 Readme fix: fixed link to project guides #271 PropertyFieldViewPicker : Unable to load Views from another site #263 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Gautam Sheth , Hugo Bernier , Lars Fernhomberg . 1.19.0 \u00b6 New control(s) \u00b6 PropertyFieldMessage : new Message control #248 PropertyFieldSearch : new Search control #248 PropertyFieldSpinner : new Spinner control #248 PropertyFieldFilePicker : new File Picker control #265 Enhancements \u00b6 PropertyFieldDateTimePicker : Add ability to hide Date and show only Time field #195 PropertyFieldCodeEditor : Format code #165 Fixes \u00b6 Documentation fix for PropertyFieldDateTimePicker : The link for OnGetErrorMessage documentation is broken in this page Documentation: Added PnPTelemetry import example #259 PropertyPanePropertyEditor :Fix for dynamic data properties #200 PropertyFieldPeoplePicker : People Picker doesn't search for groups #239 Controls with callout: control's label should be disabled if the disabled prop is set to true Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Lars Fernhomberg , Jo\u00e3o Mendes , Nanddeep Nachan , Ram , Gautam Sheth . 1.18.0 \u00b6 New control(s) \u00b6 PropertyFieldViewPicker : View picker control #230 PropertyFieldPassword : password editor control #237 Fixes \u00b6 PropertyFieldSitePicker documentation title fix #229 PropertyFieldSitePicker : doesn't work at root site #231 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Ari Gunawan , Gautam Sheth , Hugo Bernier , Jo\u00e3o Mendes . 1.17.0 \u00b6 New control(s) \u00b6 PropertyFieldSitePicker : New control that allows the user to select one or multiple sites from the SharePoint Search API. Similar to the SitePicker in the official \"News\" Web Part #208 , #215 Telemetry : Provide a way to opt-out for PnP Telemetry #222 PropertyPaneHelpers : Allows to show a spinner while loading resources Enhancements \u00b6 Add norwegian language file #125 PropertyFieldSliderWithCallout : debounce property added #209 Replace full lodash with only used functions. #213 Fixes \u00b6 Documentation update for PropertyFieldCollectionData #196 PropertyFieldOrder : When items is an empty array, component renders the text '0' #152 Documentation update for PropertyFieldCodeEditor #194 PropertyFieldTermPicker : Tags icon styling issue on IE11 #193 PropertyPanePropertyEditor : Unable to download json export #210 PropertyFieldCollectionData : Fix Data Grid Dragging Issues #217 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Antonio Monserrate , rocketboy1908 , Piotr Siatka , Ben , Niels S\u00f6th , araver . 1.16.0 \u00b6 Enhancements \u00b6 PropertyFieldCollectionData : Add the ability for field validation to the custom fields #187 PropertyFieldCollectionData : Ability to provide custom labels for the save and cancel buttons #187 PropertyFieldListPicker : add ability to filter the control via OData #184 Fixes \u00b6 Documentation getting started links fixed #191 Fix for callout controls missing icon since SPFx 1.8.2 #182 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): araver , Chad Eiserloh . 1.15.0 \u00b6 Enhancements \u00b6 PropertyFieldCollectionData : Add a property to be able to set a custom class on the collection data panel #180 PropertyFieldListPicker : Added listsToExclude property to the control #176 PropertyFieldDateTimePicker : Add ability to hide the date and time labels #77 Fixes \u00b6 Callout icons missing with SPFx 1.8.2 web part #178 PropertyFieldTextWithCallout : still persists property value when error occurred #172 PropertyFieldNumber : not handling changes correctly #170 PropertyFieldChoiceGroupWithCallout : iconProps not working #154 PropertyFieldDropdownWithCallout : Options of type Divider and Header are ignored #145 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Alex Terentiev , Ward Wilmsen . 1.14.1 \u00b6 Fixes \u00b6 TaxonomyPicker : Terms are sorted incorrectly under the wrong parent #153 EnterpriseTermPicker : Terms are sorted incorrectly under the wrong parent #156 1.14.0 \u00b6 New control(s) \u00b6 PropertyFieldEnterpriseTermPicker : New control to load term sets by using @pnp/pnpjs #70 #120 Enhancements \u00b6 PropertyFieldCollectionData : Setting to specify if item creation is enabled/disabled #130 PropertyFieldCollectionData : Setting to specify if item deletion is enabled/disabled #131 PropertyFieldCollectionData : Implemented a property to specify if field editing is enabled/disabled #132 Added Chinese localization #137 PropertyFieldColorPicker : Added a isHidden property #138 PropertyFieldCollectionData : return the item in the custom renderer #147 Added Russian localization #142 Fixes \u00b6 PropertyFieldTermPicker : fix sort order with lowercased terms #133 PropertyFieldCollectionData : Bug with onCustomRender() #135 PropertyFieldCollectionData : Fixed bug with dropdown rendering in IE #136 PropertyFieldNumber : Min/max number check fix + localization label fixes #141 PropertyFieldTermPicker : Fix layout issues in IE11 #143 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Simon-Pierre Plante , Yannick Plenevaux , Alex Terentiev , Roger Zhang . 1.13.1 \u00b6 Fixes \u00b6 PropertyFieldCollectionData : Fixed issue for loading the control in the local workbench #128 1.13.0 \u00b6 Enhancements \u00b6 Updated the office-ui-fabric-react to the same version as in SPFx 1.7.0 #105 PropertyFieldPeoplePicker : Ability to select only from a specific site #9 PropertyFieldCollectionData : Added support for custom field rendering #122 PropertyFieldCollectionData : Added the functionality to sort the items in the collection #123 Fixes \u00b6 PropertyFieldDateTimePicker : Fix for the hours dropdown not showing values #112 PropertyFieldCollectionData : Issue with debounce validation overriding the inserted values #113 PropertyPaneWebPartInformation : Remove redundant 'Description' label #119 PropertyFieldCodeEditor : Handle initial value after updating properties #121 Contributors \u00b6 Special thanks to our contributor: Erwin van Hunen . 1.12.0 \u00b6 New control(s) \u00b6 PropertyPaneWebPartInformation : New control to show more information about the current web part #108 PropertyPanePropertyEditor : New control that allows you to export/import property pane settings #114 Enhancements \u00b6 Dutch localization added #82 French localization added #84 PropertyFieldCollectionData : Allow the user to specify a deferred validation time for each field #98 PropertyFieldCollectionData : added a onRenderOption option to allow custom option rendering #102 PropertyFieldNumber : Introduced the aria label #104 Hide callout from the controls with callout if no message is provided #107 PropertyFieldListPicker : Add the ability to refresh target site while pane is open #109 Fixes \u00b6 PropertyFieldCollectionData : Fixed catastrophic backtracking regex issue for URL validation #99 Contributors \u00b6 Special thanks to our contributors (in alphabetical order): Paul Bullock , Junle Li , PooLP , Erwin van Hunen . 1.11.0 \u00b6 Enhancements \u00b6 PropertyFieldCollectionData : Show error messages #96 Fixes \u00b6 Fixes based on SonarCloud analysis 1.10.0 \u00b6 Enhancements \u00b6 PropertyFieldPeoplePicker : Security groups come back with EntityType of FormsRole rather then SecGroup #93 PropertyFieldCollectionData : Add the current row's information in the onGetErrorMessage callback #92 Fixes \u00b6 PropertyFieldPeoplePicker : No suggestions returned when using Security Groups, Multi-select and NO duplicates. #90 PropertyFieldTermPicker : Terms which are set as unavailable for tagging are still selectable #94 1.9.0 \u00b6 Enhancements \u00b6 PropertyFieldCollectionData : Added custom validation for string , number , icon , and URL field types #74 PropertyFieldCollectionData : Add an option to specify a default value #86 PropertyFieldCollectionData : override placeholder for the inputs #87 PropertyFieldCollectionData : Hide save button when \"Add and save\" is shown #88 Fixes \u00b6 PropertyFieldMultiSelect : fixed an issue where the control didn't retain the preselected values when dropdown options were provided async #85 PropertyFieldOrder : fixed an issue where items where provided async #81 1.8.0 \u00b6 Enhancements \u00b6 New telemetry approach which allows you to use Application Insights instance #79 PropertyFieldListPicker : add optional property for target site #21 Contributors \u00b6 Special thanks to our contributor: Joel Rodrigues . 1.7.0 \u00b6 Enhancements \u00b6 Add npm postinstall script to automatically add the localization config #64 Add a description to the PropertyFieldCollectionData panel #67 Added a font field type for the PropertyFieldCollectionData control #66 Added a URL field type for the PropertyFieldCollectionData control #72 Field validation implemented to enable/disable save buttons in PropertyFieldCollectionData control. Related to previous enhancement. Added properties to the TaxonomyPicker to specify which terms are disabled/not-selectable #69 Fixes \u00b6 PropertyFieldPeoplePicker validation error does not clear as expected #68 1.6.0 \u00b6 New control(s) \u00b6 PropertyFieldCollectionData was added #58 PropertyFieldOrder was added #19 PropertyFieldSwatchColorPicker was added #55 Enhancements \u00b6 Allow the term set to be selectable in the PropertyFieldTermPicker #60 Fixes \u00b6 Fix for PropertyFieldColorPicker Palette Icon alignment issue in IE11 #56 1.5.1 \u00b6 Enhancements \u00b6 Color Pickers optionally return Color Objects #55 Fixes \u00b6 Undefined web part context fixed in the PropertyFieldPeoplePicker #47 Taxonomy service fix for working with term set GUID #48 Added focus intercepting input for Full style #52 1.5.0 \u00b6 Enhancements \u00b6 PropertyFieldListPicker control extended with select all lists option #8 PropertyFieldTermPicker control extended with the ability to search terms by typing in the textbox #11 #42 #44 #45 SPTermStorePickerService has a new interface which contains only the required properties 1.4.2 \u00b6 Enhancements \u00b6 Introduced the onGetErrorMessage property for the PropertyFieldNumber field control ( #36 ) 1.4.1 \u00b6 Enhancements \u00b6 Optimized telemetry so that it only pushes control data Fixes \u00b6 Fixes for issue #30 PropertyFieldPeoplePicker Validation does not work as expected #33 1.4.0 \u00b6 New control(s) \u00b6 PropertyFieldMultiSelect got added PropertyFieldNumber got added Enhancements \u00b6 PropertyFieldTermPicker new introduced property to specify to show or hide the term store name: hideTermStoreName . PropertyFieldTermPicker updated process when terms were unselected based on ID instead of path. 1.3.0 \u00b6 New control(s) \u00b6 PropertyFieldCodeEditor got added Enhancements \u00b6 PropertyFieldTermPicker improved with save and cancel button PropertyFieldTermPicker improved with onClick event on input field 1.2.0 \u00b6 Enhancements \u00b6 Added the option to the people picker to allow you to specify single or multi-selection Fixes \u00b6 People picker accidentally picked the wrong person Improved telemetry with some object checks 1.1.1 \u00b6 Enhancements \u00b6 Removed operation name from telemetry 1.1.0 \u00b6 New control(s) \u00b6 Added the PropertyFieldButtonWithCallout control Added the PropertyFieldCheckboxWithCallout control Added the PropertyFieldChoiceGroupWithCallout control Added the PropertyFieldWithCallout control Added the PropertyLabelWithCallout control Added the PropertyLinkWithCallout control Added the PropertySliderWithCallout control Enhancements \u00b6 Telemetry added Term picker control has now the option to scope on term set or group 1.0.0 \u00b6 New control(s) \u00b6 Added the PropertyFieldDropdownWithCallout control Added the PropertyFieldTextWithCallout control Added the PropertyFieldToggleWithCallout control 1.0.0-beta.3 \u00b6 Enhancements \u00b6 Added firstDayOfWeek option to the date picker control 1.0.0-beta.2 \u00b6 New control(s) \u00b6 Initial release","title":"Release notes"},{"location":"about/release-notes/#releases","text":"","title":"Releases"},{"location":"about/release-notes/#3180","text":"","title":"3.18.0"},{"location":"about/release-notes/#enhancements","text":"SharePoint Framework v1.19.0 support","title":"Enhancements"},{"location":"about/release-notes/#3171","text":"","title":"3.17.1"},{"location":"about/release-notes/#fixes","text":"Fixes for Webpack 5: #621","title":"Fixes"},{"location":"about/release-notes/#3170","text":"","title":"3.17.0"},{"location":"about/release-notes/#new-controls","text":"PropertyFieldButton : New Control PropertyFieldButton #613 PropertyFieldGrid : New Control PropertyFieldGrid #614","title":"New control(s)"},{"location":"about/release-notes/#enhancements_1","text":"fast-serve : ast-serve update to match the most recent changes. #606 PropertyFieldContentTypePicker : PropertyFieldContentTypePicker control #611 PropertyFieldFilePicker : add a delete button to the selected file #579 PropertyFieldFilePicker : Fix root site org asset library showing no items in file picker (https://github.com/pnp/sp-dev-fx-property-controls/pull/603) PropertyFieldFolderPicker : added siteAbsoluteUrl to FOlderPicker (https://github.com/pnp/sp-dev-fx-property-controls/pull/602)","title":"Enhancements"},{"location":"about/release-notes/#fixes_1","text":"General Helper : toRelativeUrl returns proper relative url in case of root site (https://github.com/pnp/sp-dev-fx-property-controls/pull/609)","title":"Fixes"},{"location":"about/release-notes/#contributors","text":"Special thanks to our contributors (in alphabetical order): Daniel Lind\u00e9n , Jake , Jo\u00e3o Mendes , Nishkalank Bezawada , ramonitor , Russell gove , Sergei Sergeev .","title":"Contributors"},{"location":"about/release-notes/#3160","text":"","title":"3.16.0"},{"location":"about/release-notes/#enhancements_2","text":"PropertyFieldSitePicker : disabled property not implemented in UI #577","title":"Enhancements"},{"location":"about/release-notes/#fixes_2","text":"PropertyFieldMonacoEditor and PropertyFieldCodeEditor : fix text selection in code editor #590","title":"Fixes"},{"location":"about/release-notes/#contributors_1","text":"Special thanks to our contributors (in alphabetical order): Luna Heyman , srpmtt .","title":"Contributors"},{"location":"about/release-notes/#3151","text":"","title":"3.15.1"},{"location":"about/release-notes/#fixes_3","text":"PropertyFieldChoiceGroupWithCallout deletes properties #592","title":"Fixes"},{"location":"about/release-notes/#3150","text":"","title":"3.15.0"},{"location":"about/release-notes/#enhancements_3","text":"SharePoint Framework v1.18.2 support","title":"Enhancements"},{"location":"about/release-notes/#fixes_4","text":"Localization : Errors in en-gb loc file #582 Localization : Errors in german language #589 PropertyFieldFilePicker : fix Tiles view #562","title":"Fixes"},{"location":"about/release-notes/#contributors_2","text":"Special thanks to our contributors (in alphabetical order): andrew-lott , Clem S-K , Tom F. .","title":"Contributors"},{"location":"about/release-notes/#3140","text":"","title":"3.14.0"},{"location":"about/release-notes/#enhancements_4","text":"PropertyFieldListPicker : Implemented functionality to select multiple base templates #568 fast-serve : Fast-serve updated to the latest version and serve warnings fixed. #579","title":"Enhancements"},{"location":"about/release-notes/#contributors_3","text":"Special thanks to our contributors (in alphabetical order): Chandani Prajapati , Sergei Sergeev .","title":"Contributors"},{"location":"about/release-notes/#3130","text":"","title":"3.13.0"},{"location":"about/release-notes/#enhancements_5","text":"PropertyFieldCollectionData : add panelProps property to collection data #546 SharePoint Framework v1.17.1 support","title":"Enhancements"},{"location":"about/release-notes/#fixes_5","text":"Italian localization updated #549 Fixed multiple typos #550 Swedish localization updated #553 PropertyPanePropertyEditor : crash when property undefined/null #552","title":"Fixes"},{"location":"about/release-notes/#contributors_4","text":"Special thanks to our contributors (in alphabetical order): Chad Eiserloh , Gitwey , Jake Stanger , Luca3082 , Valeras Narbutas .","title":"Contributors"},{"location":"about/release-notes/#3120","text":"","title":"3.12.0"},{"location":"about/release-notes/#enhancements_6","text":"PropertyFieldFilePicker : Site Tab - Adding scrolling for many libraries #525 SPListPickerService : add ContentTypes/Name to the query #521 Czech localization added #527","title":"Enhancements"},{"location":"about/release-notes/#fixes_6","text":"Documentations fix for PropertyPaneHelpers #536 ColorPicker : localization for Fluent UI ColorPicker #535","title":"Fixes"},{"location":"about/release-notes/#contributors_5","text":"Special thanks to our contributors (in alphabetical order): Brian Krainer Jacobsen , Chad Eiserloh , krishna-vijas , Martin Zamazal .","title":"Contributors"},{"location":"about/release-notes/#3110","text":"","title":"3.11.0"},{"location":"about/release-notes/#enhancements_7","text":"SharePoint Framework v1.16.0 support","title":"Enhancements"},{"location":"about/release-notes/#fixes_7","text":"TermPicker : missed documentation for anchorId property #496 FilePicker : Operations not working for 100+ Items #497 FilePicker : File Sorting not working on file size properly #501 PropertyFieldMessage : documentation typos fix #504 FilePicker : Sorting on Large Libraries / Folders Must do Server-Side Sorting #503","title":"Fixes"},{"location":"about/release-notes/#contributors_6","text":"Special thanks to our contributors (in alphabetical order): Chad Eiserloh , Chandani Prajapati , Hilton Giesenow .","title":"Contributors"},{"location":"about/release-notes/#3100","text":"","title":"3.10.0"},{"location":"about/release-notes/#enhancements_8","text":"Arabic locale is missing #461 PropertyFieldTermPicker : anchorId support #491","title":"Enhancements"},{"location":"about/release-notes/#fixes_8","text":"FilePicker : Fixed an internal typo in the codebase #474 ListPicker : documentation updates #490 PropertyFieldCollectionData : Adding new translation for Field Issues label #486 FilePicker : Page Type icons not appearing in the Site Pages library view #475 FilePicker : Tiles are Missing for Site Pages #478 FilePicker : Sorting Does Not Work #487","title":"Fixes"},{"location":"about/release-notes/#contributors_7","text":"Special thanks to our contributors (in alphabetical order): Chad Eiserloh , JeanNetryValere , Hilton Giesenow , nviolero , Paul Schaeflein .","title":"Contributors"},{"location":"about/release-notes/#390","text":"","title":"3.9.0"},{"location":"about/release-notes/#enhancements_9","text":"SharePoint Framework v1.15.2 support","title":"Enhancements"},{"location":"about/release-notes/#380","text":"","title":"3.8.0"},{"location":"about/release-notes/#new-controls_1","text":"Localizations for en-gb #454","title":"New control(s)"},{"location":"about/release-notes/#enhancements_10","text":"PropertyFieldSitePicker : Site Picker search for any input string #386 fast-serve : bump support to 1.14.0 #386 PropertyFieldCollectionData : allow to conditionally disable specific field in the item #464","title":"Enhancements"},{"location":"about/release-notes/#fixes_9","text":"PropertyFieldListPicker : Remove debugger #455 PropertyFieldCollectionData : Add button is invisible on a root site #462 PropertyFieldCollectionData : fieldValidation for custom fields did not get called if no onGetErrorMessage had been defined #446","title":"Fixes"},{"location":"about/release-notes/#contributors_8","text":"Special thanks to our contributors (in alphabetical order): Gautam Sheth , Jasey Waegebaert , IRRDC , Markus Langer , Milan Holemans , Peter Cox .","title":"Contributors"},{"location":"about/release-notes/#370","text":"","title":"3.7.0"},{"location":"about/release-notes/#enhancements_11","text":"PropertyFieldListPicker : ability to provide content type id #441 PropertyFieldColorPicker : provide preview of the current selected color #447","title":"Enhancements"},{"location":"about/release-notes/#contributors_9","text":"Special thanks to our contributors (in alphabetical order): Milan Holemans , Russell gove .","title":"Contributors"},{"location":"about/release-notes/#360","text":"","title":"3.6.0"},{"location":"about/release-notes/#new-controls_2","text":"PropertyFieldMonacoEditor : new control - Monaco editor #439","title":"New control(s)"},{"location":"about/release-notes/#enhancements_12","text":"SharePoint Framework v1.14.0 support Improved documentation","title":"Enhancements"},{"location":"about/release-notes/#fixes_10","text":"PropertyFieldCollectionData : Add button is disabled when it should not be #436","title":"Fixes"},{"location":"about/release-notes/#contributors_10","text":"Special thanks to our contributors (in alphabetical order): Chad Eiserloh , GuidoZam , Jo\u00e3o Mendes .","title":"Contributors"},{"location":"about/release-notes/#350","text":"","title":"3.5.0"},{"location":"about/release-notes/#fixes_11","text":"Multiple controls: Update imports to support controls in ACEs #431","title":"Fixes"},{"location":"about/release-notes/#340","text":"","title":"3.4.0"},{"location":"about/release-notes/#enhancements_13","text":"PropertyFieldFilePicker : ability to set default tab #412 PropertyFieldCollectionData : ability to use IconPicker for icon field #423 PropertyFieldFilePicker : Added a feature to allow external links / Added a feature to show the Site Pages in the Site tab #421","title":"Enhancements"},{"location":"about/release-notes/#fixes_12","text":"PropertyFieldSearch : documentation fix #417 FilePicker : cannot find library by its name in multilingual sites #389 PropertyFieldDateTimePicker : formatDate property doesn't apply to the textbox value in the property pane #388 PropertyFieldCollectionData : number input shows placeholder instead of 0 #379 PropertyFieldChoiceGroupWithCallout : iconProps not working #424","title":"Fixes"},{"location":"about/release-notes/#contributors_11","text":"Special thanks to our contributors (in alphabetical order): 19ahmed99 , Christian Frizell , GuidoZam .","title":"Contributors"},{"location":"about/release-notes/#330","text":"","title":"3.3.0"},{"location":"about/release-notes/#enhancements_14","text":"SharePoint Framework v1.13.* support PropertyPanePropertyEditor : Add translations for property editor control button and header #399 PropertyFieldCollectionData : Adds conditional column visibility #394 Include mystrings.d.ts in definition output #393 PropertyFieldCollectionData : onGetErrorMessage support for boolean, custom and color fields. #395 PropertyFieldCodeEditor : Added panelWidth property #404 PropertyFieldCollectionData : Allow falsey keys as dropdown options #397 PropertyFieldFilePicker : Add a handler to close a filepicker #401","title":"Enhancements"},{"location":"about/release-notes/#fixes_13","text":"PropertyPanePropertyEditor : Minor fix to allow PropertyEditor control to update properties when their current value is blank #384 PropertyFieldSitePicker : Some sites do not show up in Property Field Site Picker control #402 PropertyFieldOrder : Not working with array of objects #396","title":"Fixes"},{"location":"about/release-notes/#contributors_12","text":"Special thanks to our contributors (in alphabetical order): ellinge , M365Bass , Patrik Hellgren .","title":"Contributors"},{"location":"about/release-notes/#320","text":"","title":"3.2.0"},{"location":"about/release-notes/#enhancements_15","text":"PropertyFieldColorPicker : Add debounce property to color picker control #352 fast-serve : Add fast-serve support #370","title":"Enhancements"},{"location":"about/release-notes/#fixes_14","text":"PropertyFieldFilePicker : Stock images url is getting a 404 server error #364 PropertyFieldColumnPicker : Filter not working properly #356 PropertyFieldTextWithCallout : Fix TextWithCallout read-only in SPFx 1.12.1 #372 PropertyFieldFilePicker : React crash on large folders #371 PropertyFieldFilePicker : documentation formatting fix #368 PropertyFieldCollectionData : PropertyFieldCollectionData is not setting sortIdx on resulting collection when using Add and Save #369","title":"Fixes"},{"location":"about/release-notes/#contributors_13","text":"Special thanks to our contributors (in alphabetical order): Ari Gunawan , Chrisrb05 , Gautam Sheth , Konrad K. , Mark Bice , Sergei Sergeev .","title":"Contributors"},{"location":"about/release-notes/#310","text":"","title":"3.1.0"},{"location":"about/release-notes/#enhancements_16","text":"SharePoint Framework v1.12.1 support PropertyFieldColumnPicker : Multiselect dropdown option #354","title":"Enhancements"},{"location":"about/release-notes/#fixes_15","text":"PropertyFieldSitePicker : Site Picker doesn't return sites with title starting from the typed string #355","title":"Fixes"},{"location":"about/release-notes/#contributors_14","text":"Special thanks to our contributor: Sudharsan Kesavanarayanan .","title":"Contributors"},{"location":"about/release-notes/#300","text":"","title":"3.0.0"},{"location":"about/release-notes/#enhancements_17","text":"SharePoint Framework v1.12 support (Breaking change) FLuent UI v7 support","title":"Enhancements"},{"location":"about/release-notes/#270","text":"","title":"2.7.0"},{"location":"about/release-notes/#enhancements_18","text":"PropertyFieldColorPicker : Add debounce property to color picker control #352","title":"Enhancements"},{"location":"about/release-notes/#fixes_16","text":"PropertyFieldFilePicker : Stock images url is getting a 404 server error #364 PropertyFieldColumnPicker : Filter not working properly #356 PropertyFieldFilePicker : React crash on large folders #371 PropertyFieldCollectionData : PropertyFieldCollectionData is not setting sortIdx on resulting collection when using Add and Save #369","title":"Fixes"},{"location":"about/release-notes/#contributors_15","text":"Special thanks to our contributors (in alphabetical order): Chrisrb05 , Konrad K. , Mark Bice .","title":"Contributors"},{"location":"about/release-notes/#260","text":"","title":"2.6.0"},{"location":"about/release-notes/#fixes_17","text":"PropertyFieldSitePicker : Site Picker doesn't return sites with title starting from the typed string #355","title":"Fixes"},{"location":"about/release-notes/#250","text":"","title":"2.5.0"},{"location":"about/release-notes/#new-controls_3","text":"PropertyFieldEditableComboBox : new editable combobox control based on Fluent ComboBox. #339 PropertyFieldColumnPicker : new column picker control #343","title":"New control(s)"},{"location":"about/release-notes/#fixes_18","text":"PropertyFieldNumber : The property field number is loosing decimal value on futher edits of the properties. #344 PropertyFieldCollectionData : validation error persists after item deletion #341 FolderPicker : Correct FolderPicker link alignment","title":"Fixes"},{"location":"about/release-notes/#contributors_16","text":"Special thanks to our contributors (in alphabetical order): Mike Homol , Sudharsan Kesavanarayanan , Victor Pollet .","title":"Contributors"},{"location":"about/release-notes/#240","text":"","title":"2.4.0"},{"location":"about/release-notes/#enhancements_19","text":"PropertyFieldCodeEditor : Added an options property to the CodeEditor. Allows setting of any of the Ace Editor options outlined here #322 PropertyFieldCollectionData : Support for a Color Picker control #326 Support for nested web part properties (example: targetProperty : 'a.b.c') in all controls PropertyFieldSitePicker : display site URL #330 PropertyPanePropertyEditor : Support of dynamic properties ( DynamicData ) #331","title":"Enhancements"},{"location":"about/release-notes/#fixes_19","text":"Documentation fix for PropertyFIeldPassword : value is of type string , not number . #324 PropertyFieldCollectionData : Dropdown validation not working as expected #321 PropertyFieldPeoplePicker : targetProperty is not updated properly when using nested/complex attributes #221 PropertyFieldSitePicker : if a single subsite is selected all others are selected as well #329","title":"Fixes"},{"location":"about/release-notes/#contributors_17","text":"Special thanks to our contributors (in alphabetical order): Corey Roth , kflogdev .","title":"Contributors"},{"location":"about/release-notes/#230","text":"","title":"2.3.0"},{"location":"about/release-notes/#new-controls_4","text":"PropertyFieldIconPicker : new icon picker control #319","title":"New control(s)"},{"location":"about/release-notes/#enhancements_20","text":"PropertyFieldTermPicker : two properties: areTermsSelectable and areTermsHidden #313 PropertyFieldListPicker : ability to return Title and relative URL of the list #281","title":"Enhancements"},{"location":"about/release-notes/#fixes_20","text":"Documentation fix: spelling fix on index.md #320","title":"Fixes"},{"location":"about/release-notes/#contributors_18","text":"Special thanks to our contributors (in alphabetical order): Corey Roth , Gautam Sheth , Jonathan Cardy , Konrad K. .","title":"Contributors"},{"location":"about/release-notes/#220","text":"","title":"2.2.0"},{"location":"about/release-notes/#new-controls_5","text":"PropertyFieldTeamPicker : new Teams picker control #303","title":"New control(s)"},{"location":"about/release-notes/#contributors_19","text":"Special thanks to our contributor: Jo\u00e3o Mendes .","title":"Contributors"},{"location":"about/release-notes/#211","text":"","title":"2.1.1"},{"location":"about/release-notes/#fixes_21","text":"Localizations fix #311","title":"Fixes"},{"location":"about/release-notes/#210","text":"","title":"2.1.0"},{"location":"about/release-notes/#enhancements_21","text":"Auto-generated localizations PropertyFieldNumber : ability to set float values #299 PropertyFieldGuid : new GUID editor control #300 FolderExplorerService : support special characters if folder name #305 FilePicker : Stock Images support #306","title":"Enhancements"},{"location":"about/release-notes/#fixes_22","text":"Documentation: Fixed formatting of list of Controls #298 PropertyFieldNumber : gives \"Maximum update depth exceeded\" error #282 Documentation fix: PropertyFieldCollectionData - required custom field should call onUpdate before onError to correctly display required error message #284 PropertyFieldNumber : Improper handling of falsey minValue or maxValue #150 PropertyFieldFilePicker : Org Assets library is not displayed #295","title":"Fixes"},{"location":"about/release-notes/#contributors_20","text":"Special thanks to our contributors (in alphabetical order): Anoop Tatti , Gautam Sheth , Jim Love .","title":"Contributors"},{"location":"about/release-notes/#200","text":"","title":"2.0.0"},{"location":"about/release-notes/#new-controls_6","text":"Office UI Fabric version 6 support","title":"New control(s)"},{"location":"about/release-notes/#1200","text":"","title":"1.20.0"},{"location":"about/release-notes/#new-controls_7","text":"PropertyFieldRoleDefinitionPicker : new Role Definition Picker control #268 PropertyFieldFolderPicker : new Folder Picker control #272 PropertyPaneMarkdownContent : new Markdown Content control #162","title":"New control(s)"},{"location":"about/release-notes/#enhancements_22","text":"PropertyFieldCollectionData : Dynamic options #260","title":"Enhancements"},{"location":"about/release-notes/#fixes_23","text":"Documentation fix: Link to PropertyFieldListPicker control points to PropertyFieldMessage #269 Readme fix: fixed link to project guides #271 PropertyFieldViewPicker : Unable to load Views from another site #263","title":"Fixes"},{"location":"about/release-notes/#contributors_21","text":"Special thanks to our contributors (in alphabetical order): Gautam Sheth , Hugo Bernier , Lars Fernhomberg .","title":"Contributors"},{"location":"about/release-notes/#1190","text":"","title":"1.19.0"},{"location":"about/release-notes/#new-controls_8","text":"PropertyFieldMessage : new Message control #248 PropertyFieldSearch : new Search control #248 PropertyFieldSpinner : new Spinner control #248 PropertyFieldFilePicker : new File Picker control #265","title":"New control(s)"},{"location":"about/release-notes/#enhancements_23","text":"PropertyFieldDateTimePicker : Add ability to hide Date and show only Time field #195 PropertyFieldCodeEditor : Format code #165","title":"Enhancements"},{"location":"about/release-notes/#fixes_24","text":"Documentation fix for PropertyFieldDateTimePicker : The link for OnGetErrorMessage documentation is broken in this page Documentation: Added PnPTelemetry import example #259 PropertyPanePropertyEditor :Fix for dynamic data properties #200 PropertyFieldPeoplePicker : People Picker doesn't search for groups #239 Controls with callout: control's label should be disabled if the disabled prop is set to true","title":"Fixes"},{"location":"about/release-notes/#contributors_22","text":"Special thanks to our contributors (in alphabetical order): Lars Fernhomberg , Jo\u00e3o Mendes , Nanddeep Nachan , Ram , Gautam Sheth .","title":"Contributors"},{"location":"about/release-notes/#1180","text":"","title":"1.18.0"},{"location":"about/release-notes/#new-controls_9","text":"PropertyFieldViewPicker : View picker control #230 PropertyFieldPassword : password editor control #237","title":"New control(s)"},{"location":"about/release-notes/#fixes_25","text":"PropertyFieldSitePicker documentation title fix #229 PropertyFieldSitePicker : doesn't work at root site #231","title":"Fixes"},{"location":"about/release-notes/#contributors_23","text":"Special thanks to our contributors (in alphabetical order): Ari Gunawan , Gautam Sheth , Hugo Bernier , Jo\u00e3o Mendes .","title":"Contributors"},{"location":"about/release-notes/#1170","text":"","title":"1.17.0"},{"location":"about/release-notes/#new-controls_10","text":"PropertyFieldSitePicker : New control that allows the user to select one or multiple sites from the SharePoint Search API. Similar to the SitePicker in the official \"News\" Web Part #208 , #215 Telemetry : Provide a way to opt-out for PnP Telemetry #222 PropertyPaneHelpers : Allows to show a spinner while loading resources","title":"New control(s)"},{"location":"about/release-notes/#enhancements_24","text":"Add norwegian language file #125 PropertyFieldSliderWithCallout : debounce property added #209 Replace full lodash with only used functions. #213","title":"Enhancements"},{"location":"about/release-notes/#fixes_26","text":"Documentation update for PropertyFieldCollectionData #196 PropertyFieldOrder : When items is an empty array, component renders the text '0' #152 Documentation update for PropertyFieldCodeEditor #194 PropertyFieldTermPicker : Tags icon styling issue on IE11 #193 PropertyPanePropertyEditor : Unable to download json export #210 PropertyFieldCollectionData : Fix Data Grid Dragging Issues #217","title":"Fixes"},{"location":"about/release-notes/#contributors_24","text":"Special thanks to our contributors (in alphabetical order): Antonio Monserrate , rocketboy1908 , Piotr Siatka , Ben , Niels S\u00f6th , araver .","title":"Contributors"},{"location":"about/release-notes/#1160","text":"","title":"1.16.0"},{"location":"about/release-notes/#enhancements_25","text":"PropertyFieldCollectionData : Add the ability for field validation to the custom fields #187 PropertyFieldCollectionData : Ability to provide custom labels for the save and cancel buttons #187 PropertyFieldListPicker : add ability to filter the control via OData #184","title":"Enhancements"},{"location":"about/release-notes/#fixes_27","text":"Documentation getting started links fixed #191 Fix for callout controls missing icon since SPFx 1.8.2 #182","title":"Fixes"},{"location":"about/release-notes/#contributors_25","text":"Special thanks to our contributors (in alphabetical order): araver , Chad Eiserloh .","title":"Contributors"},{"location":"about/release-notes/#1150","text":"","title":"1.15.0"},{"location":"about/release-notes/#enhancements_26","text":"PropertyFieldCollectionData : Add a property to be able to set a custom class on the collection data panel #180 PropertyFieldListPicker : Added listsToExclude property to the control #176 PropertyFieldDateTimePicker : Add ability to hide the date and time labels #77","title":"Enhancements"},{"location":"about/release-notes/#fixes_28","text":"Callout icons missing with SPFx 1.8.2 web part #178 PropertyFieldTextWithCallout : still persists property value when error occurred #172 PropertyFieldNumber : not handling changes correctly #170 PropertyFieldChoiceGroupWithCallout : iconProps not working #154 PropertyFieldDropdownWithCallout : Options of type Divider and Header are ignored #145","title":"Fixes"},{"location":"about/release-notes/#contributors_26","text":"Special thanks to our contributors (in alphabetical order): Alex Terentiev , Ward Wilmsen .","title":"Contributors"},{"location":"about/release-notes/#1141","text":"","title":"1.14.1"},{"location":"about/release-notes/#fixes_29","text":"TaxonomyPicker : Terms are sorted incorrectly under the wrong parent #153 EnterpriseTermPicker : Terms are sorted incorrectly under the wrong parent #156","title":"Fixes"},{"location":"about/release-notes/#1140","text":"","title":"1.14.0"},{"location":"about/release-notes/#new-controls_11","text":"PropertyFieldEnterpriseTermPicker : New control to load term sets by using @pnp/pnpjs #70 #120","title":"New control(s)"},{"location":"about/release-notes/#enhancements_27","text":"PropertyFieldCollectionData : Setting to specify if item creation is enabled/disabled #130 PropertyFieldCollectionData : Setting to specify if item deletion is enabled/disabled #131 PropertyFieldCollectionData : Implemented a property to specify if field editing is enabled/disabled #132 Added Chinese localization #137 PropertyFieldColorPicker : Added a isHidden property #138 PropertyFieldCollectionData : return the item in the custom renderer #147 Added Russian localization #142","title":"Enhancements"},{"location":"about/release-notes/#fixes_30","text":"PropertyFieldTermPicker : fix sort order with lowercased terms #133 PropertyFieldCollectionData : Bug with onCustomRender() #135 PropertyFieldCollectionData : Fixed bug with dropdown rendering in IE #136 PropertyFieldNumber : Min/max number check fix + localization label fixes #141 PropertyFieldTermPicker : Fix layout issues in IE11 #143","title":"Fixes"},{"location":"about/release-notes/#contributors_27","text":"Special thanks to our contributors (in alphabetical order): Simon-Pierre Plante , Yannick Plenevaux , Alex Terentiev , Roger Zhang .","title":"Contributors"},{"location":"about/release-notes/#1131","text":"","title":"1.13.1"},{"location":"about/release-notes/#fixes_31","text":"PropertyFieldCollectionData : Fixed issue for loading the control in the local workbench #128","title":"Fixes"},{"location":"about/release-notes/#1130","text":"","title":"1.13.0"},{"location":"about/release-notes/#enhancements_28","text":"Updated the office-ui-fabric-react to the same version as in SPFx 1.7.0 #105 PropertyFieldPeoplePicker : Ability to select only from a specific site #9 PropertyFieldCollectionData : Added support for custom field rendering #122 PropertyFieldCollectionData : Added the functionality to sort the items in the collection #123","title":"Enhancements"},{"location":"about/release-notes/#fixes_32","text":"PropertyFieldDateTimePicker : Fix for the hours dropdown not showing values #112 PropertyFieldCollectionData : Issue with debounce validation overriding the inserted values #113 PropertyPaneWebPartInformation : Remove redundant 'Description' label #119 PropertyFieldCodeEditor : Handle initial value after updating properties #121","title":"Fixes"},{"location":"about/release-notes/#contributors_28","text":"Special thanks to our contributor: Erwin van Hunen .","title":"Contributors"},{"location":"about/release-notes/#1120","text":"","title":"1.12.0"},{"location":"about/release-notes/#new-controls_12","text":"PropertyPaneWebPartInformation : New control to show more information about the current web part #108 PropertyPanePropertyEditor : New control that allows you to export/import property pane settings #114","title":"New control(s)"},{"location":"about/release-notes/#enhancements_29","text":"Dutch localization added #82 French localization added #84 PropertyFieldCollectionData : Allow the user to specify a deferred validation time for each field #98 PropertyFieldCollectionData : added a onRenderOption option to allow custom option rendering #102 PropertyFieldNumber : Introduced the aria label #104 Hide callout from the controls with callout if no message is provided #107 PropertyFieldListPicker : Add the ability to refresh target site while pane is open #109","title":"Enhancements"},{"location":"about/release-notes/#fixes_33","text":"PropertyFieldCollectionData : Fixed catastrophic backtracking regex issue for URL validation #99","title":"Fixes"},{"location":"about/release-notes/#contributors_29","text":"Special thanks to our contributors (in alphabetical order): Paul Bullock , Junle Li , PooLP , Erwin van Hunen .","title":"Contributors"},{"location":"about/release-notes/#1110","text":"","title":"1.11.0"},{"location":"about/release-notes/#enhancements_30","text":"PropertyFieldCollectionData : Show error messages #96","title":"Enhancements"},{"location":"about/release-notes/#fixes_34","text":"Fixes based on SonarCloud analysis","title":"Fixes"},{"location":"about/release-notes/#1100","text":"","title":"1.10.0"},{"location":"about/release-notes/#enhancements_31","text":"PropertyFieldPeoplePicker : Security groups come back with EntityType of FormsRole rather then SecGroup #93 PropertyFieldCollectionData : Add the current row's information in the onGetErrorMessage callback #92","title":"Enhancements"},{"location":"about/release-notes/#fixes_35","text":"PropertyFieldPeoplePicker : No suggestions returned when using Security Groups, Multi-select and NO duplicates. #90 PropertyFieldTermPicker : Terms which are set as unavailable for tagging are still selectable #94","title":"Fixes"},{"location":"about/release-notes/#190","text":"","title":"1.9.0"},{"location":"about/release-notes/#enhancements_32","text":"PropertyFieldCollectionData : Added custom validation for string , number , icon , and URL field types #74 PropertyFieldCollectionData : Add an option to specify a default value #86 PropertyFieldCollectionData : override placeholder for the inputs #87 PropertyFieldCollectionData : Hide save button when \"Add and save\" is shown #88","title":"Enhancements"},{"location":"about/release-notes/#fixes_36","text":"PropertyFieldMultiSelect : fixed an issue where the control didn't retain the preselected values when dropdown options were provided async #85 PropertyFieldOrder : fixed an issue where items where provided async #81","title":"Fixes"},{"location":"about/release-notes/#180","text":"","title":"1.8.0"},{"location":"about/release-notes/#enhancements_33","text":"New telemetry approach which allows you to use Application Insights instance #79 PropertyFieldListPicker : add optional property for target site #21","title":"Enhancements"},{"location":"about/release-notes/#contributors_30","text":"Special thanks to our contributor: Joel Rodrigues .","title":"Contributors"},{"location":"about/release-notes/#170","text":"","title":"1.7.0"},{"location":"about/release-notes/#enhancements_34","text":"Add npm postinstall script to automatically add the localization config #64 Add a description to the PropertyFieldCollectionData panel #67 Added a font field type for the PropertyFieldCollectionData control #66 Added a URL field type for the PropertyFieldCollectionData control #72 Field validation implemented to enable/disable save buttons in PropertyFieldCollectionData control. Related to previous enhancement. Added properties to the TaxonomyPicker to specify which terms are disabled/not-selectable #69","title":"Enhancements"},{"location":"about/release-notes/#fixes_37","text":"PropertyFieldPeoplePicker validation error does not clear as expected #68","title":"Fixes"},{"location":"about/release-notes/#160","text":"","title":"1.6.0"},{"location":"about/release-notes/#new-controls_13","text":"PropertyFieldCollectionData was added #58 PropertyFieldOrder was added #19 PropertyFieldSwatchColorPicker was added #55","title":"New control(s)"},{"location":"about/release-notes/#enhancements_35","text":"Allow the term set to be selectable in the PropertyFieldTermPicker #60","title":"Enhancements"},{"location":"about/release-notes/#fixes_38","text":"Fix for PropertyFieldColorPicker Palette Icon alignment issue in IE11 #56","title":"Fixes"},{"location":"about/release-notes/#151","text":"","title":"1.5.1"},{"location":"about/release-notes/#enhancements_36","text":"Color Pickers optionally return Color Objects #55","title":"Enhancements"},{"location":"about/release-notes/#fixes_39","text":"Undefined web part context fixed in the PropertyFieldPeoplePicker #47 Taxonomy service fix for working with term set GUID #48 Added focus intercepting input for Full style #52","title":"Fixes"},{"location":"about/release-notes/#150","text":"","title":"1.5.0"},{"location":"about/release-notes/#enhancements_37","text":"PropertyFieldListPicker control extended with select all lists option #8 PropertyFieldTermPicker control extended with the ability to search terms by typing in the textbox #11 #42 #44 #45 SPTermStorePickerService has a new interface which contains only the required properties","title":"Enhancements"},{"location":"about/release-notes/#142","text":"","title":"1.4.2"},{"location":"about/release-notes/#enhancements_38","text":"Introduced the onGetErrorMessage property for the PropertyFieldNumber field control ( #36 )","title":"Enhancements"},{"location":"about/release-notes/#141","text":"","title":"1.4.1"},{"location":"about/release-notes/#enhancements_39","text":"Optimized telemetry so that it only pushes control data","title":"Enhancements"},{"location":"about/release-notes/#fixes_40","text":"Fixes for issue #30 PropertyFieldPeoplePicker Validation does not work as expected #33","title":"Fixes"},{"location":"about/release-notes/#140","text":"","title":"1.4.0"},{"location":"about/release-notes/#new-controls_14","text":"PropertyFieldMultiSelect got added PropertyFieldNumber got added","title":"New control(s)"},{"location":"about/release-notes/#enhancements_40","text":"PropertyFieldTermPicker new introduced property to specify to show or hide the term store name: hideTermStoreName . PropertyFieldTermPicker updated process when terms were unselected based on ID instead of path.","title":"Enhancements"},{"location":"about/release-notes/#130","text":"","title":"1.3.0"},{"location":"about/release-notes/#new-controls_15","text":"PropertyFieldCodeEditor got added","title":"New control(s)"},{"location":"about/release-notes/#enhancements_41","text":"PropertyFieldTermPicker improved with save and cancel button PropertyFieldTermPicker improved with onClick event on input field","title":"Enhancements"},{"location":"about/release-notes/#120","text":"","title":"1.2.0"},{"location":"about/release-notes/#enhancements_42","text":"Added the option to the people picker to allow you to specify single or multi-selection","title":"Enhancements"},{"location":"about/release-notes/#fixes_41","text":"People picker accidentally picked the wrong person Improved telemetry with some object checks","title":"Fixes"},{"location":"about/release-notes/#111","text":"","title":"1.1.1"},{"location":"about/release-notes/#enhancements_43","text":"Removed operation name from telemetry","title":"Enhancements"},{"location":"about/release-notes/#110","text":"","title":"1.1.0"},{"location":"about/release-notes/#new-controls_16","text":"Added the PropertyFieldButtonWithCallout control Added the PropertyFieldCheckboxWithCallout control Added the PropertyFieldChoiceGroupWithCallout control Added the PropertyFieldWithCallout control Added the PropertyLabelWithCallout control Added the PropertyLinkWithCallout control Added the PropertySliderWithCallout control","title":"New control(s)"},{"location":"about/release-notes/#enhancements_44","text":"Telemetry added Term picker control has now the option to scope on term set or group","title":"Enhancements"},{"location":"about/release-notes/#100","text":"","title":"1.0.0"},{"location":"about/release-notes/#new-controls_17","text":"Added the PropertyFieldDropdownWithCallout control Added the PropertyFieldTextWithCallout control Added the PropertyFieldToggleWithCallout control","title":"New control(s)"},{"location":"about/release-notes/#100-beta3","text":"","title":"1.0.0-beta.3"},{"location":"about/release-notes/#enhancements_45","text":"Added firstDayOfWeek option to the date picker control","title":"Enhancements"},{"location":"about/release-notes/#100-beta2","text":"","title":"1.0.0-beta.2"},{"location":"about/release-notes/#new-controls_18","text":"Initial release","title":"New control(s)"},{"location":"controls/PropertyFIeldFolderPicker/","text":"PropertyFieldFolderPicker control \u00b6 This control allows you to explore and select a folder from the property pane. It also allows the user to create a new folder at the current level being explored. Here is an example of the control: PropertyFieldFolderPicker example usage How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your webpart: import { IFolder , IPropertyFieldFolderPickerProps , PropertyFieldFolderPicker } from \"@pnp/spfx-property-controls/lib/PropertyFieldFolderPicker\" ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { folderPicker : IFolder ; } Add the folder picker property control to the groupFields of the web part property pane configuration: 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\" }, }), Implementation \u00b6 The PropertyFieldFolderPicker control can be configured with the following properties: Property Type Required Description context BaseComponentContext yes The context object of the SPFx loaded webpart. label string yes The label for the control. rootFolder IFolder yes The lowest level folder that can be explored. This can be the root folder of a library. selectedFolder IFolder yes Store the results of the folder picker. defaultFolder IFolder no The default folder to be selected or explored. properties any yes Parent web part properties, this object is used to update the property value. key string yes A unique key that indicates the identity of this control. onPropertyChange function yes Defines a onPropertyChange function to raise when the data gets changed. required boolean no Is selection required. disabled boolean no Is the control disabled. canCreateFolders boolean no Allow current user to create folders on the target location. If enabled, you need to ensure that the user has the required permissions. onSelect (folder: IFolder): void no Callback function called after a folder is selected. siteAbsoluteUrl string no The absolute url of the site you want to pick a folder from (if different than the site the webpart is installed on) interface IFolder The value returned from the selected folder object. Value Type Description Name string Name of the folder. ServerRelativeUrl string Server relative URL of the folder.","title":"PropertyFieldFolderPicker control"},{"location":"controls/PropertyFIeldFolderPicker/#propertyfieldfolderpicker-control","text":"This control allows you to explore and select a folder from the property pane. It also allows the user to create a new folder at the current level being explored. Here is an example of the control: PropertyFieldFolderPicker example usage","title":"PropertyFieldFolderPicker control"},{"location":"controls/PropertyFIeldFolderPicker/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your webpart: import { IFolder , IPropertyFieldFolderPickerProps , PropertyFieldFolderPicker } from \"@pnp/spfx-property-controls/lib/PropertyFieldFolderPicker\" ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { folderPicker : IFolder ; } Add the folder picker property control to the groupFields of the web part property pane configuration: 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\" }, }),","title":"How to use this control in your solutions"},{"location":"controls/PropertyFIeldFolderPicker/#implementation","text":"The PropertyFieldFolderPicker control can be configured with the following properties: Property Type Required Description context BaseComponentContext yes The context object of the SPFx loaded webpart. label string yes The label for the control. rootFolder IFolder yes The lowest level folder that can be explored. This can be the root folder of a library. selectedFolder IFolder yes Store the results of the folder picker. defaultFolder IFolder no The default folder to be selected or explored. properties any yes Parent web part properties, this object is used to update the property value. key string yes A unique key that indicates the identity of this control. onPropertyChange function yes Defines a onPropertyChange function to raise when the data gets changed. required boolean no Is selection required. disabled boolean no Is the control disabled. canCreateFolders boolean no Allow current user to create folders on the target location. If enabled, you need to ensure that the user has the required permissions. onSelect (folder: IFolder): void no Callback function called after a folder is selected. siteAbsoluteUrl string no The absolute url of the site you want to pick a folder from (if different than the site the webpart is installed on) interface IFolder The value returned from the selected folder object. Value Type Description Name string Name of the folder. ServerRelativeUrl string Server relative URL of the folder.","title":"Implementation"},{"location":"controls/PropertyFieldButton/","text":"PropertyFieldButton control \u00b6 This control generates a Button Control . PropertyFieldButton example usage How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldButton } from '@pnp/spfx-property-controls/lib/PropertyFieldButton' ; Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldButton ( \"\" , { text = { \"Button\" } key = { \"buttonID\" } disabled = { false } className = { className } styles = { styles } onClick = {()=>{ alert ( \"Button Clicked\" )}} iconProps = { iconProps } isPrimary = { true } isVIsible = { true } }) Implementation \u00b6 The PropertyFieldButton control can be configured with the following properties: Property Type Required Description key string yes An unique key that indicates the identity of this control. styles IButtonStyles no styles object classname string no css ClassName isVisible boolean yes Indicate if button is visible text string no text of button isPrimary boolean yes indicate Button is a primary button iconProps IIconProps no text of button disable boolean no Disable control onClick (e:any) =>void yes Onclick function","title":"PropertyFieldButton"},{"location":"controls/PropertyFieldButton/#propertyfieldbutton-control","text":"This control generates a Button Control . PropertyFieldButton example usage","title":"PropertyFieldButton control"},{"location":"controls/PropertyFieldButton/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldButton } from '@pnp/spfx-property-controls/lib/PropertyFieldButton' ; Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldButton ( \"\" , { text = { \"Button\" } key = { \"buttonID\" } disabled = { false } className = { className } styles = { styles } onClick = {()=>{ alert ( \"Button Clicked\" )}} iconProps = { iconProps } isPrimary = { true } isVIsible = { true } })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldButton/#implementation","text":"The PropertyFieldButton control can be configured with the following properties: Property Type Required Description key string yes An unique key that indicates the identity of this control. styles IButtonStyles no styles object classname string no css ClassName isVisible boolean yes Indicate if button is visible text string no text of button isPrimary boolean yes indicate Button is a primary button iconProps IIconProps no text of button disable boolean no Disable control onClick (e:any) =>void yes Onclick function","title":"Implementation"},{"location":"controls/PropertyFieldButtonWithCallout/","text":"PropertyFieldButtonWithCallout control \u00b6 This control generates a button control with a callout. PropertyFieldButtonWithCallout rendering PropertyFieldButtonWithCallout callout opened How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout' ; import { PropertyFieldButtonWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldButtonWithCallout' ; Add the custom property control to the groupFields of the web part property pane configuration: 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 */ } }) Implementation \u00b6 The PropertyFieldButtonWithCallout control uses the same implementation as the default PropertyPaneButton and has the following additional properties: Property Type Required Description calloutContent React.ReactNode no Callout content - any HTML calloutWidth number no Custom width for callout including borders. If value is 0, no width is applied. calloutTrigger CalloutTriggers no Event to show the callout gapSpace number no The gap between the callout and the target Enum CalloutTriggers Name Description Click Shows the callout when you hover over the icon Hover Shows the callout when you click on the icon","title":"PropertyFieldButtonWithCallout"},{"location":"controls/PropertyFieldButtonWithCallout/#propertyfieldbuttonwithcallout-control","text":"This control generates a button control with a callout. PropertyFieldButtonWithCallout rendering PropertyFieldButtonWithCallout callout opened","title":"PropertyFieldButtonWithCallout control"},{"location":"controls/PropertyFieldButtonWithCallout/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout' ; import { PropertyFieldButtonWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldButtonWithCallout' ; Add the custom property control to the groupFields of the web part property pane configuration: 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 */ } })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldButtonWithCallout/#implementation","text":"The PropertyFieldButtonWithCallout control uses the same implementation as the default PropertyPaneButton and has the following additional properties: Property Type Required Description calloutContent React.ReactNode no Callout content - any HTML calloutWidth number no Custom width for callout including borders. If value is 0, no width is applied. calloutTrigger CalloutTriggers no Event to show the callout gapSpace number no The gap between the callout and the target Enum CalloutTriggers Name Description Click Shows the callout when you hover over the icon Hover Shows the callout when you click on the icon","title":"Implementation"},{"location":"controls/PropertyFieldCheckboxWithCallout/","text":"PropertyFieldCheckboxWithCallout control \u00b6 This control generates a checkbox control with a callout. PropertyFieldCheckboxWithCallout rendering PropertyFieldCheckboxWithCallout callout opened How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout' ; import { PropertyFieldCheckboxWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldCheckboxWithCallout' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { checkboxWithCalloutValue : boolean ; } Add the custom property control to the groupFields of the web part property pane configuration: 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 }) Implementation \u00b6 The PropertyFieldCheckboxWithCallout control uses the same implementation as the default PropertyPaneCheckbox and has the following additional properties: Property Type Required Description calloutContent React.ReactNode no Callout content - any HTML calloutWidth number no Custom width for callout including borders. If value is 0, no width is applied. calloutTrigger CalloutTriggers no Event to show the callout gapSpace number no The gap between the callout and the target Enum CalloutTriggers Name Description Click Shows the callout when you hover over the icon Hover Shows the callout when you click on the icon","title":"PropertyFieldCheckboxWithCallout"},{"location":"controls/PropertyFieldCheckboxWithCallout/#propertyfieldcheckboxwithcallout-control","text":"This control generates a checkbox control with a callout. PropertyFieldCheckboxWithCallout rendering PropertyFieldCheckboxWithCallout callout opened","title":"PropertyFieldCheckboxWithCallout control"},{"location":"controls/PropertyFieldCheckboxWithCallout/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout' ; import { PropertyFieldCheckboxWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldCheckboxWithCallout' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { checkboxWithCalloutValue : boolean ; } Add the custom property control to the groupFields of the web part property pane configuration: 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 })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldCheckboxWithCallout/#implementation","text":"The PropertyFieldCheckboxWithCallout control uses the same implementation as the default PropertyPaneCheckbox and has the following additional properties: Property Type Required Description calloutContent React.ReactNode no Callout content - any HTML calloutWidth number no Custom width for callout including borders. If value is 0, no width is applied. calloutTrigger CalloutTriggers no Event to show the callout gapSpace number no The gap between the callout and the target Enum CalloutTriggers Name Description Click Shows the callout when you hover over the icon Hover Shows the callout when you click on the icon","title":"Implementation"},{"location":"controls/PropertyFieldChoiceGroupWithCallout/","text":"PropertyFieldChoiceGroupWithCallout control \u00b6 This control generates a choice group control with a callout. PropertyFieldChoiceGroupWithCallout rendering PropertyFieldChoiceGroupWithCallout callout opened How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader' ; import { PropertyFieldChoiceGroupWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldChoiceGroupWithCallout' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { choiceGroupWithCalloutValue : string ; } Add the custom property control to the groupFields of the web part property pane configuration: 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' }] }) Implementation \u00b6 The PropertyFieldChoiceGroupWithCallout control uses the same implementation as the default PropertyPaneChoiceGroup and has the following additional properties: Property Type Required Description calloutContent React.ReactNode no Callout content - any HTML calloutWidth number no Custom width for callout including borders. If value is 0, no width is applied. calloutTrigger CalloutTriggers no Event to show the callout gapSpace number no The gap between the callout and the target Enum CalloutTriggers Name Description Click Shows the callout when you hover over the icon Hover Shows the callout when you click on the icon","title":"PropertyFieldChoiceGroupWithCallout"},{"location":"controls/PropertyFieldChoiceGroupWithCallout/#propertyfieldchoicegroupwithcallout-control","text":"This control generates a choice group control with a callout. PropertyFieldChoiceGroupWithCallout rendering PropertyFieldChoiceGroupWithCallout callout opened","title":"PropertyFieldChoiceGroupWithCallout control"},{"location":"controls/PropertyFieldChoiceGroupWithCallout/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader' ; import { PropertyFieldChoiceGroupWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldChoiceGroupWithCallout' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { choiceGroupWithCalloutValue : string ; } Add the custom property control to the groupFields of the web part property pane configuration: 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' }] })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldChoiceGroupWithCallout/#implementation","text":"The PropertyFieldChoiceGroupWithCallout control uses the same implementation as the default PropertyPaneChoiceGroup and has the following additional properties: Property Type Required Description calloutContent React.ReactNode no Callout content - any HTML calloutWidth number no Custom width for callout including borders. If value is 0, no width is applied. calloutTrigger CalloutTriggers no Event to show the callout gapSpace number no The gap between the callout and the target Enum CalloutTriggers Name Description Click Shows the callout when you hover over the icon Hover Shows the callout when you click on the icon","title":"Implementation"},{"location":"controls/PropertyFieldCodeEditor/","text":"PropertyFieldCodeEditor control \u00b6 This control generates a code editor which can be used to add custom styling or content to your web part. PropertyFieldCodeEditor PropertyFieldCodeEditor editing experience How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldCodeEditor , PropertyFieldCodeEditorLanguages } from '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { htmlCode : string ; } Add the custom property control to the groupFields of the web part property pane configuration: 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 } }) Implementation \u00b6 The PropertyFieldCodeEditor control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. disabled boolean no Specify if the control needs to be disabled. panelTitle string yes Title of the code editor panel. initialValue string no Defines the initial code. language PropertyFieldCodeEditorLanguages no Sets the language on the code editor. properties any yes Parent web part properties, this object is use to update the property value. onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. key string yes An unique key that indicates the identity of this control. options AceOptions no Additional properties available to the Ace editor. panelWidth string no Width of the panel that contains the Ace editor Enum PropertyFieldCodeEditorLanguages Name css JavaScript JSON Handlebars HTML Plain Text Sass TypeScript XML","title":"PropertyFieldCodeEditor"},{"location":"controls/PropertyFieldCodeEditor/#propertyfieldcodeeditor-control","text":"This control generates a code editor which can be used to add custom styling or content to your web part. PropertyFieldCodeEditor PropertyFieldCodeEditor editing experience","title":"PropertyFieldCodeEditor control"},{"location":"controls/PropertyFieldCodeEditor/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldCodeEditor , PropertyFieldCodeEditorLanguages } from '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { htmlCode : string ; } Add the custom property control to the groupFields of the web part property pane configuration: 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 } })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldCodeEditor/#implementation","text":"The PropertyFieldCodeEditor control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. disabled boolean no Specify if the control needs to be disabled. panelTitle string yes Title of the code editor panel. initialValue string no Defines the initial code. language PropertyFieldCodeEditorLanguages no Sets the language on the code editor. properties any yes Parent web part properties, this object is use to update the property value. onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. key string yes An unique key that indicates the identity of this control. options AceOptions no Additional properties available to the Ace editor. panelWidth string no Width of the panel that contains the Ace editor Enum PropertyFieldCodeEditorLanguages Name css JavaScript JSON Handlebars HTML Plain Text Sass TypeScript XML","title":"Implementation"},{"location":"controls/PropertyFieldCollectionData/","text":"PropertyFieldCollectionData control \u00b6 This property field control gives you the ability to insert a list / collection data which can be used in your web part. For example: you want to specify multiple locations for showing a weather information. The control allows you to specify multiple data types like: string, number, boolean, or dropdown. PropertyFieldCollectionData The type of data you get returned depends on the fields you defined. For the example above, the data looks like this: [ { \"Title\" : \"Person\" , \"Lastname\" : \"1\" , \"Age\" : \"42\" , \"City\" : \"helsinki\" , \"Sign\" : true }, { \"Title\" : \"Person\" , \"Lastname\" : \"2\" , \"Age\" : \"42\" , \"City\" : \"helsinki\" , \"Sign\" : true } ] How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldCollectionData , CustomCollectionFieldType } from '@pnp/spfx-property-controls/lib/PropertyFieldCollectionData' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { collectionData : any []; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldCollectionData ( \"collectionData\" , { key : \"collectionData\" , label : \"Collection data\" , panelHeader : \"Collection data panel header\" , manageBtnLabel : \"Manage collection data\" , value : this.properties.collectionData , fields : [ { id : \"Title\" , title : \"Firstname\" , type : CustomCollectionFieldType . string , required : true }, { id : \"Lastname\" , title : \"Lastname\" , type : CustomCollectionFieldType . string }, { id : \"Age\" , title : \"Age\" , type : CustomCollectionFieldType . number , required : true }, { id : \"City\" , title : \"Favorite city\" , type : CustomCollectionFieldType . dropdown , options : [ { key : \"antwerp\" , text : \"Antwerp\" }, { key : \"helsinki\" , text : \"Helsinki\" }, { key : \"montreal\" , text : \"Montreal\" } ], required : true }, { id : \"Sign\" , title : \"Signed\" , type : CustomCollectionFieldType . boolean } ], disabled : false }) Sample of custom field rendering \u00b6 Here is an example of how you can render your own controls in the PropertyFieldCollectionData control: { 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 , \"\" ); } }}), \" \ud83c\udf89\" ) ); } } Implementation \u00b6 The PropertyFieldCollectionData control can be configured with the following properties: Property Type Required Description Default Value key string yes An unique key that indicates the identity of this control. label string yes Property field label displayed on top. panelHeader string yes Label to be used as the header in the panel. panelDescription string no Property that allows you to specify a description in the collection panel. manageBtnLabel string yes Label of the button to open the panel. saveBtnLabel string no Label of the save button. saveAndAddBtnLabel string yes Label of the save and add button. cancelBtnLabel string yes Label of the cancel button. fields ICustomCollectionField[] yes The fields to be used for the list of collection data. value string yes The collection data value. enableSorting boolean no Specify if you want to be able to sort the items in the collection. false disabled boolean no Specify if the control is disabled. false disableItemCreation boolean no Allows you to specify if user can create new items. false disableItemDeletion boolean no Allows you to specify if users can delete already inserted items. false panelClassName string no Allows you to specify a custom CSS class name for the collection data panel. tableClassName string no Allows you to specify a custom CSS class name for the collection data table inside the panel. panelProps IPanelProps no Allows you to pass in props of the panel such as type and size to control the underlying panel. Interface ICustomCollectionField Property Type Required Description id string yes ID of the field. title string yes Title of the field. This will be used for the label in the table. type CustomCollectionFieldType yes Specifies the type of field to render. disable (item: any) => boolean no Conditionally disable a field. disableEdit boolean no Allows you to specify if a field is disabled for editing. required boolean no Specify if the field is required. options IDropdownOption[] | (fieldId: string, item: any) => IDropdownOption[] no Dropdown options. Only necessary when dropdown type is used. Options can be either a static array or a function that will calculate the values dynamically and can react to the current item. onRenderOption IRenderFunction no Dropdown custom options render method. Only for the dropdown field type. placeholder string no Placeholder text which will be used for the input field. If not provided the input title will be used. defaultValue any no Specify a default value for the input field. deferredValidationTime number no Field will start to validate after users stop typing for deferredValidationTime milliseconds. Default: 200ms. onGetErrorMessage (value: any, index: number, crntItem: any): string | Promise no The method is used to get the validation error message and determine whether the input value is valid or not. It provides you the current row index and the item you are currently editing. onCustomRender (field: ICustomCollectionField, value: any, onUpdate: (fieldId: string, value: any) => void, item: any, itemUniqueId: string, onCustomFieldValidation: (fieldId: string, errorMessage: string) => void) => JSX.Element no This property is only required if you are using the custom field type and it can be used to specify the custom rendering of your control in the collection data. isVisible (field: ICustomCollectionField, items: any[]) => boolean no The method is used to toggle column visibility depending on current state of editing items iconFieldRenderMode CollectionIconFieldRenderMode no Icon field render mode: text box or IconPicker Enum CustomCollectionFieldType Type Description string Text field number Number field boolean Checkbox dropdown Dropdown field. You will have to specify the options property when using this field type fabricIcon Name of the Office UI Fabric icon url URL field custom This gives you control over the whole field rendering. Be sure to provide the onCustomRender method to render your control in the collection data. color Color field Type CollectionIconFieldRenderMode export type CollectionIconFieldRenderMode = 'textbox' | 'picker' ;","title":"PropertyFieldCollectionData"},{"location":"controls/PropertyFieldCollectionData/#propertyfieldcollectiondata-control","text":"This property field control gives you the ability to insert a list / collection data which can be used in your web part. For example: you want to specify multiple locations for showing a weather information. The control allows you to specify multiple data types like: string, number, boolean, or dropdown. PropertyFieldCollectionData The type of data you get returned depends on the fields you defined. For the example above, the data looks like this: [ { \"Title\" : \"Person\" , \"Lastname\" : \"1\" , \"Age\" : \"42\" , \"City\" : \"helsinki\" , \"Sign\" : true }, { \"Title\" : \"Person\" , \"Lastname\" : \"2\" , \"Age\" : \"42\" , \"City\" : \"helsinki\" , \"Sign\" : true } ]","title":"PropertyFieldCollectionData control"},{"location":"controls/PropertyFieldCollectionData/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldCollectionData , CustomCollectionFieldType } from '@pnp/spfx-property-controls/lib/PropertyFieldCollectionData' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { collectionData : any []; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldCollectionData ( \"collectionData\" , { key : \"collectionData\" , label : \"Collection data\" , panelHeader : \"Collection data panel header\" , manageBtnLabel : \"Manage collection data\" , value : this.properties.collectionData , fields : [ { id : \"Title\" , title : \"Firstname\" , type : CustomCollectionFieldType . string , required : true }, { id : \"Lastname\" , title : \"Lastname\" , type : CustomCollectionFieldType . string }, { id : \"Age\" , title : \"Age\" , type : CustomCollectionFieldType . number , required : true }, { id : \"City\" , title : \"Favorite city\" , type : CustomCollectionFieldType . dropdown , options : [ { key : \"antwerp\" , text : \"Antwerp\" }, { key : \"helsinki\" , text : \"Helsinki\" }, { key : \"montreal\" , text : \"Montreal\" } ], required : true }, { id : \"Sign\" , title : \"Signed\" , type : CustomCollectionFieldType . boolean } ], disabled : false })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldCollectionData/#sample-of-custom-field-rendering","text":"Here is an example of how you can render your own controls in the PropertyFieldCollectionData control: { 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 , \"\" ); } }}), \" \ud83c\udf89\" ) ); } }","title":"Sample of custom field rendering"},{"location":"controls/PropertyFieldCollectionData/#implementation","text":"The PropertyFieldCollectionData control can be configured with the following properties: Property Type Required Description Default Value key string yes An unique key that indicates the identity of this control. label string yes Property field label displayed on top. panelHeader string yes Label to be used as the header in the panel. panelDescription string no Property that allows you to specify a description in the collection panel. manageBtnLabel string yes Label of the button to open the panel. saveBtnLabel string no Label of the save button. saveAndAddBtnLabel string yes Label of the save and add button. cancelBtnLabel string yes Label of the cancel button. fields ICustomCollectionField[] yes The fields to be used for the list of collection data. value string yes The collection data value. enableSorting boolean no Specify if you want to be able to sort the items in the collection. false disabled boolean no Specify if the control is disabled. false disableItemCreation boolean no Allows you to specify if user can create new items. false disableItemDeletion boolean no Allows you to specify if users can delete already inserted items. false panelClassName string no Allows you to specify a custom CSS class name for the collection data panel. tableClassName string no Allows you to specify a custom CSS class name for the collection data table inside the panel. panelProps IPanelProps no Allows you to pass in props of the panel such as type and size to control the underlying panel. Interface ICustomCollectionField Property Type Required Description id string yes ID of the field. title string yes Title of the field. This will be used for the label in the table. type CustomCollectionFieldType yes Specifies the type of field to render. disable (item: any) => boolean no Conditionally disable a field. disableEdit boolean no Allows you to specify if a field is disabled for editing. required boolean no Specify if the field is required. options IDropdownOption[] | (fieldId: string, item: any) => IDropdownOption[] no Dropdown options. Only necessary when dropdown type is used. Options can be either a static array or a function that will calculate the values dynamically and can react to the current item. onRenderOption IRenderFunction no Dropdown custom options render method. Only for the dropdown field type. placeholder string no Placeholder text which will be used for the input field. If not provided the input title will be used. defaultValue any no Specify a default value for the input field. deferredValidationTime number no Field will start to validate after users stop typing for deferredValidationTime milliseconds. Default: 200ms. onGetErrorMessage (value: any, index: number, crntItem: any): string | Promise no The method is used to get the validation error message and determine whether the input value is valid or not. It provides you the current row index and the item you are currently editing. onCustomRender (field: ICustomCollectionField, value: any, onUpdate: (fieldId: string, value: any) => void, item: any, itemUniqueId: string, onCustomFieldValidation: (fieldId: string, errorMessage: string) => void) => JSX.Element no This property is only required if you are using the custom field type and it can be used to specify the custom rendering of your control in the collection data. isVisible (field: ICustomCollectionField, items: any[]) => boolean no The method is used to toggle column visibility depending on current state of editing items iconFieldRenderMode CollectionIconFieldRenderMode no Icon field render mode: text box or IconPicker Enum CustomCollectionFieldType Type Description string Text field number Number field boolean Checkbox dropdown Dropdown field. You will have to specify the options property when using this field type fabricIcon Name of the Office UI Fabric icon url URL field custom This gives you control over the whole field rendering. Be sure to provide the onCustomRender method to render your control in the collection data. color Color field Type CollectionIconFieldRenderMode export type CollectionIconFieldRenderMode = 'textbox' | 'picker' ;","title":"Implementation"},{"location":"controls/PropertyFieldColorPicker/","text":"PropertyFieldColorPicker control \u00b6 This control generates a color picker that you can use inside the property pane. PropertyFieldColorPicker PropertyFieldColorPicker color selector How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldColorPicker , PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { color : string ; } Add the custom property control to the groupFields of the web part property pane configuration: 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' }) Implementation \u00b6 The PropertyFieldColorPicker control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. disabled boolean no Specify if the control needs to be disabled. debounce number no Specify delay after which control value will be set. isHidden boolean no Specify if the control needs to be hidden. selectedColor string or IColor no The CSS-compatible string or an IColor object to describe the initial color alphaSliderHidden boolean no When true, the alpha slider control is hidden showPreview boolean no Whether to show color preview box. style PropertyFieldColorPickerStyle no Determines how the control is displayed (defaults to inline) iconName string no The name of the UI Fabric Font Icon to use for Inline display (defaults to Color) valueAsObject boolean no When true, the property is returned as an IColor object. When false (default), the property is returned as a CSS-compatible string properties any yes Parent web part properties, this object is use to update the property value. onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. key string yes An unique key that indicates the identity of this control. Enum PropertyFieldColorPickerStyle Name Description Full Display the full control in the property pane Inline Display the color picker inline Value \u00b6 By default, the Color Picker returns the value as a CSS-compatible string. This allows you the flexibility of simply assigning the value to an inline style as is and this is usually sufficient. However, this also limits the information directly available to you since the format could be a Hex code, an RGBA value, or even a named color and may not be suitable for advanced scenarios. By setting the valueAsObject property to true, you will always receive a consistent IColor object that provides you detailed information about the chosen color. Here are the properties available in the IColor object: Property Type Description str string CSS-compatible string (this is the same value that would normally be returned when valueAsObject is false) hex string Hex value (does not reflect alpha) r number Red g number Green b number Blue h number Hue s number Saturation v number Value","title":"PropertyFieldColorPicker"},{"location":"controls/PropertyFieldColorPicker/#propertyfieldcolorpicker-control","text":"This control generates a color picker that you can use inside the property pane. PropertyFieldColorPicker PropertyFieldColorPicker color selector","title":"PropertyFieldColorPicker control"},{"location":"controls/PropertyFieldColorPicker/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldColorPicker , PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { color : string ; } Add the custom property control to the groupFields of the web part property pane configuration: 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' })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldColorPicker/#implementation","text":"The PropertyFieldColorPicker control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. disabled boolean no Specify if the control needs to be disabled. debounce number no Specify delay after which control value will be set. isHidden boolean no Specify if the control needs to be hidden. selectedColor string or IColor no The CSS-compatible string or an IColor object to describe the initial color alphaSliderHidden boolean no When true, the alpha slider control is hidden showPreview boolean no Whether to show color preview box. style PropertyFieldColorPickerStyle no Determines how the control is displayed (defaults to inline) iconName string no The name of the UI Fabric Font Icon to use for Inline display (defaults to Color) valueAsObject boolean no When true, the property is returned as an IColor object. When false (default), the property is returned as a CSS-compatible string properties any yes Parent web part properties, this object is use to update the property value. onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. key string yes An unique key that indicates the identity of this control. Enum PropertyFieldColorPickerStyle Name Description Full Display the full control in the property pane Inline Display the color picker inline","title":"Implementation"},{"location":"controls/PropertyFieldColorPicker/#value","text":"By default, the Color Picker returns the value as a CSS-compatible string. This allows you the flexibility of simply assigning the value to an inline style as is and this is usually sufficient. However, this also limits the information directly available to you since the format could be a Hex code, an RGBA value, or even a named color and may not be suitable for advanced scenarios. By setting the valueAsObject property to true, you will always receive a consistent IColor object that provides you detailed information about the chosen color. Here are the properties available in the IColor object: Property Type Description str string CSS-compatible string (this is the same value that would normally be returned when valueAsObject is false) hex string Hex value (does not reflect alpha) r number Red g number Green b number Blue h number Hue s number Saturation v number Value","title":"Value"},{"location":"controls/PropertyFieldColumnPicker/","text":"PropertyFieldColumnPicker control \u00b6 This control generates a column picker field that can be used in the property pane of your SharePoint Framework web parts. The control automatically retrieves the columns for a given SharePoint list: How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldColumnPicker , PropertyFieldColumnPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldColumnPicker' ; You'll probably want to use this control in combination with the PropertyFieldListPicker . Make sure to select the multiSelect prop to false , as this control is designed to work with a single list. Store the list id in your web part properties, as follows: export interface IPropertyControlsTestWebPartProps { list : string ; // Stores the list ID } Create a new property for your web part, as indicated between the BEGIN: and END: comments below: 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 } Add the custom property control to the groupFields of the web part property pane configuration: // Single column selection returning 'Internal Name' of the selected column PropertyFieldColumnPicker ( 'column' , { label : 'Select a column' , context : this.context , selectedColumn : this.properties.column , listId : this.properties.singleListFiltered , disabled : false , orderBy : PropertyFieldColumnPickerOrderBy.Title , onPropertyChange : this.onPropertyPaneFieldChanged.bind ( this ), properties : this.properties , onGetErrorMessage : null , deferredValidationTime : 0 , key : 'columnPickerFieldId' , displayHiddenColumns : false , columnReturnProperty : IColumnReturnProperty [ \"Internal Name\" ] }) // Multi column selection returning the 'Title' of the selected columns 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 }) // Multi column selection returning the 'Title' of the selected columns as a multi-select dropdown 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\" ] }) Implementation \u00b6 The PropertyFieldColumnPicker control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. listId string yes The ID of the list or library you wish to select a column(s) from. disabled boolean no Specify if the control needs to be disabled. context BaseComponentContext yes Context of the current web part. selectedColumn string | string[] no Initial selected column(s) of the control. orderBy PropertyFieldColumnPickerOrderBy no Specify the property on which you want to order the retrieve set of columns. multiSelect boolean no Specify if you want to have a single or multi-column picker. By default this is set to false (single column picker). webAbsoluteUrl string no Absolute Web Url of target site (user requires permissions) onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. properties any yes Parent web part properties, this object is use to update the property value. key string yes An unique key that indicates the identity of this control. onGetErrorMessage function no The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. deferredValidationTime number no Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. columnsToExclude string[] no Defines columns by which should be excluded from the column picker control. You can specify column titles or IDs filter string no Filter columns from OData query. onColumnsRetrieved (columns: ISPColumn[]) => PromiseLike | ISPColumn[] no Callback that is called before the dropdown is populated. displayHiddenColumns boolean no Hidden columns to be returned or not. By default this is set to false (No Hidden columns) columnReturnProperty IColumnReturnProperty no Property to be returned for the selected column(s). renderFieldAs IPropertyFieldRenderOption no Property to render the control as Choice group or Multiselect Dropdown . This is applicable only if the multiselect is true . By default the control will be displayed as Choice Group Enum PropertyFieldColumnPickerOrderBy Name Description Id Sort by column ID Title Sort by column title Enum IColumnReturnProperty Name Description Id Column ID to be returned Title Column Title to be returned Internal Name Column InternalName to be returned Enum IPropertyFieldRenderOption | Name | Description | | ---- | ---- | | Choice Group | Render the control as multi-select checkbox list | Multiselect Dropdown | Render the control as multi-select dropdown","title":"PropertyFieldColumnPicker"},{"location":"controls/PropertyFieldColumnPicker/#propertyfieldcolumnpicker-control","text":"This control generates a column picker field that can be used in the property pane of your SharePoint Framework web parts. The control automatically retrieves the columns for a given SharePoint list:","title":"PropertyFieldColumnPicker control"},{"location":"controls/PropertyFieldColumnPicker/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldColumnPicker , PropertyFieldColumnPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldColumnPicker' ; You'll probably want to use this control in combination with the PropertyFieldListPicker . Make sure to select the multiSelect prop to false , as this control is designed to work with a single list. Store the list id in your web part properties, as follows: export interface IPropertyControlsTestWebPartProps { list : string ; // Stores the list ID } Create a new property for your web part, as indicated between the BEGIN: and END: comments below: 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 } Add the custom property control to the groupFields of the web part property pane configuration: // Single column selection returning 'Internal Name' of the selected column PropertyFieldColumnPicker ( 'column' , { label : 'Select a column' , context : this.context , selectedColumn : this.properties.column , listId : this.properties.singleListFiltered , disabled : false , orderBy : PropertyFieldColumnPickerOrderBy.Title , onPropertyChange : this.onPropertyPaneFieldChanged.bind ( this ), properties : this.properties , onGetErrorMessage : null , deferredValidationTime : 0 , key : 'columnPickerFieldId' , displayHiddenColumns : false , columnReturnProperty : IColumnReturnProperty [ \"Internal Name\" ] }) // Multi column selection returning the 'Title' of the selected columns 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 }) // Multi column selection returning the 'Title' of the selected columns as a multi-select dropdown 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\" ] })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldColumnPicker/#implementation","text":"The PropertyFieldColumnPicker control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. listId string yes The ID of the list or library you wish to select a column(s) from. disabled boolean no Specify if the control needs to be disabled. context BaseComponentContext yes Context of the current web part. selectedColumn string | string[] no Initial selected column(s) of the control. orderBy PropertyFieldColumnPickerOrderBy no Specify the property on which you want to order the retrieve set of columns. multiSelect boolean no Specify if you want to have a single or multi-column picker. By default this is set to false (single column picker). webAbsoluteUrl string no Absolute Web Url of target site (user requires permissions) onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. properties any yes Parent web part properties, this object is use to update the property value. key string yes An unique key that indicates the identity of this control. onGetErrorMessage function no The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. deferredValidationTime number no Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. columnsToExclude string[] no Defines columns by which should be excluded from the column picker control. You can specify column titles or IDs filter string no Filter columns from OData query. onColumnsRetrieved (columns: ISPColumn[]) => PromiseLike | ISPColumn[] no Callback that is called before the dropdown is populated. displayHiddenColumns boolean no Hidden columns to be returned or not. By default this is set to false (No Hidden columns) columnReturnProperty IColumnReturnProperty no Property to be returned for the selected column(s). renderFieldAs IPropertyFieldRenderOption no Property to render the control as Choice group or Multiselect Dropdown . This is applicable only if the multiselect is true . By default the control will be displayed as Choice Group Enum PropertyFieldColumnPickerOrderBy Name Description Id Sort by column ID Title Sort by column title Enum IColumnReturnProperty Name Description Id Column ID to be returned Title Column Title to be returned Internal Name Column InternalName to be returned Enum IPropertyFieldRenderOption | Name | Description | | ---- | ---- | | Choice Group | Render the control as multi-select checkbox list | Multiselect Dropdown | Render the control as multi-select dropdown","title":"Implementation"},{"location":"controls/PropertyFieldContentTypePicker/","text":"PropertyFieldContentTypePicker control \u00b6 This control generates a ContentType picker field that can be used in the property pane of your SharePoint Framework web parts. The control automatically retrieves the ContentType for a given SharePoint Site or selected SharePoint list: How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldContentTypePicker , PropertyFieldContentTypePickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldContentTypePicker' ; You'll probably want to use this control in combination with the PropertyFieldListPicker . Make sure to select the multiSelect prop to false , as this control is designed to work with a single list. Store the list id in your web part properties, as follows: export interface IPropertyControlsTestWebPartProps { list : string ; // Stores the list ID } Create a new property for your web part, as indicated between the BEGIN: and END: comments below: export interface IPropertyControlsTestWebPartProps { list : string ; // Stores the list ID // BEGIN: Added view : string ; // Stores the view ID contentType : string // stores the contenttype ID // END: Added } Add the custom property control to the groupFields of the web part property pane 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' }) To fetch the contentTypes of a particular site, change the property pane configuration as follows: PropertyFieldContentTypePicker ( 'contentType' , { label : 'Select a Content Type' , context : this.context , selectedContentType : this.properties.contentType , disabled : false , webAbsoluteUrl : \"https://****.sharepoint.com/sites/*****\" , orderBy : PropertyFieldContentTypeOrderBy.Name , onPropertyChange : this.onPropertyPaneFieldChanged.bind ( this ), properties : this.properties , onGetErrorMessage : null , deferredValidationTime : 0 , key : 'contentTypePickerFieldId' }) To fetch the contentTypes of selected list, change the property pane configuration as follows: 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' }) If ListID specified in the propertiesc is not available in the selected site, the control will error out as follows 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' }) Implementation \u00b6 The PropertyFieldContentTypePicker control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. listId string no The ID of the list or library you wish to select a contentType from. disabled boolean no Specify if the control needs to be disabled. context BaseComponentContext yes Context of the current web part. selectedContentType string string[] no orderBy PropertyFieldContentTypeOrderBy no Specify the property on which you want to order the retrieve set of ContentTypes. webAbsoluteUrl string no Absolute Web Url of target site (user requires permissions) onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. properties any yes Parent web part properties, this object is use to update the property value. key string yes An unique key that indicates the identity of this control. onGetErrorMessage function no The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. deferredValidationTime number no Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. contentTypesToExclude string[] no Defines contentTypes by which should be excluded from the contentType picker control. You can specify contentType titles or IDs filter string no Filter contentTypes from OData query. onContentTypesRetrieved (contentType: ISPContentType[]) => PromiseLike | ISPContentType[] no Callback that is called before the dropdown is populated. Enum PropertyFieldContentTypePickerOrderBy Name Description Id Sort by contentType ID Title Sort by contentType title","title":"PropertyFieldContentTypePicker control"},{"location":"controls/PropertyFieldContentTypePicker/#propertyfieldcontenttypepicker-control","text":"This control generates a ContentType picker field that can be used in the property pane of your SharePoint Framework web parts. The control automatically retrieves the ContentType for a given SharePoint Site or selected SharePoint list:","title":"PropertyFieldContentTypePicker control"},{"location":"controls/PropertyFieldContentTypePicker/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldContentTypePicker , PropertyFieldContentTypePickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldContentTypePicker' ; You'll probably want to use this control in combination with the PropertyFieldListPicker . Make sure to select the multiSelect prop to false , as this control is designed to work with a single list. Store the list id in your web part properties, as follows: export interface IPropertyControlsTestWebPartProps { list : string ; // Stores the list ID } Create a new property for your web part, as indicated between the BEGIN: and END: comments below: export interface IPropertyControlsTestWebPartProps { list : string ; // Stores the list ID // BEGIN: Added view : string ; // Stores the view ID contentType : string // stores the contenttype ID // END: Added } Add the custom property control to the groupFields of the web part property pane 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' }) To fetch the contentTypes of a particular site, change the property pane configuration as follows: PropertyFieldContentTypePicker ( 'contentType' , { label : 'Select a Content Type' , context : this.context , selectedContentType : this.properties.contentType , disabled : false , webAbsoluteUrl : \"https://****.sharepoint.com/sites/*****\" , orderBy : PropertyFieldContentTypeOrderBy.Name , onPropertyChange : this.onPropertyPaneFieldChanged.bind ( this ), properties : this.properties , onGetErrorMessage : null , deferredValidationTime : 0 , key : 'contentTypePickerFieldId' }) To fetch the contentTypes of selected list, change the property pane configuration as follows: 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' }) If ListID specified in the propertiesc is not available in the selected site, the control will error out as follows 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' })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldContentTypePicker/#implementation","text":"The PropertyFieldContentTypePicker control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. listId string no The ID of the list or library you wish to select a contentType from. disabled boolean no Specify if the control needs to be disabled. context BaseComponentContext yes Context of the current web part. selectedContentType string string[] no orderBy PropertyFieldContentTypeOrderBy no Specify the property on which you want to order the retrieve set of ContentTypes. webAbsoluteUrl string no Absolute Web Url of target site (user requires permissions) onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. properties any yes Parent web part properties, this object is use to update the property value. key string yes An unique key that indicates the identity of this control. onGetErrorMessage function no The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. deferredValidationTime number no Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. contentTypesToExclude string[] no Defines contentTypes by which should be excluded from the contentType picker control. You can specify contentType titles or IDs filter string no Filter contentTypes from OData query. onContentTypesRetrieved (contentType: ISPContentType[]) => PromiseLike | ISPContentType[] no Callback that is called before the dropdown is populated. Enum PropertyFieldContentTypePickerOrderBy Name Description Id Sort by contentType ID Title Sort by contentType title","title":"Implementation"},{"location":"controls/PropertyFieldDateTimePicker/","text":"PropertyFieldDateTimePicker control \u00b6 This control generates a Date and Time picker field that can be used in the property pane of your SharePoint Framework web parts. The control can be configured to be date only or date and time. Date only Date picker Date and time How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldDateTimePicker , DateConvention , TimeConvention } from '@pnp/spfx-property-controls/lib/PropertyFieldDateTimePicker' ; Create a new property for your web part, for example: import { IDateTimeFieldValue } from \"@pnp/spfx-property-controls/lib/PropertyFieldDateTimePicker\" ; export interface IPropertyControlsTestWebPartProps { datetime : IDateTimeFieldValue ; } Add the custom property control to the groupFields of the web part property pane configuration: 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 : null , deferredValidationTime : 0 , key : 'dateTimeFieldId' , showLabels : false }) Implementation \u00b6 The PropertyFieldDateTimePicker control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. disabled boolean no Specify if the control needs to be disabled. initialData IDateTimeFieldValue yes Initial date and time value of the control. formatData function no Defines a formatDate function that can override the output value. dateConvention DateConvention no Defines the date convention to use. By default this is set to date and time. timeConvention TimeConvention no Defines the time convention to use. By default this is set to 24-hour clock convention. onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. properties any yes Parent web part properties, this object is use to update the property value. key string yes An unique key that indicates the identity of this control. onGetErrorMessage function no The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. deferredValidationTime number no Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. showLabels boolean no Specify if labels in front of Date and Time parts should be rendered. By default this is set to true Interface IDateTimeFieldValue Property Type Required Description value Date yes JavaScript date value. displayValue string yes Date value formatted as a string. Enum DateConvention Name Description DateTime Shows the date and time picker Date Shows only the date picker Enum TimeConvention Name Description Hours12 Specify the hours in 12-hours (AM / PM) time convention. Hours24 Specify the hours in 24-hours time convention.","title":"PropertyFieldDateTimePicker"},{"location":"controls/PropertyFieldDateTimePicker/#propertyfielddatetimepicker-control","text":"This control generates a Date and Time picker field that can be used in the property pane of your SharePoint Framework web parts. The control can be configured to be date only or date and time. Date only Date picker Date and time","title":"PropertyFieldDateTimePicker control"},{"location":"controls/PropertyFieldDateTimePicker/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldDateTimePicker , DateConvention , TimeConvention } from '@pnp/spfx-property-controls/lib/PropertyFieldDateTimePicker' ; Create a new property for your web part, for example: import { IDateTimeFieldValue } from \"@pnp/spfx-property-controls/lib/PropertyFieldDateTimePicker\" ; export interface IPropertyControlsTestWebPartProps { datetime : IDateTimeFieldValue ; } Add the custom property control to the groupFields of the web part property pane configuration: 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 : null , deferredValidationTime : 0 , key : 'dateTimeFieldId' , showLabels : false })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldDateTimePicker/#implementation","text":"The PropertyFieldDateTimePicker control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. disabled boolean no Specify if the control needs to be disabled. initialData IDateTimeFieldValue yes Initial date and time value of the control. formatData function no Defines a formatDate function that can override the output value. dateConvention DateConvention no Defines the date convention to use. By default this is set to date and time. timeConvention TimeConvention no Defines the time convention to use. By default this is set to 24-hour clock convention. onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. properties any yes Parent web part properties, this object is use to update the property value. key string yes An unique key that indicates the identity of this control. onGetErrorMessage function no The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. deferredValidationTime number no Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. showLabels boolean no Specify if labels in front of Date and Time parts should be rendered. By default this is set to true Interface IDateTimeFieldValue Property Type Required Description value Date yes JavaScript date value. displayValue string yes Date value formatted as a string. Enum DateConvention Name Description DateTime Shows the date and time picker Date Shows only the date picker Enum TimeConvention Name Description Hours12 Specify the hours in 12-hours (AM / PM) time convention. Hours24 Specify the hours in 24-hours time convention.","title":"Implementation"},{"location":"controls/PropertyFieldDropdownWithCallout/","text":"PropertyFieldDropDownWithCallout control \u00b6 This control generates a dropdown control with a callout. PropertyFieldDropDownWithCallout rendering PropertyFieldDropDownWithCallout callout opened How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader' ; import { PropertyFieldDropdownWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldDropdownWithCallout' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { dropdownInfoHeaderKey : string ; } Add the custom property control to the groupFields of the web part property pane configuration: 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 }) Implement the calloutContent function as follows: private getDropdownInfoHeaderCalloutContent () : JSX . Element { const selectedKey : string = this . properties . dropdownInfoHeaderKey ; if ( selectedKey ) { return React . createElement ( 'div' , {}, `you have selected ${ selectedKey } ` ); } else { return React . createElement ( 'div' , {}, `you haven't selected any version` ); } } Implementation \u00b6 The PropertyFieldDropDownWithCallout control uses the same implementation as the default PropertyPaneDropdown and has the following additional properties: Property Type Required Description calloutContent React.ReactNode no Callout content - any HTML calloutWidth number no Custom width for callout including borders. If value is 0, no width is applied. calloutTrigger CalloutTriggers no Event to show the callout gapSpace number no The gap between the callout and the target Enum CalloutTriggers Name Description Click Shows the callout when you hover over the icon Hover Shows the callout when you click on the icon","title":"PropertyFieldDropdownWithCallout"},{"location":"controls/PropertyFieldDropdownWithCallout/#propertyfielddropdownwithcallout-control","text":"This control generates a dropdown control with a callout. PropertyFieldDropDownWithCallout rendering PropertyFieldDropDownWithCallout callout opened","title":"PropertyFieldDropDownWithCallout control"},{"location":"controls/PropertyFieldDropdownWithCallout/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader' ; import { PropertyFieldDropdownWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldDropdownWithCallout' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { dropdownInfoHeaderKey : string ; } Add the custom property control to the groupFields of the web part property pane configuration: 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 }) Implement the calloutContent function as follows: private getDropdownInfoHeaderCalloutContent () : JSX . Element { const selectedKey : string = this . properties . dropdownInfoHeaderKey ; if ( selectedKey ) { return React . createElement ( 'div' , {}, `you have selected ${ selectedKey } ` ); } else { return React . createElement ( 'div' , {}, `you haven't selected any version` ); } }","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldDropdownWithCallout/#implementation","text":"The PropertyFieldDropDownWithCallout control uses the same implementation as the default PropertyPaneDropdown and has the following additional properties: Property Type Required Description calloutContent React.ReactNode no Callout content - any HTML calloutWidth number no Custom width for callout including borders. If value is 0, no width is applied. calloutTrigger CalloutTriggers no Event to show the callout gapSpace number no The gap between the callout and the target Enum CalloutTriggers Name Description Click Shows the callout when you hover over the icon Hover Shows the callout when you click on the icon","title":"Implementation"},{"location":"controls/PropertyFieldEnterpriseTermPicker/","text":"PropertyFieldEnterpriseTermPicker control \u00b6 This control generates a term picker that can be used in the property pane of your SharePoint Framework web parts. Disclaimer : This control makes use of the @pnp/sp-taxonomy module to retrieve the managed metadata information. It leads to increase of the bundle/package size if the control is being used. Use the control for \"enterprise\" scenarios (large term stores with lots of objects) or if you need to request labels for terms. Empty term picker Selecting terms Selected terms in the panel Empty term picker Term picker: Auto Complete Limit the term set to a specific group or termset How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldEnterpriseTermPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldEnterpriseTermPicker' ; Create a new property for your web part, for example: import { IPickerTerms } from \"@pnp/spfx-property-controls/lib/PropertyFieldEnterpriseTermPicker\" ; export interface IPropertyControlsTestWebPartProps { terms : IPickerTerms ; } Add the custom property control to the groupFields of the web part property pane configuration: 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 }) Implementation \u00b6 The PropertyFieldEnterpriseTermPicker control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. panelTitle string yes TermSet Picker Panel title. disabled boolean no Specify if the control needs to be disabled. context BaseComponentContext yes Context of the current web part. initialValues IPickerTerms no Defines the selected by default term sets. allowMultipleSelections boolean no Defines if the user can select only one or many term sets. Default value is false. excludeSystemGroup boolean no Indicator to define if the system Groups are exclude. Default is false. limitByGroupNameOrID string no Limit the term sets that can be used by the group name or ID. limitByTermsetNameOrID string no Limit the terms that can be picked by the Term Set name or ID. hideTermStoreName boolean no Specifies if you want to show or hide the term store name from the panel. isTermSetSelectable boolean no Specify if the term set itself is selectable in the tree view. disabledTermIds string[] no Specify which terms should be disabled in the term set so that they cannot be selected. onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. properties any yes Parent web part properties, this object is use to update the property value. key string yes An unique key that indicates the identity of this control. onGetErrorMessage function no The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. deferredValidationTime number no Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. resolveDelay number no The delay time in ms before resolving suggestions, which is kicked off when input has been changed. e.g. if a second input change happens within the resolveDelay time, the timer will start over. Only until after the timer completes will onResolveSuggestions be called. Default is 500. includeLabels boolean no Specifies if term labels should be loaded from the store. Interface IPickerTerms Property Type Required Description key string yes The ID of the term name string yes The name of the term path string yes The path of the term termSet string yes The Id of the parent term set of the term termSetName string no The Name of the parent term set of the term Differences between PropertyFieldEnterpriseTermPicker and PropertyFieldTermPicker \u00b6 PropertyFieldEnterpriseTermPicker is implemented to be used for \"enterprise\" Term Stores with large amount of groups, terms sets, and terms. It loads term sets and terms on demand - only at the moment when specified group or term set has been expanded in the Term Store Tree. To implement on-demand loading PropertyFieldEnterpriseTermPicker uses @pnp/sp-taxonomy module from @pnp/pnpjs library. It increases the size of a bundle when the control is used. Additionaly, PropertyFieldEnterpriseTermPicker allows to request labels for the terms in the picker. PropertyFieldTermPicker loads all the groups and term sets from the term service during the initial request. This approach fits most of the scenarios with small and medium number of objects in a term store. Besides that, PropertyFieldTermPicker does not use any additional libraries or modules to retrieve data from the taxonomy service which makes it much more lightweight option in comparison with PropertyFieldEnterpriseTermPicker . See PropertyFieldTermPicker for implementation details. We recommend to use PropertyFieldTermPicker control if you don't need on-demand loading or term labels .","title":"PropertyFieldEnterpriseTermPicker"},{"location":"controls/PropertyFieldEnterpriseTermPicker/#propertyfieldenterprisetermpicker-control","text":"This control generates a term picker that can be used in the property pane of your SharePoint Framework web parts. Disclaimer : This control makes use of the @pnp/sp-taxonomy module to retrieve the managed metadata information. It leads to increase of the bundle/package size if the control is being used. Use the control for \"enterprise\" scenarios (large term stores with lots of objects) or if you need to request labels for terms. Empty term picker Selecting terms Selected terms in the panel Empty term picker Term picker: Auto Complete Limit the term set to a specific group or termset","title":"PropertyFieldEnterpriseTermPicker control"},{"location":"controls/PropertyFieldEnterpriseTermPicker/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldEnterpriseTermPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldEnterpriseTermPicker' ; Create a new property for your web part, for example: import { IPickerTerms } from \"@pnp/spfx-property-controls/lib/PropertyFieldEnterpriseTermPicker\" ; export interface IPropertyControlsTestWebPartProps { terms : IPickerTerms ; } Add the custom property control to the groupFields of the web part property pane configuration: 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 })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldEnterpriseTermPicker/#implementation","text":"The PropertyFieldEnterpriseTermPicker control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. panelTitle string yes TermSet Picker Panel title. disabled boolean no Specify if the control needs to be disabled. context BaseComponentContext yes Context of the current web part. initialValues IPickerTerms no Defines the selected by default term sets. allowMultipleSelections boolean no Defines if the user can select only one or many term sets. Default value is false. excludeSystemGroup boolean no Indicator to define if the system Groups are exclude. Default is false. limitByGroupNameOrID string no Limit the term sets that can be used by the group name or ID. limitByTermsetNameOrID string no Limit the terms that can be picked by the Term Set name or ID. hideTermStoreName boolean no Specifies if you want to show or hide the term store name from the panel. isTermSetSelectable boolean no Specify if the term set itself is selectable in the tree view. disabledTermIds string[] no Specify which terms should be disabled in the term set so that they cannot be selected. onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. properties any yes Parent web part properties, this object is use to update the property value. key string yes An unique key that indicates the identity of this control. onGetErrorMessage function no The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. deferredValidationTime number no Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. resolveDelay number no The delay time in ms before resolving suggestions, which is kicked off when input has been changed. e.g. if a second input change happens within the resolveDelay time, the timer will start over. Only until after the timer completes will onResolveSuggestions be called. Default is 500. includeLabels boolean no Specifies if term labels should be loaded from the store. Interface IPickerTerms Property Type Required Description key string yes The ID of the term name string yes The name of the term path string yes The path of the term termSet string yes The Id of the parent term set of the term termSetName string no The Name of the parent term set of the term","title":"Implementation"},{"location":"controls/PropertyFieldEnterpriseTermPicker/#differences-between-propertyfieldenterprisetermpicker-and-propertyfieldtermpicker","text":"PropertyFieldEnterpriseTermPicker is implemented to be used for \"enterprise\" Term Stores with large amount of groups, terms sets, and terms. It loads term sets and terms on demand - only at the moment when specified group or term set has been expanded in the Term Store Tree. To implement on-demand loading PropertyFieldEnterpriseTermPicker uses @pnp/sp-taxonomy module from @pnp/pnpjs library. It increases the size of a bundle when the control is used. Additionaly, PropertyFieldEnterpriseTermPicker allows to request labels for the terms in the picker. PropertyFieldTermPicker loads all the groups and term sets from the term service during the initial request. This approach fits most of the scenarios with small and medium number of objects in a term store. Besides that, PropertyFieldTermPicker does not use any additional libraries or modules to retrieve data from the taxonomy service which makes it much more lightweight option in comparison with PropertyFieldEnterpriseTermPicker . See PropertyFieldTermPicker for implementation details. We recommend to use PropertyFieldTermPicker control if you don't need on-demand loading or term labels .","title":"Differences between PropertyFieldEnterpriseTermPicker and PropertyFieldTermPicker"},{"location":"controls/PropertyFieldFilePicker/","text":"PropertyFieldFilePicker control \u00b6 File picker control allows to browse and select a file from various places via the property pane. Currently supported locations Recent files - tab allows to select a file from recently modified files based on the search results. Web search - tab uses Bing cognitive services to look for a file. (Only images) OneDrive - tab allows to select a file from the user's One Drive. Site document libraries - tab allows to select a file from the existing site document libraries. Upload - tab allows to upload a file from local drive. From a link - tab allows to paste a link to the document. Overview \u00b6 The control supports all types of file, however it also allows to specify list of extensions for the files that are going to be looked displayed. Currently, only single file selection is supported. Different display types \u00b6 File picker support 3 types of views : List, Compact list and Tiles. In case Tiles view is selected, the control shows the thumbnail of the file. Breadcrumb support \u00b6 The control displays breadcrumb navigation that allows to easily switch folders or document libraries. Paged data load \u00b6 File picker doesn't load all the files that exist in the folder. Instead, it allows to specify how many results are loaded in a batch, and executes paged requests when new data is required. PropertyFieldFilePicker example usage How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your webpart: import { PropertyFieldFilePicker , IPropertyFieldFilePickerProps , IFilePickerResult } from \"@pnp/spfx-property-controls/lib/PropertyFieldFilePicker\" ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { filePickerResult : IFilePickerResult ; } Add the file picker property control to the groupFields of the web part property pane configuration: 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\" , }) Implementation \u00b6 The PropertyFieldFilePicker control can be configured with the following properties: Property Type Required Description properties any yes Parent web part properties, this object is used to update the property value. key string yes A unique key that indicates the identity of this control. context BaseComponentContext yes Current webpart context. onPropertyChange function yes Defines a onPropertyChange function to raise when the data gets changed. label string no Specifies the text describing the file picker. buttonLabel string no Specifies the label of the file picker button. buttonIcon string no In case it is provided the file picker will be rendered as an action button. onSave (filePickerResult: IFilePickerResult) => void yes Handler when the file has been selected and picker has been closed. onChange (filePickerResult: IFilePickerResult) => void no Handler when the file selection has been changed. onCancel () => void no Handler when the file picker panel has been closed without selection of a file. accepts string[] no Array of strings containing allowed files extensions. E.g. [\".gif\", \".jpg\", \".jpeg\", \".bmp\", \".dib\", \".tif\", \".tiff\", \".ico\", \".png\", \".jxr\", \".svg\"] required boolean no Sets the label to inform that the value is required. bingAPIKey string no Used to execute WebSearch. If not provided SearchTab will not be available. disabled boolean no Specifies if the picker button is disabled itemsCountQueryLimit number no Number of items to obtain when executing REST queries. Default 100. hideRecentTab boolean no Specifies if RecentTab should be hidden. hideWebSearchTab boolean no Specifies if WebSearchTab should be hidden. hideStockImages boolean no Specifies if StockImagesTab should be hidden. hideOrganisationalAssetTab boolean no Specifies if OrganisationalAssetTab should be hidden. hideOneDriveTab boolean no Specifies if OneDriveTab should be hidden. hideSiteFilesTab boolean no Specifies if SiteFilesTab should be hidden. hideLocalUploadTab boolean no Specifies if LocalUploadTab should be hidden. hideLinkUploadTab boolean no Specifies if LinkUploadTab should be hidden. storeLastActiveTab boolean no Specifies if last active tab will be stored after the Upload panel has been closed. Note: the value of selected tab is stored in the queryString hash. Default true defaultSelectedTab FilePickerTabType no Specify a tab to be selected by default. If not specified, it will default to \"RecentTab\". allowExternalLinks boolean no Specifies if external links should be allowed. checkIfFileExists boolean no When using file links, this property allows the user to choose if the control should check if the link point to a file that exists or not. includePageLibraries boolean no Specifies if site pages should be displayed. interface IFilePickerResult The value returned from the selected file object. Value Type Description fileName string File name of the result with the extension. fileNameWithoutExtension string File name of the result without the extension. fileAbsoluteUrl string Absolute URL of the file. Null in case of file upload. downloadFileContent () => Promise Function allows to download file content. Returns File object.","title":"PropertyFieldFilePicker"},{"location":"controls/PropertyFieldFilePicker/#propertyfieldfilepicker-control","text":"File picker control allows to browse and select a file from various places via the property pane. Currently supported locations Recent files - tab allows to select a file from recently modified files based on the search results. Web search - tab uses Bing cognitive services to look for a file. (Only images) OneDrive - tab allows to select a file from the user's One Drive. Site document libraries - tab allows to select a file from the existing site document libraries. Upload - tab allows to upload a file from local drive. From a link - tab allows to paste a link to the document.","title":"PropertyFieldFilePicker control"},{"location":"controls/PropertyFieldFilePicker/#overview","text":"The control supports all types of file, however it also allows to specify list of extensions for the files that are going to be looked displayed. Currently, only single file selection is supported.","title":"Overview"},{"location":"controls/PropertyFieldFilePicker/#different-display-types","text":"File picker support 3 types of views : List, Compact list and Tiles. In case Tiles view is selected, the control shows the thumbnail of the file.","title":"Different display types"},{"location":"controls/PropertyFieldFilePicker/#breadcrumb-support","text":"The control displays breadcrumb navigation that allows to easily switch folders or document libraries.","title":"Breadcrumb support"},{"location":"controls/PropertyFieldFilePicker/#paged-data-load","text":"File picker doesn't load all the files that exist in the folder. Instead, it allows to specify how many results are loaded in a batch, and executes paged requests when new data is required. PropertyFieldFilePicker example usage","title":"Paged data load"},{"location":"controls/PropertyFieldFilePicker/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your webpart: import { PropertyFieldFilePicker , IPropertyFieldFilePickerProps , IFilePickerResult } from \"@pnp/spfx-property-controls/lib/PropertyFieldFilePicker\" ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { filePickerResult : IFilePickerResult ; } Add the file picker property control to the groupFields of the web part property pane configuration: 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\" , })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldFilePicker/#implementation","text":"The PropertyFieldFilePicker control can be configured with the following properties: Property Type Required Description properties any yes Parent web part properties, this object is used to update the property value. key string yes A unique key that indicates the identity of this control. context BaseComponentContext yes Current webpart context. onPropertyChange function yes Defines a onPropertyChange function to raise when the data gets changed. label string no Specifies the text describing the file picker. buttonLabel string no Specifies the label of the file picker button. buttonIcon string no In case it is provided the file picker will be rendered as an action button. onSave (filePickerResult: IFilePickerResult) => void yes Handler when the file has been selected and picker has been closed. onChange (filePickerResult: IFilePickerResult) => void no Handler when the file selection has been changed. onCancel () => void no Handler when the file picker panel has been closed without selection of a file. accepts string[] no Array of strings containing allowed files extensions. E.g. [\".gif\", \".jpg\", \".jpeg\", \".bmp\", \".dib\", \".tif\", \".tiff\", \".ico\", \".png\", \".jxr\", \".svg\"] required boolean no Sets the label to inform that the value is required. bingAPIKey string no Used to execute WebSearch. If not provided SearchTab will not be available. disabled boolean no Specifies if the picker button is disabled itemsCountQueryLimit number no Number of items to obtain when executing REST queries. Default 100. hideRecentTab boolean no Specifies if RecentTab should be hidden. hideWebSearchTab boolean no Specifies if WebSearchTab should be hidden. hideStockImages boolean no Specifies if StockImagesTab should be hidden. hideOrganisationalAssetTab boolean no Specifies if OrganisationalAssetTab should be hidden. hideOneDriveTab boolean no Specifies if OneDriveTab should be hidden. hideSiteFilesTab boolean no Specifies if SiteFilesTab should be hidden. hideLocalUploadTab boolean no Specifies if LocalUploadTab should be hidden. hideLinkUploadTab boolean no Specifies if LinkUploadTab should be hidden. storeLastActiveTab boolean no Specifies if last active tab will be stored after the Upload panel has been closed. Note: the value of selected tab is stored in the queryString hash. Default true defaultSelectedTab FilePickerTabType no Specify a tab to be selected by default. If not specified, it will default to \"RecentTab\". allowExternalLinks boolean no Specifies if external links should be allowed. checkIfFileExists boolean no When using file links, this property allows the user to choose if the control should check if the link point to a file that exists or not. includePageLibraries boolean no Specifies if site pages should be displayed. interface IFilePickerResult The value returned from the selected file object. Value Type Description fileName string File name of the result with the extension. fileNameWithoutExtension string File name of the result without the extension. fileAbsoluteUrl string Absolute URL of the file. Null in case of file upload. downloadFileContent () => Promise Function allows to download file content. Returns File object.","title":"Implementation"},{"location":"controls/PropertyFieldGrid/","text":"PropertyFieldGrid control \u00b6 This control generates a Grid Control . PropertyFieldGrid example usage How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldGrid , IItem } from '@pnp/spfx-property-controls/lib/PropertyFieldGrid' ; - define the items to show in the grid : 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\" } ]; - Add the custom property Grid to the `groupFields` of the web part property pane configuration : 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 ); } ) Implementation \u00b6 The PropertyFieldGrid control can be configured with the following properties: Property Type Required Description key string yes An unique key that indicates the identity of this control. styles IButtonStyles no styles object (root container) classname string no css ClassName (root container) isVisible boolean no Indicate if grid is visible label string no label of Grid defaultSelectedItems (items:IItem[]) =>void no defined default Item selected maxHeigth number no max height of the container , default 400px onSelected item[] no selected Items when are selected items IItem[] yes Items to show multiSelect boolean no Enable multiSelect , default single column1Label string no Label for header of first grid column column2Label string no Label for header of second grid column","title":"PropertyFieldGrid"},{"location":"controls/PropertyFieldGrid/#propertyfieldgrid-control","text":"This control generates a Grid Control . PropertyFieldGrid example usage","title":"PropertyFieldGrid control"},{"location":"controls/PropertyFieldGrid/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldGrid , IItem } from '@pnp/spfx-property-controls/lib/PropertyFieldGrid' ; - define the items to show in the grid : 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\" } ]; - Add the custom property Grid to the `groupFields` of the web part property pane configuration : 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 ); } )","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldGrid/#implementation","text":"The PropertyFieldGrid control can be configured with the following properties: Property Type Required Description key string yes An unique key that indicates the identity of this control. styles IButtonStyles no styles object (root container) classname string no css ClassName (root container) isVisible boolean no Indicate if grid is visible label string no label of Grid defaultSelectedItems (items:IItem[]) =>void no defined default Item selected maxHeigth number no max height of the container , default 400px onSelected item[] no selected Items when are selected items IItem[] yes Items to show multiSelect boolean no Enable multiSelect , default single column1Label string no Label for header of first grid column column2Label string no Label for header of second grid column","title":"Implementation"},{"location":"controls/PropertyFieldGuid/","text":"PropertyFieldGuid control \u00b6 This control generates an input field for GUID. Incorrect GUID entered will result into an invalid input. PropertyFieldGuid example usage How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldGuid } from '@pnp/spfx-property-controls/lib/PropertyFieldGuid' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { guid : string ; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldGuid ( 'guid' , { key : 'guid' , label : \"GUID\" , value : this.properties.guid }) You can also implement the property your own error message with the errorMessage property with the following syntax: PropertyFieldGuid ( 'guid' , { key : 'guid' , label : \"GUID\" , value : this.properties.guid , errorMessage : \"Please enter a correct GUID\" }) Implementation \u00b6 The PropertyFieldGuid control can be configured with the following properties: Property Type Required Description key string yes An unique key that indicates the identity of this control. label string yes Property field label displayed on top. value string no Value to be displayed in the Guid field. errorMessage string no If set, this will be displayed as an error message.","title":"PropertyFieldGuidPicker"},{"location":"controls/PropertyFieldGuid/#propertyfieldguid-control","text":"This control generates an input field for GUID. Incorrect GUID entered will result into an invalid input. PropertyFieldGuid example usage","title":"PropertyFieldGuid control"},{"location":"controls/PropertyFieldGuid/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldGuid } from '@pnp/spfx-property-controls/lib/PropertyFieldGuid' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { guid : string ; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldGuid ( 'guid' , { key : 'guid' , label : \"GUID\" , value : this.properties.guid }) You can also implement the property your own error message with the errorMessage property with the following syntax: PropertyFieldGuid ( 'guid' , { key : 'guid' , label : \"GUID\" , value : this.properties.guid , errorMessage : \"Please enter a correct GUID\" })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldGuid/#implementation","text":"The PropertyFieldGuid control can be configured with the following properties: Property Type Required Description key string yes An unique key that indicates the identity of this control. label string yes Property field label displayed on top. value string no Value to be displayed in the Guid field. errorMessage string no If set, this will be displayed as an error message.","title":"Implementation"},{"location":"controls/PropertyFieldIconPicker/","text":"IconPicker control \u00b6 Property pane icon picker control that allows to search and select an icon from office-ui-fabric-react icons. Overview \u00b6 The control allows selecting an icon from the list of icons available in the office-ui-fabric-react library. Icon list is a static copy of available icons. Currently, only one icon selection is supported. Displayed in the panel \u00b6 Icon picker always opens a new panel where you can pick an icon. The panel displays all the icons and maintains readability. Picker does not displays selected icon outside the panel. How to use this control \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out the getting started page for more information about installing the dependency. Import the following module to your component: import { PropertyFieldIconPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldIconPicker' ; Use the PropertyFieldIconPicker control in your code as follows: 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\" }), Implementation \u00b6 The PropertyFieldIconPicker component can be configured with the following properties: Property Type Required Description buttonLabel string no Specifies the label of the icon picker button. onSave (iconName: string) => void yes Handler when the icon has been selected and picker has been closed. onChanged (iconName: string) => void no Handler when the icon selection has been changed. disabled boolean no Specifies if the picker button is disabled buttonClassName boolean no If provided, additional class name will be added to the picker button panelClassName boolean no If provided, additional class name will be added to the picker panel currentIcon string no Specifies default selected icon renderOption dialog , panel no Specifies how to render list of Icons, Values : 'Panel' or 'Dialog' default value 'Panel' onPropertyChange function yes Defines a onPropertyChange function to raise when the teams get changed. properties any yes Parent web part properties, this object is used to update the property value. key string yes An unique key that indicates the identity of this control. label string no A label to describe the icon picker control.","title":"PropertyFieldIconPicker"},{"location":"controls/PropertyFieldIconPicker/#iconpicker-control","text":"Property pane icon picker control that allows to search and select an icon from office-ui-fabric-react icons.","title":"IconPicker control"},{"location":"controls/PropertyFieldIconPicker/#overview","text":"The control allows selecting an icon from the list of icons available in the office-ui-fabric-react library. Icon list is a static copy of available icons. Currently, only one icon selection is supported.","title":"Overview"},{"location":"controls/PropertyFieldIconPicker/#displayed-in-the-panel","text":"Icon picker always opens a new panel where you can pick an icon. The panel displays all the icons and maintains readability. Picker does not displays selected icon outside the panel.","title":"Displayed in the panel"},{"location":"controls/PropertyFieldIconPicker/#how-to-use-this-control","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out the getting started page for more information about installing the dependency. Import the following module to your component: import { PropertyFieldIconPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldIconPicker' ; Use the PropertyFieldIconPicker control in your code as follows: 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\" }),","title":"How to use this control"},{"location":"controls/PropertyFieldIconPicker/#implementation","text":"The PropertyFieldIconPicker component can be configured with the following properties: Property Type Required Description buttonLabel string no Specifies the label of the icon picker button. onSave (iconName: string) => void yes Handler when the icon has been selected and picker has been closed. onChanged (iconName: string) => void no Handler when the icon selection has been changed. disabled boolean no Specifies if the picker button is disabled buttonClassName boolean no If provided, additional class name will be added to the picker button panelClassName boolean no If provided, additional class name will be added to the picker panel currentIcon string no Specifies default selected icon renderOption dialog , panel no Specifies how to render list of Icons, Values : 'Panel' or 'Dialog' default value 'Panel' onPropertyChange function yes Defines a onPropertyChange function to raise when the teams get changed. properties any yes Parent web part properties, this object is used to update the property value. key string yes An unique key that indicates the identity of this control. label string no A label to describe the icon picker control.","title":"Implementation"},{"location":"controls/PropertyFieldLabelWithCallout/","text":"PropertyFieldLabelWithCallout control \u00b6 This control generates a label control with a callout. PropertyFieldLabelWithCallout rendering PropertyFieldLabelWithCallout callout opened How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout' ; import { PropertyFieldLabelWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldLabelWithCallout' ; Add the custom property control to the groupFields of the web part property pane configuration: 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' }) Implementation \u00b6 The PropertyFieldLabelWithCallout control uses the same implementation as the default PropertyPaneLabel and has the following additional properties: Property Type Required Description calloutContent React.ReactNode no Callout content - any HTML calloutWidth number no Custom width for callout including borders. If value is 0, no width is applied. calloutTrigger CalloutTriggers no Event to show the callout gapSpace number no The gap between the callout and the target Enum CalloutTriggers Name Description Click Shows the callout when you hover over the icon Hover Shows the callout when you click on the icon","title":"PropertyFieldLabelWithCallout"},{"location":"controls/PropertyFieldLabelWithCallout/#propertyfieldlabelwithcallout-control","text":"This control generates a label control with a callout. PropertyFieldLabelWithCallout rendering PropertyFieldLabelWithCallout callout opened","title":"PropertyFieldLabelWithCallout control"},{"location":"controls/PropertyFieldLabelWithCallout/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout' ; import { PropertyFieldLabelWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldLabelWithCallout' ; Add the custom property control to the groupFields of the web part property pane configuration: 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' })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldLabelWithCallout/#implementation","text":"The PropertyFieldLabelWithCallout control uses the same implementation as the default PropertyPaneLabel and has the following additional properties: Property Type Required Description calloutContent React.ReactNode no Callout content - any HTML calloutWidth number no Custom width for callout including borders. If value is 0, no width is applied. calloutTrigger CalloutTriggers no Event to show the callout gapSpace number no The gap between the callout and the target Enum CalloutTriggers Name Description Click Shows the callout when you hover over the icon Hover Shows the callout when you click on the icon","title":"Implementation"},{"location":"controls/PropertyFieldLinkWithCallout/","text":"PropertyFieldLinkWithCallout control \u00b6 This control generates a link control with a callout. PropertyFieldLinkWithCallout rendering PropertyFieldLinkWithCallout callout opened How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout' ; import { PropertyFieldLinkWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldLinkWithCallout' ; Add the custom property control to the groupFields of the web part property pane configuration: 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' }) Implementation \u00b6 The PropertyFieldLinkWithCallout control uses the same implementation as the default PropertyPaneLink and has the following additional properties: Property Type Required Description calloutContent React.ReactNode no Callout content - any HTML calloutWidth number no Custom width for callout including borders. If value is 0, no width is applied. calloutTrigger CalloutTriggers no Event to show the callout gapSpace number no The gap between the callout and the target Enum CalloutTriggers Name Description Click Shows the callout when you hover over the icon Hover Shows the callout when you click on the icon","title":"PropertyFieldLinkWithCallout"},{"location":"controls/PropertyFieldLinkWithCallout/#propertyfieldlinkwithcallout-control","text":"This control generates a link control with a callout. PropertyFieldLinkWithCallout rendering PropertyFieldLinkWithCallout callout opened","title":"PropertyFieldLinkWithCallout control"},{"location":"controls/PropertyFieldLinkWithCallout/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout' ; import { PropertyFieldLinkWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldLinkWithCallout' ; Add the custom property control to the groupFields of the web part property pane configuration: 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' })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldLinkWithCallout/#implementation","text":"The PropertyFieldLinkWithCallout control uses the same implementation as the default PropertyPaneLink and has the following additional properties: Property Type Required Description calloutContent React.ReactNode no Callout content - any HTML calloutWidth number no Custom width for callout including borders. If value is 0, no width is applied. calloutTrigger CalloutTriggers no Event to show the callout gapSpace number no The gap between the callout and the target Enum CalloutTriggers Name Description Click Shows the callout when you hover over the icon Hover Shows the callout when you click on the icon","title":"Implementation"},{"location":"controls/PropertyFieldListPicker/","text":"PropertyFieldListPicker control \u00b6 This control generates a list picker field that can be used in the property pane of your SharePoint Framework web parts. The control can be configured as a single or multi-selection list picker: Single list picker Multi list picker How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldListPicker , PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { lists : string | string []; // Stores the list ID(s) } Add the custom property control to the groupFields of the web part property pane configuration: 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' }) Implementation \u00b6 The PropertyFieldListPicker control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. disabled boolean no Specify if the control needs to be disabled. context BaseComponentContext yes Context of the current web part. selectedList string | string[] | IPropertyFieldList | IPropertyFieldList[] no Initial selected list set of the control. baseTemplate number no BaseTemplate ID of the lists or libraries you want to return. includeHidden boolean no Specify if you want to include hidden lists in the list picker. By default this is set to true . orderBy PropertyFieldListPickerOrderBy no Specify the property on which you want to order the retrieve set of lists. multiSelect boolean no Specify if you want to have a single or multi-list picker. By default this is set to false (single list picker). showSelectAll boolean no Specify if you want the Select All checkbox. By default this is set to false (mult-list picker only). selectAllInList boolean no Specify where to show the Select All checkbox. When false (default), checkbox is shown before the label, when true it is shown with the lists (mult-list picker only). selectAllInListLabel string no The label to use for the in list select all checkbox (mult-list picker only). webAbsoluteUrl string no Absolute Web Url of target site (user requires permissions) onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. properties any yes Parent web part properties, this object is use to update the property value. key string yes An unique key that indicates the identity of this control. onGetErrorMessage function no The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. deferredValidationTime number no Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. listsToExclude string[] no Defines list titles which should be excluded from the list picker control (list title or ID). filter string no Filter list from OData query (takes precedence over Hidden and BaseTemplate Filters). onListsRetrieved (lists: ISPList[]) => PromiseLike | ISPList[] no Callback that is called before the dropdown is populated. includeListTitleAndUrl boolean no Specifies if the picker returns list id, title and url as an object instead on id. contentTypeId string no Specifies a content type ID , or a portion of one. If specified, all the lists presented in the control will have at least one content type beginning with the specified content type id. Interface IPropertyFieldList Property Type Required Description id string yes The ID of the list title string no List's title url string no List's server relative url Enum PropertyFieldListPickerOrderBy Name Description Id Sort by list / library ID Title Sort by list / library title","title":"PropertyFieldListPicker"},{"location":"controls/PropertyFieldListPicker/#propertyfieldlistpicker-control","text":"This control generates a list picker field that can be used in the property pane of your SharePoint Framework web parts. The control can be configured as a single or multi-selection list picker: Single list picker Multi list picker","title":"PropertyFieldListPicker control"},{"location":"controls/PropertyFieldListPicker/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldListPicker , PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { lists : string | string []; // Stores the list ID(s) } Add the custom property control to the groupFields of the web part property pane configuration: 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' })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldListPicker/#implementation","text":"The PropertyFieldListPicker control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. disabled boolean no Specify if the control needs to be disabled. context BaseComponentContext yes Context of the current web part. selectedList string | string[] | IPropertyFieldList | IPropertyFieldList[] no Initial selected list set of the control. baseTemplate number no BaseTemplate ID of the lists or libraries you want to return. includeHidden boolean no Specify if you want to include hidden lists in the list picker. By default this is set to true . orderBy PropertyFieldListPickerOrderBy no Specify the property on which you want to order the retrieve set of lists. multiSelect boolean no Specify if you want to have a single or multi-list picker. By default this is set to false (single list picker). showSelectAll boolean no Specify if you want the Select All checkbox. By default this is set to false (mult-list picker only). selectAllInList boolean no Specify where to show the Select All checkbox. When false (default), checkbox is shown before the label, when true it is shown with the lists (mult-list picker only). selectAllInListLabel string no The label to use for the in list select all checkbox (mult-list picker only). webAbsoluteUrl string no Absolute Web Url of target site (user requires permissions) onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. properties any yes Parent web part properties, this object is use to update the property value. key string yes An unique key that indicates the identity of this control. onGetErrorMessage function no The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. deferredValidationTime number no Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. listsToExclude string[] no Defines list titles which should be excluded from the list picker control (list title or ID). filter string no Filter list from OData query (takes precedence over Hidden and BaseTemplate Filters). onListsRetrieved (lists: ISPList[]) => PromiseLike | ISPList[] no Callback that is called before the dropdown is populated. includeListTitleAndUrl boolean no Specifies if the picker returns list id, title and url as an object instead on id. contentTypeId string no Specifies a content type ID , or a portion of one. If specified, all the lists presented in the control will have at least one content type beginning with the specified content type id. Interface IPropertyFieldList Property Type Required Description id string yes The ID of the list title string no List's title url string no List's server relative url Enum PropertyFieldListPickerOrderBy Name Description Id Sort by list / library ID Title Sort by list / library title","title":"Implementation"},{"location":"controls/PropertyFieldMessage/","text":"PropertyFieldMessage control \u00b6 This control generates a Message Bar that will show messages . PropertyFieldMessage example usage How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldMessage } from '@pnp/spfx-property-controls/lib/PropertyFieldMessage' ; import { MessageBarType } from 'office-ui-fabric-react/lib/MessageBar' ; Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldMessage ( \"\" , { key : \"MessageKey\" , text : \"Something went wrong... try later.\" , messageType : MessageBarType.error , isVisible : true }) Implementation \u00b6 The PropertyFieldMessage control can be configured with the following properties: Property Type Required Description key string yes An unique key that indicates the identity of this control. text string yes Message Text messageType MessageBarType yes type of message multiline boolean no Indicate if message is multiline classname string no css ClassName isVisible boolean yes Indicate if message is visible","title":"PropertyFieldMessage"},{"location":"controls/PropertyFieldMessage/#propertyfieldmessage-control","text":"This control generates a Message Bar that will show messages . PropertyFieldMessage example usage","title":"PropertyFieldMessage control"},{"location":"controls/PropertyFieldMessage/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldMessage } from '@pnp/spfx-property-controls/lib/PropertyFieldMessage' ; import { MessageBarType } from 'office-ui-fabric-react/lib/MessageBar' ; Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldMessage ( \"\" , { key : \"MessageKey\" , text : \"Something went wrong... try later.\" , messageType : MessageBarType.error , isVisible : true })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldMessage/#implementation","text":"The PropertyFieldMessage control can be configured with the following properties: Property Type Required Description key string yes An unique key that indicates the identity of this control. text string yes Message Text messageType MessageBarType yes type of message multiline boolean no Indicate if message is multiline classname string no css ClassName isVisible boolean yes Indicate if message is visible","title":"Implementation"},{"location":"controls/PropertyFieldMonacoEditor/","text":"PropertyFieldMonacoEditor control \u00b6 This control implement Microsoft Monaco Editor. PropertyFieldMonacoEditor example usage How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldMonacoEditor } from '@pnp/spfx-property-controls/lib/PropertyFieldMonacoEditor' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { monacoEditorValue : string ; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldMonacoEditor ( 'monacoEditor' , { key : 'monacoEditor' , value : this.properties.monacoEditorValue , showMiniMap : true , onChange : this.monacoChange , language : \"json\" , showLineNumbers : true , }), Implementation \u00b6 The PropertyFieldMonacoEditor control can be configured with the following properties: Property Type Required Description key string yes An unique key that indicates the identity of this control. value number yes Value field. theme string no 'vs-dark' readOnly boolean no editor is read only showLineNumbers boolean no Show line number - default no showMiniMap boolean no Show Mini Map - default yes onChange (newValue:string) => void; no If set, this method is used to get the the input value when it changed language string yes language, please see https://microsoft.github.io/monaco-editor/index.html for all supported languages jsonDiagnosticsOptions monaco.languages.json.DiagnosticsOptions no see https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.json.DiagnosticsOptions.html jscriptDiagnosticsOptions monaco.languages.typescript.DiagnosticsOptions no see https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.typescript.DiagnosticsOptions.html panelWidth number no Panel Width default 800px.","title":"PropertyFieldMonacoEditor"},{"location":"controls/PropertyFieldMonacoEditor/#propertyfieldmonacoeditor-control","text":"This control implement Microsoft Monaco Editor. PropertyFieldMonacoEditor example usage","title":"PropertyFieldMonacoEditor control"},{"location":"controls/PropertyFieldMonacoEditor/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldMonacoEditor } from '@pnp/spfx-property-controls/lib/PropertyFieldMonacoEditor' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { monacoEditorValue : string ; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldMonacoEditor ( 'monacoEditor' , { key : 'monacoEditor' , value : this.properties.monacoEditorValue , showMiniMap : true , onChange : this.monacoChange , language : \"json\" , showLineNumbers : true , }),","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldMonacoEditor/#implementation","text":"The PropertyFieldMonacoEditor control can be configured with the following properties: Property Type Required Description key string yes An unique key that indicates the identity of this control. value number yes Value field. theme string no 'vs-dark' readOnly boolean no editor is read only showLineNumbers boolean no Show line number - default no showMiniMap boolean no Show Mini Map - default yes onChange (newValue:string) => void; no If set, this method is used to get the the input value when it changed language string yes language, please see https://microsoft.github.io/monaco-editor/index.html for all supported languages jsonDiagnosticsOptions monaco.languages.json.DiagnosticsOptions no see https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.json.DiagnosticsOptions.html jscriptDiagnosticsOptions monaco.languages.typescript.DiagnosticsOptions no see https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.typescript.DiagnosticsOptions.html panelWidth number no Panel Width default 800px.","title":"Implementation"},{"location":"controls/PropertyFieldMultiSelect/","text":"PropertyFieldMultiSelect control \u00b6 This control generates a dropdown with the possibility of selecting multiple values. Multi-select field rendering How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldMultiSelect } from '@pnp/spfx-property-controls/lib/PropertyFieldMultiSelect' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { multiSelect : string []; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldMultiSelect ( 'multiSelect' , { key : 'multiSelect' , label : \"Multi select field\" , options : [ { key : \"EN\" , text : \"EN\" }, { key : \"FR\" , text : \"FR\" }, { key : \"NL\" , text : \"NL\" } ], selectedKeys : this.properties.multiSelect }) Implementation \u00b6 The PropertyFieldMultiSelect control uses the same implementation as the default PropertyPaneDropdown control and has the following additional properties: Property Type Required Description selectedKeys string[] OR number[] no Specifies the selected keys. Important : Do not make use of the selectedKey property. This property is inherited from the PropertyPaneDropdown control.","title":"PropertyFieldMultiSelect"},{"location":"controls/PropertyFieldMultiSelect/#propertyfieldmultiselect-control","text":"This control generates a dropdown with the possibility of selecting multiple values. Multi-select field rendering","title":"PropertyFieldMultiSelect control"},{"location":"controls/PropertyFieldMultiSelect/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldMultiSelect } from '@pnp/spfx-property-controls/lib/PropertyFieldMultiSelect' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { multiSelect : string []; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldMultiSelect ( 'multiSelect' , { key : 'multiSelect' , label : \"Multi select field\" , options : [ { key : \"EN\" , text : \"EN\" }, { key : \"FR\" , text : \"FR\" }, { key : \"NL\" , text : \"NL\" } ], selectedKeys : this.properties.multiSelect })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldMultiSelect/#implementation","text":"The PropertyFieldMultiSelect control uses the same implementation as the default PropertyPaneDropdown control and has the following additional properties: Property Type Required Description selectedKeys string[] OR number[] no Specifies the selected keys. Important : Do not make use of the selectedKey property. This property is inherited from the PropertyPaneDropdown control.","title":"Implementation"},{"location":"controls/PropertyFieldNumber/","text":"PropertyFieldNumber control \u00b6 This control generates an input field for numbers. Text is not allowed as this will result into an invalid input. PropertyFieldNumber example usage How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldNumber } from '@pnp/spfx-property-controls/lib/PropertyFieldNumber' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { numberValue : number ; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldNumber ( \"numberValue\" , { key : \"numberValue\" , label : \"Number value only\" , description : \"Number field description\" , value : this.properties.numberValue , maxValue : 10 , minValue : 1 , disabled : false }) You can also implement your own validation with the onGetErrorMessage property as follows: 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 '' ; } }) Implementation \u00b6 The PropertyFieldNumber control can be configured with the following properties: Property Type Required Description key string yes An unique key that indicates the identity of this control. label string yes Property field label displayed on top. description string no The number field input description. placeholder string no Placeholder text to be displayed in the number field. value number no Value to be displayed in the number field. maxValue number no Maximum number that can be inserted. minValue number no Minimum number that can be inserted. ariaLabel string no The aria label for the number field. disabled boolean no Specify if the control needs to be disabled. errorMessage string no If set, this will be displayed as an error message. onGetErrorMessage (value: number) => string no If set, this method is used to get the validation error message and determine whether the input value is valid or not. deferredValidationTime number no Number field will start to validate after users stop typing for deferredValidationTime milliseconds. precision number no Precision to round the value to. If the precision is not defined the value is not rounded.","title":"PropertyFieldNumber"},{"location":"controls/PropertyFieldNumber/#propertyfieldnumber-control","text":"This control generates an input field for numbers. Text is not allowed as this will result into an invalid input. PropertyFieldNumber example usage","title":"PropertyFieldNumber control"},{"location":"controls/PropertyFieldNumber/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldNumber } from '@pnp/spfx-property-controls/lib/PropertyFieldNumber' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { numberValue : number ; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldNumber ( \"numberValue\" , { key : \"numberValue\" , label : \"Number value only\" , description : \"Number field description\" , value : this.properties.numberValue , maxValue : 10 , minValue : 1 , disabled : false }) You can also implement your own validation with the onGetErrorMessage property as follows: 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 '' ; } })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldNumber/#implementation","text":"The PropertyFieldNumber control can be configured with the following properties: Property Type Required Description key string yes An unique key that indicates the identity of this control. label string yes Property field label displayed on top. description string no The number field input description. placeholder string no Placeholder text to be displayed in the number field. value number no Value to be displayed in the number field. maxValue number no Maximum number that can be inserted. minValue number no Minimum number that can be inserted. ariaLabel string no The aria label for the number field. disabled boolean no Specify if the control needs to be disabled. errorMessage string no If set, this will be displayed as an error message. onGetErrorMessage (value: number) => string no If set, this method is used to get the validation error message and determine whether the input value is valid or not. deferredValidationTime number no Number field will start to validate after users stop typing for deferredValidationTime milliseconds. precision number no Precision to round the value to. If the precision is not defined the value is not rounded.","title":"Implementation"},{"location":"controls/PropertyFieldOrder/","text":"PropertyFieldOrder control \u00b6 This control generates a list that can be easily reordered using drag and drop and/or arrow buttons. PropertyFieldOrder How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldOrder } from '@pnp/spfx-property-controls/lib/PropertyFieldOrder' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { orderedItems : Array < any > ; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldOrder ( \"orderedItems\" , { key : \"orderedItems\" , label : \"Ordered Items\" , items : this.properties.orderedItems , properties : this.properties , onPropertyChange : this.onPropertyPaneFieldChanged }) Item Rendering \u00b6 By default, items will render using the toString() method for each element in your items array. This works well for simple arrays of strings, numbers, etc. Object Property \u00b6 When working with an array of objects, you can specify the name of the property to use as the display value by specifying the textProperty property. For instance, for an array of objects like the following: [ {\"text\": \"Cat\", \"iconName\": \"Cat\"}, {\"text\": \"Pig\", \"iconName\": \"Savings\"}, {\"text\": \"Human\", \"iconName\": \"Running\"}, {\"text\": \"Robot\", \"iconName\": \"Robot\"}, {\"text\": \"Dog\", \"iconName\": \"FangBody\"} ] To prevent every item from showing as [object Object] , you can set the textProperty property to the name of the property you would like to use for display: PropertyFieldOrder ( \"orderedItems\" , { key : \"orderedItems\" , label : \"Ordered Items\" , items : this.properties.orderedItems , textProperty : \"text\" , properties : this.properties , onPropertyChange : this.onPropertyPaneFieldChanged }) Custom Rendering \u00b6 You can fully customize how items are rendered by providing the onRenderItem callback function and returning whatever JSX.Element you want. For example, you can define your function in a tsx file like this: import * as React from 'react' ; export const orderedItem = ( item : any , index : number ) : JSX . Element => { return ( < span > < i className = { \"ms-Icon ms-Icon--\" + item . iconName } style = {{ paddingRight : '4px' }} /> { item . text } < /span> ); }; You can then import this function into your webpart using the relative path to this file similar to the following: import { orderedItem } from './components/OrderedItem' ; Then you can simply reference it in your PropertyFieldOrder : PropertyFieldOrder ( \"orderedItems\" , { key : \"orderedItems\" , label : \"Ordered Items\" , items : this.properties.orderedItems , onRenderItem : orderedItem , properties : this.properties , onPropertyChange : this.onPropertyPaneFieldChanged }) Implementation \u00b6 The PropertyFieldOrder control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. items Array yes An array of values to reorder. textProperty string no The property to use for display, when undefined, the toString() method of the object is used (ignored when the onRenderItem function is specified) maxHeight number no The maximum height for the items in px (when not set, the control expands as necessary) disabled boolean no Specify if the control needs to be disabled. disableDragAndDrop boolean no When true, drag and drop reordering is disabled (defaults to false) removeArrows boolean no When true, arrow buttons are not displayed (defaults to false) moveUpIconName string no The name of the UI Fabric Font Icon to use for the move up button (defaults to ChevronUpSmall) moveDownIconName string no The name of the UI Fabric Font Icon to use for the move down button (defaults to ChevronDownSmall) onRenderItem function no Optional callback to provide custom rendering of the item (default is simple text based on either item or the property identified in the textProperty) properties any yes Parent web part properties, this object is use to update the property value. onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. key string yes An unique key that indicates the identity of this control.","title":"PropertyFieldOrder"},{"location":"controls/PropertyFieldOrder/#propertyfieldorder-control","text":"This control generates a list that can be easily reordered using drag and drop and/or arrow buttons. PropertyFieldOrder","title":"PropertyFieldOrder control"},{"location":"controls/PropertyFieldOrder/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldOrder } from '@pnp/spfx-property-controls/lib/PropertyFieldOrder' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { orderedItems : Array < any > ; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldOrder ( \"orderedItems\" , { key : \"orderedItems\" , label : \"Ordered Items\" , items : this.properties.orderedItems , properties : this.properties , onPropertyChange : this.onPropertyPaneFieldChanged })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldOrder/#item-rendering","text":"By default, items will render using the toString() method for each element in your items array. This works well for simple arrays of strings, numbers, etc.","title":"Item Rendering"},{"location":"controls/PropertyFieldOrder/#object-property","text":"When working with an array of objects, you can specify the name of the property to use as the display value by specifying the textProperty property. For instance, for an array of objects like the following: [ {\"text\": \"Cat\", \"iconName\": \"Cat\"}, {\"text\": \"Pig\", \"iconName\": \"Savings\"}, {\"text\": \"Human\", \"iconName\": \"Running\"}, {\"text\": \"Robot\", \"iconName\": \"Robot\"}, {\"text\": \"Dog\", \"iconName\": \"FangBody\"} ] To prevent every item from showing as [object Object] , you can set the textProperty property to the name of the property you would like to use for display: PropertyFieldOrder ( \"orderedItems\" , { key : \"orderedItems\" , label : \"Ordered Items\" , items : this.properties.orderedItems , textProperty : \"text\" , properties : this.properties , onPropertyChange : this.onPropertyPaneFieldChanged })","title":"Object Property"},{"location":"controls/PropertyFieldOrder/#custom-rendering","text":"You can fully customize how items are rendered by providing the onRenderItem callback function and returning whatever JSX.Element you want. For example, you can define your function in a tsx file like this: import * as React from 'react' ; export const orderedItem = ( item : any , index : number ) : JSX . Element => { return ( < span > < i className = { \"ms-Icon ms-Icon--\" + item . iconName } style = {{ paddingRight : '4px' }} /> { item . text } < /span> ); }; You can then import this function into your webpart using the relative path to this file similar to the following: import { orderedItem } from './components/OrderedItem' ; Then you can simply reference it in your PropertyFieldOrder : PropertyFieldOrder ( \"orderedItems\" , { key : \"orderedItems\" , label : \"Ordered Items\" , items : this.properties.orderedItems , onRenderItem : orderedItem , properties : this.properties , onPropertyChange : this.onPropertyPaneFieldChanged })","title":"Custom Rendering"},{"location":"controls/PropertyFieldOrder/#implementation","text":"The PropertyFieldOrder control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. items Array yes An array of values to reorder. textProperty string no The property to use for display, when undefined, the toString() method of the object is used (ignored when the onRenderItem function is specified) maxHeight number no The maximum height for the items in px (when not set, the control expands as necessary) disabled boolean no Specify if the control needs to be disabled. disableDragAndDrop boolean no When true, drag and drop reordering is disabled (defaults to false) removeArrows boolean no When true, arrow buttons are not displayed (defaults to false) moveUpIconName string no The name of the UI Fabric Font Icon to use for the move up button (defaults to ChevronUpSmall) moveDownIconName string no The name of the UI Fabric Font Icon to use for the move down button (defaults to ChevronDownSmall) onRenderItem function no Optional callback to provide custom rendering of the item (default is simple text based on either item or the property identified in the textProperty) properties any yes Parent web part properties, this object is use to update the property value. onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. key string yes An unique key that indicates the identity of this control.","title":"Implementation"},{"location":"controls/PropertyFieldPassword/","text":"PropertyFieldPassword control \u00b6 This control generates an input field for password. Text is not visible . PropertyFieldPassword example usage How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldPassword } from '@pnp/spfx-property-controls/lib/PropertyFieldPassword' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { password : string ; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldPassword ( \"password\" , { key : \"password\" , label : \"password\" , value : this.properties.password , onChanged : ( value : string ) => { console . log ( value ); } }) Implementation \u00b6 The PropertyFieldPassword control can be configured with the following properties: Property Type Required Description key string yes An unique key that indicates the identity of this control. label string no Property field label displayed on top. value string no Value to be displayed in the number field. onChanged (value: string) => void no If set, this method is used to get the the input value","title":"PropertyFieldPassword"},{"location":"controls/PropertyFieldPassword/#propertyfieldpassword-control","text":"This control generates an input field for password. Text is not visible . PropertyFieldPassword example usage","title":"PropertyFieldPassword control"},{"location":"controls/PropertyFieldPassword/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldPassword } from '@pnp/spfx-property-controls/lib/PropertyFieldPassword' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { password : string ; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyFieldPassword ( \"password\" , { key : \"password\" , label : \"password\" , value : this.properties.password , onChanged : ( value : string ) => { console . log ( value ); } })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldPassword/#implementation","text":"The PropertyFieldPassword control can be configured with the following properties: Property Type Required Description key string yes An unique key that indicates the identity of this control. label string no Property field label displayed on top. value string no Value to be displayed in the number field. onChanged (value: string) => void no If set, this method is used to get the the input value","title":"Implementation"},{"location":"controls/PropertyFieldPeoplePicker/","text":"PropertyFieldPeoplePicker control \u00b6 This control generates a people / group picker that can be used in the property pane of your SharePoint Framework web parts. Searching for persons Searching for groups Selected people / groups How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldPeoplePicker , PrincipalType } from '@pnp/spfx-property-controls/lib/PropertyFieldPeoplePicker' ; Create a new property for your web part, for example: import { IPropertyFieldGroupOrPerson } from \"@pnp/spfx-property-controls/lib/PropertyFieldPeoplePicker\" ; export interface IPropertyControlsTestWebPartProps { people : IPropertyFieldGroupOrPerson []; } Add the custom property control to the groupFields of the web part property pane configuration: 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' }) Implementation \u00b6 The PropertyFieldPeoplePicker control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. disabled boolean no Specify if the control needs to be disabled. context BaseComponentContext yes Context of the current web part. initialData IPropertyFieldGroupOrPerson[] no Initial data to load in the people picker (optional). allowDuplicate boolean no Defines if the People Picker allows to select duplicated users (optional). multiSelect boolean no Define if you want to allow multi user / group selection. (optional, true by default). principalType PrincipalType[] no Define which type of data you want to retrieve: User, SharePoint groups, Security groups. Multiple are possible. onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. properties any yes Parent web part properties, this object is use to update the property value. targetSiteUrl string no Specify the URL of the target site from which you want to retrieve the users/groups. key string yes An unique key that indicates the identity of this control. onGetErrorMessage function no The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. deferredValidationTime number no Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. Interface IPropertyFieldGroupOrPerson Property Type Required Description id string no The ID of the group description string no Group description fullName string yes Users' full name or group display name login string yes Users' login or group provider name (when security group) or group account name (when SharePoint group). email string no Users' email jobTitle string no Users' job title initials string no Users' initials imageUrl string no Users' profile image URL Enum PrincipalType The PrincipalType enum can be used to specify the types of information you want to query: User, Security groups, and/or SharePoint groups. Name Description Users To specify if you want to retrieve users. Security To specify if you want to retrieve security groups. SharePoint To specify if you want to retrieve SharePoint groups.","title":"PropertyFieldPeoplePicker"},{"location":"controls/PropertyFieldPeoplePicker/#propertyfieldpeoplepicker-control","text":"This control generates a people / group picker that can be used in the property pane of your SharePoint Framework web parts. Searching for persons Searching for groups Selected people / groups","title":"PropertyFieldPeoplePicker control"},{"location":"controls/PropertyFieldPeoplePicker/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyFieldPeoplePicker , PrincipalType } from '@pnp/spfx-property-controls/lib/PropertyFieldPeoplePicker' ; Create a new property for your web part, for example: import { IPropertyFieldGroupOrPerson } from \"@pnp/spfx-property-controls/lib/PropertyFieldPeoplePicker\" ; export interface IPropertyControlsTestWebPartProps { people : IPropertyFieldGroupOrPerson []; } Add the custom property control to the groupFields of the web part property pane configuration: 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' })","title":"How to use this control in your solutions"},{"location":"controls/PropertyFieldPeoplePicker/#implementation","text":"The PropertyFieldPeoplePicker control can be configured with the following properties: Property Type Required Description label string yes Property field label displayed on top. disabled boolean no Specify if the control needs to be disabled. context BaseComponentContext yes Context of the current web part. initialData IPropertyFieldGroupOrPerson[] no Initial data to load in the people picker (optional). allowDuplicate boolean no Defines if the People Picker allows to select duplicated users (optional). multiSelect boolean no Define if you want to allow multi user / group selection. (optional, true by default). principalType PrincipalType[] no Define which type of data you want to retrieve: User, SharePoint groups, Security groups. Multiple are possible. onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed. properties any yes Parent web part properties, this object is use to update the property value. targetSiteUrl string no Specify the URL of the target site from which you want to retrieve the users/groups. key string yes An unique key that indicates the identity of this control. onGetErrorMessage function no The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it. deferredValidationTime number no Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200. Interface IPropertyFieldGroupOrPerson Property Type Required Description id string no The ID of the group description string no Group description fullName string yes Users' full name or group display name login string yes Users' login or group provider name (when security group) or group account name (when SharePoint group). email string no Users' email jobTitle string no Users' job title initials string no Users' initials imageUrl string no Users' profile image URL Enum PrincipalType The PrincipalType enum can be used to specify the types of information you want to query: User, Security groups, and/or SharePoint groups. Name Description Users To specify if you want to retrieve users. Security To specify if you want to retrieve security groups. SharePoint To specify if you want to retrieve SharePoint groups.","title":"Implementation"},{"location":"controls/PropertyFieldRoleDefinitionPicker/","text":"PropertyFieldRoleDefinitionPicker control \u00b6 Role Definition picker control allows to select role definitions of a specific web via the property pane. Overview \u00b6 The control allows a you to pick role definitions from a dropdown control. It supports role definition selection using the dropdown control of Office fabric UI with multi-select enabled. PropertyFieldRoleDefinitionPicker example usage How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your webpart: import { IBasePermissions , IPropertyFieldRoleDefinitionPickerProps , PropertyFieldRoleDefinitionPicker , RoleTypeKind , IRoleDefinitionInformation } from \"@pnp/spfx-property-controls/lib/PropertyFieldRoleDefinitionPicker\" ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { roleDefinitions : IRoleDefinitionInformation []; } Add the role definition picker property control to the groupFields of the web part property pane configuration: PropertyFieldRoleDefinitionPicker ( 'roleDefinitions' , { context : this.context , label : \"Role Definitions\" , roleDefinitions : this.properties.roleDefinitions , onPropertyChange : this.onPropertyPaneFieldChanged , properties : this.properties , key : \"roleDefinitionPickerId\" , selectedRoleDefinition : [ \"Full Control\" ], roleDefinitionsToExclude : [ \"System.LimitedView\" ], }) Implementation \u00b6 The PropertyFieldRoleDefinitionPicker control can be configured with the following properties: Property Type Required Description properties any yes Parent web part properties, this object is used to update the property value. key string yes A unique key that indicates the identity of this control. context BaseComponentContext yes Current webpart context. onPropertyChange function yes Defines a onPropertyChange function to raise when the data gets changed. label string no Specifies the text describing the role definition picker. webAbsoluteUrl string no Absolute Web Url of target site (user requires permissions) required boolean no Sets the label to inform that the value is required. disabled boolean no Specifies if the picker button is disabled roleDefinitions IRoleDefinitionInformation[] yes The value of selected role definitions multiSelect boolean no Specify if you want to have a single or multi-select role definition picker. By default this is set to true (multi-select role picker). selectedRoleDefinition string[] no Pre-selected role definitions for the picker control roleDefinitionsToExclude string[] no Role definitions to be excluded from the picker control onRoleDefinitionsRetrieved (roleDefinitions: IRoleDefinitionInformation[]) => PromiseLike
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Reusable property pane controls for the SharePoint Framework solutions
+
+
+
+
+
+
+
+
+
+
+
+ Reusable property pane controls for the SharePoint Framework solutions 
¶
+This repository provides developers with a set of reusable property pane controls that can be used in their SharePoint Framework (SPFx) solutions.
+
+
+Attention
+In order to migrate to v2 and v3 from v1 it is advised to follow this guide: Migrating from V1.
Library Versions¶
+Currently there are 3 active versions of the controls. Please, reference the table below to see what version to use in your project.
+| Version | +SPFx minimal dependency | +Fluent UI (Office UI Fabric React) version | +SharePoint Version | +Comments | +
|---|---|---|---|---|
v3 |
+1.13.* |
+7.174.1 |
+Online | +The most current, actively maintained version of the library. | +
v2 |
+1.11.0 |
+6.214.0 |
+Online | +The version deprecated and not actively maintained. We strongly recommend to update to SPFx 1.13.* and v3 of Controls. |
+
v1 |
+1.3.0 |
+5.131.0 |
+On-Prem | +The version is maintained for SharePoint On-Prem 2016 and 2019 implementations. Be aware that the controls might not work in solutions you're building for on-premises. As for on-premises solutions version 1.1.0 will get used. |
+
+
+Attention
+If you are using v3 of the Controls with SPFx 1.12.1 you will need to cast web part context to any to pass it to the controls.
Getting started¶
+Installation¶
+To get started you have to install the following dependency to your project: @pnp/spfx-property-controls.
Enter the following command to install the dependency to your project:
+npm install @pnp/spfx-property-controls --save --save-exact
+Configuration¶
+
+
+Note
+Since v1.7.0 the localized resource path will automatically be configured during the dependency installing.
Once the package is installed, you will have to configure the resource file of the property controls to be used in your project. You can do this by opening the config/config.json and adding the following line to the localizedResources property:
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
+Telemetry¶
+All controls gather telemetry to verify the usage. Only the name of the control and related data gets captured.
+++More information about the service that we are using for this can be found here: PnP Telemetry Proxy.
+
Since version 1.17.0 it is possible to opt-out of the telemetry by adding the following code to your web part:
import PnPTelemetry from "@pnp/telemetry-js";
+...
+const telemetry = PnPTelemetry.getInstance();
+telemetry.optOut();
+Controls¶
+The following controls are currently available:
+-
+
- PropertyFieldButton (Property pane Button) +
- PropertyFieldCodeEditor (Property pane code editor) +
- PropertyFieldCollectionData (Property pane collection data editor) +
- PropertyFieldColorPicker (Property pane color picker) +
- PropertyFieldColumnPicker (Property pane list column picker) +
- PropertyFieldDateTimePicker (Property pane date and time selector) +
- PropertyFieldFilePicker (Property pane file picker) +
- PropertyFieldFolderPicker (Property pane folder picker) +
- PropertyFieldGrid (Property pane Grid control) +
- PropertyFieldGuid (Property pane GUID editor) +
- PropertyFieldIconPicker (Property pane icon picker) +
- PropertyFieldListPicker (Property pane list selector) +
- PropertyFieldMessage (Property pane message) +
- PropertyFieldMonacoEditor (Property pane Monaco Editor) +
- PropertyFieldMultiSelect (Property pane multi select dropdown) +
- PropertyFieldNumber (Property pane number editor) +
- PropertyFieldOrder (Property pane ordered list editor) +
- PropertyFieldPassword (Property pane password editor) +
- PropertyFieldPeoplePicker (Property pane people / group selector) +
- PropertyFieldRoleDefinitionPicker (Property pane role definition picker) +
- PropertyFieldSearch (Property pane search box) +
- PropertyFieldSitePicker (Property pane site selector) +
- PropertyFieldSpinButton (Property pane spin button) +
- PropertyFieldSpinner (Property pane spinner) +
- PropertyFieldSwatchColorPicker (Property pane color selector) +
- PropertyFieldTeamPicker (Property pane team selector) +
- PropertyFieldTermPicker (Property pane managed metadata term selector) +
- PropertyFieldEnterpriseTermPicker (Property pane managed metadata term selector for enterprise scenarios) +
- PropertyFieldViewPicker (Property pane view selector) +
- PropertyPaneMarkdownContent (Property pane markdown content) +
- PropertyPanePropertyEditor (Property pane control that allows raw editing, export and import of webpart properties) +
- PropertyPaneWebPartInformation (Property pane webpart information panel) +
The following controls are extended controls that show a callout next to the label
+-
+
- PropertyFieldButtonWithCallout (Property button field with callout) +
- PropertyFieldCheckboxWithCallout (Property checkbox field with callout) +
- PropertyFieldChoiceGroupWithCallout (Property choice group field with callout) +
- PropertyFieldDropdownWithCallout (Property dropdown field with callout) +
- PropertyFieldLabelWithCallout (Property label field with callout) +
- PropertyFieldLinkWithCallout (Property link field with callout) +
- PropertyFieldSliderWithCallout (Property slider field with callout) +
- PropertyFieldTextWithCallout (Property text field with callout) +
- PropertyFieldToggleWithCallout (Property toggle field with callout) +
,
, or to render content as block or inline elements. For example, the following Markdown will be rendered as inline content: This is an _inline_ element And the following Markdown will be rendered as block content: ## This is a block element However, you can override rendering all HTML as block elements or inline elements by passing forceBlock: true or forceInline: true to the component's options prop. Named unicode \u00b6 By default the control converts named html codes to their unicode character equivalents: &: & ': ' >: > <: < (space) : \": " If you need to extend this map of named codes and unicode characters, you can pass a list of additional html codes by using the namedCodesToUnicode option as object with the code names needed as follows: PropertyPaneMarkdownContent ({ markdown : ` One hundred is ≤ than one thousand, but is &ge than fifty.` , key : 'markdownSample' , options : { namedCodesToUnicode : { le : '\\u2264' , ge : '\\u2265' , } }}), Disabling parsing raw HTML \u00b6 By default, the PropertyPaneMarkdownContent control will parse raw HTML elements in your Markdown content and will attempt to render them. For example, this Markdown string will render text between two horizontal rulers: , or to render content as block or inline elements. For example, the following Markdown will be rendered as inline content: This is an _inline_ element And the following Markdown will be rendered as block content: ## This is a block element However, you can override rendering all HTML as block elements or inline elements by passing forceBlock: true or forceInline: true to the component's options prop.","title":"Rendering all elements as inline or block elements"},{"location":"controls/PropertyPaneMarkdownContent/#named-unicode","text":"By default the control converts named html codes to their unicode character equivalents: &: & ': ' >: > <: < (space) : \": " If you need to extend this map of named codes and unicode characters, you can pass a list of additional html codes by using the namedCodesToUnicode option as object with the code names needed as follows: PropertyPaneMarkdownContent ({ markdown : ` One hundred is ≤ than one thousand, but is &ge than fifty.` , key : 'markdownSample' , options : { namedCodesToUnicode : { le : '\\u2264' , ge : '\\u2265' , } }}),","title":"Named unicode"},{"location":"controls/PropertyPaneMarkdownContent/#disabling-parsing-raw-html","text":"By default, the PropertyPaneMarkdownContent control will parse raw HTML elements in your Markdown content and will attempt to render them. For example, this Markdown string will render text between two horizontal rulers:
Text between rulers
If you do not wish to render raw HTML from your Markdown, you can specify disableParsingRawHTML: true , which will render the same Markdown as follows: < hr/ > Text between rulers < hr/ > Implementation \u00b6 PropertyPaneMarkdownContent \u00b6 The PropertyPaneMarkdownContent control has the following properties: Property Type Required Description markdown string yes Markdown content you wish to display in the property pane key string yes A unique identifier for the property pane control options IMarkdownProps no Optional settings to control how Markdown content is rendered IMarkdownProps \u00b6 Property Type Required Description disableParsingRawHTML Boolean no true disables parsing of raw HTML elements within Markdown. forceBlock Boolean no true forces rendering all input strings as blocks. forceInline Boolean no true forces rendering all input strings as inline elements. namedCodesToUnicode object[] no An array of objects to override named HTML codes to their unicode equivalents. overrides object[] no An array of HTML elements to override during rendering. This control uses the markdown-to-jsx component to render safe HTML. For more information and advanced settings, please refer to the markdown-to-jsx documentation","title":"PropertyPaneMarkdownContent"},{"location":"controls/PropertyPaneMarkdownContent/#propertypanemarkdowncontent-control","text":"This control allows you to embed content in a property pane using Markdown content. You can use this control to easily provide guidance for your users and create other content that is not easily created otherwise. It supports any arbitrary HTML without using dangerouslySetInnerHTML , and allows overriding any HTML tag. PropertyPaneMarkdownContent rendering","title":"PropertyPaneMarkdownContent control"},{"location":"controls/PropertyPaneMarkdownContent/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyPaneMarkdownContent } from '@pnp/spfx-property-controls/lib/PropertyPaneMarkdownContent' ; Create a string with Markdown content for your property pane, for example: 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 Sample content borrowed with thanks from [markdown-to-jsx](https://probablyup.com/markdown-to-jsx/) \u2764\ufe0f` Add the custom property control to the groupFields of the web part property pane configuration: PropertyPaneMarkdownContent ({ markdown : md , key : 'markdownSample' })","title":"How to use this control in your solutions"},{"location":"controls/PropertyPaneMarkdownContent/#indentation","text":"Pay close attention to the indentation in your Markdown string. The Markdown parser assumes that four spaces preceding your content means a code block. This means that the following Markdown will render most of the content a code block: const md : string = ` To get started select an items from the library. You can pick any items from the list, provided that is has a valid \\`id\\` attribute.` Producing the following HTML: To solve this issue, make sure that your content is not indented. const md : string = `To get started select an items from the library. You can pick any items from the list, provided that is has a valid \\`id\\` attribute.` Which will produce the following HTML:","title":"Indentation"},{"location":"controls/PropertyPaneMarkdownContent/#overriding-rendering-of-html-elements","text":"You can override the rendering of any HTML element by specifying an overrides prop to the options . For example, to override the CSS class of H3 elements (which is defined by a ### in Markdown), you can override the className attribute using the following code: PropertyPaneMarkdownContent ({ markdown : ` ### This is a heading 3 You can override any HTML you want` , key : 'markdownSample' , options : { overrides : { h3 : { // Markdown equivalent of ### props : { className : \"ms-font-xl ms-fontColor-neutralDark\" , }, }, } }}), You can also render your own React elements using the overrides prop. For example, if you have a MyCustomControl React element, you can use the following: // Import your React element import MyCustomControl from 'MyCustomControl' ; ... PropertyPaneMarkdownContent ({ markdown : ` ### This is a heading 3 You can override any HTML you want ,
Text between rulers
If you do not wish to render raw HTML from your Markdown, you can specify disableParsingRawHTML: true , which will render the same Markdown as follows: < hr/ > Text between rulers < hr/ >","title":"Disabling parsing raw HTML"},{"location":"controls/PropertyPaneMarkdownContent/#implementation","text":"","title":"Implementation"},{"location":"controls/PropertyPaneMarkdownContent/#propertypanemarkdowncontent","text":"The PropertyPaneMarkdownContent control has the following properties: Property Type Required Description markdown string yes Markdown content you wish to display in the property pane key string yes A unique identifier for the property pane control options IMarkdownProps no Optional settings to control how Markdown content is rendered","title":"PropertyPaneMarkdownContent"},{"location":"controls/PropertyPaneMarkdownContent/#imarkdownprops","text":"Property Type Required Description disableParsingRawHTML Boolean no true disables parsing of raw HTML elements within Markdown. forceBlock Boolean no true forces rendering all input strings as blocks. forceInline Boolean no true forces rendering all input strings as inline elements. namedCodesToUnicode object[] no An array of objects to override named HTML codes to their unicode equivalents. overrides object[] no An array of HTML elements to override during rendering. This control uses the markdown-to-jsx component to render safe HTML. For more information and advanced settings, please refer to the markdown-to-jsx documentation","title":"IMarkdownProps"},{"location":"controls/PropertyPanePropertyEditor/","text":"PropertyPanePropertyEditor control \u00b6 This control allows the user to edit the webpart properties in JSON. It can also be used to export properties of a webpart and later import them again to a similar webpart on a different page. If the user clicks 'export' a file named 'webpartproperties.json' is presented for download. The same file can be uploaded to a new instance of the same webpart on for instance another site or page. PropertyPanePropertyEditor rendering in property pane PropertyPanePropertyEditor rendering when expanded How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyPanePropertyEditor } from '@pnp/spfx-property-controls/lib/PropertyPanePropertyEditor' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { toggleInfoHeaderValue : boolean ; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyPanePropertyEditor ({ webpart : this , key : 'propertyEditor' }) Implementation \u00b6 The PropertyEditor control has the following properties: Property Type Required Description webpart BaseClientSideWebPart yes The webpart, which is in principle the current webpart, of which you want to be able to edit the properties from","title":"PropertyPanePropertyEditor"},{"location":"controls/PropertyPanePropertyEditor/#propertypanepropertyeditor-control","text":"This control allows the user to edit the webpart properties in JSON. It can also be used to export properties of a webpart and later import them again to a similar webpart on a different page. If the user clicks 'export' a file named 'webpartproperties.json' is presented for download. The same file can be uploaded to a new instance of the same webpart on for instance another site or page. PropertyPanePropertyEditor rendering in property pane PropertyPanePropertyEditor rendering when expanded","title":"PropertyPanePropertyEditor control"},{"location":"controls/PropertyPanePropertyEditor/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyPanePropertyEditor } from '@pnp/spfx-property-controls/lib/PropertyPanePropertyEditor' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { toggleInfoHeaderValue : boolean ; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyPanePropertyEditor ({ webpart : this , key : 'propertyEditor' })","title":"How to use this control in your solutions"},{"location":"controls/PropertyPanePropertyEditor/#implementation","text":"The PropertyEditor control has the following properties: Property Type Required Description webpart BaseClientSideWebPart yes The webpart, which is in principle the current webpart, of which you want to be able to edit the properties from","title":"Implementation"},{"location":"controls/PropertyPaneWebPartInformation/","text":"PropertyPaneWebPartInformation control \u00b6 This control allows you to specify a description, a 'read more' link, and an optional embedded video PropertyPaneWebPartInformation rendering How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { toggleInfoHeaderValue : boolean ; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyPaneWebPartInformation ({ description : `This is a demo webpart, used to demonstrate all the PnP 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' }) Implementation \u00b6 The PropertyPaneWebPartInformation control has the following properties: Property Type Required Description description string yes Description content - any HTML moreInfoLink string no A URL providing optional additional information moreInfoLinkTarget string no An optional target for the link. Defaults to '_blank' videoProperties IVideoEmbedProperties no A video properties object specifying an optionally embedded video Class IVideoEmbedProperties Property Type Required Description embedLink string yes A link to an embeddable video. The video will be embedded in an iframe. See the example above for details width number no optional width of the iframe height number no optional height of the iframe properties object no additional properties to set on the iframe element","title":"PropertyPaneWebPartInformation"},{"location":"controls/PropertyPaneWebPartInformation/#propertypanewebpartinformation-control","text":"This control allows you to specify a description, a 'read more' link, and an optional embedded video PropertyPaneWebPartInformation rendering","title":"PropertyPaneWebPartInformation control"},{"location":"controls/PropertyPaneWebPartInformation/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your component: import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation' ; Create a new property for your web part, for example: export interface IPropertyControlsTestWebPartProps { toggleInfoHeaderValue : boolean ; } Add the custom property control to the groupFields of the web part property pane configuration: PropertyPaneWebPartInformation ({ description : `This is a demo webpart, used to demonstrate all the PnP 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' })","title":"How to use this control in your solutions"},{"location":"controls/PropertyPaneWebPartInformation/#implementation","text":"The PropertyPaneWebPartInformation control has the following properties: Property Type Required Description description string yes Description content - any HTML moreInfoLink string no A URL providing optional additional information moreInfoLinkTarget string no An optional target for the link. Defaults to '_blank' videoProperties IVideoEmbedProperties no A video properties object specifying an optionally embedded video Class IVideoEmbedProperties Property Type Required Description embedLink string yes A link to an embeddable video. The video will be embedded in an iframe. See the example above for details width number no optional width of the iframe height number no optional height of the iframe properties object no additional properties to set on the iframe element","title":"Implementation"},{"location":"guides/","text":"Project guides \u00b6 Following is an overview of guides for this project. If you're considering contributing to the project, reading up on these guides will help you understand the project structure and get started developing for it. Contributing - how you can contribute to the project Minimal Path to Awesome - setup your development environment Submitting a PR - how to submit a PR Migrating from V1 - how to migrate from v1","title":"Project guides"},{"location":"guides/#project-guides","text":"Following is an overview of guides for this project. If you're considering contributing to the project, reading up on these guides will help you understand the project structure and get started developing for it. Contributing - how you can contribute to the project Minimal Path to Awesome - setup your development environment Submitting a PR - how to submit a PR Migrating from V1 - how to migrate from v1","title":"Project guides"},{"location":"guides/contributing/","text":"Contribution guidelines \u00b6 We appreciate that you're interested in helping with moving the project forward. Before you submit your first PR, please read the following guide. We'd hate to see you work on something that someone else is already working on, something that we agreed not to do or something that doesn't match the project. Sharing is caring! You have an idea for a new control \u00b6 Awesome! Good ideas are invaluable for every product. Before you start hacking away, please check if there is no similar idea already listed in the issue list . If not, please create a new issue describing your idea. Once we agree on the feature scope and architecture, the feature will be ready for building. Don't hesitate to mention in the issue if you'd like to build the feature yourself. When building a new control, try to add your control to the default provided web part so that everyone can test it out. Please also provide the documentation for your controls in the documentation section . You have a suggestion for improving an existing control \u00b6 Nothing is perfect. If you have an idea how to improve an existing control, let us know by submitting an issue in the issue list . Some things are done for a reason, but some are not. Let's discuss what you think and see how the project could be improved for everyone. You've found a bug \u00b6 Bugs happen. When you find a bug, please have a look at the issue list if a similar bug has already been logged. If not, let us know what doesn't work and how we can reproduce it. If we can't reproduce your bug, we will ask you for clarification, which will only make it longer to fix it. Fixing typos \u00b6 Typos are embarrassing! Most PR's that fix typos will be accepted immediately. In order to make it easier to review the PR, please narrow the focus instead of sending a huge PR of fixes. Tips \u00b6 Before contributing: ensure that the dev branch on your fork is in sync with the original sp-dev-fx-property-controls repository ```sh # 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 \u00b6 git fetch upstream update your local dev to be a mirror of what's in the main repo \u00b6 git pull --rebase upstream dev ``` create a feature branch for your change. If you'll get stuck on an issue or merging your PR will take a while, this will allow you to have a clean dev branch that you can use for contributing other changes sh git checkout -b my-contribution DO's & DON'Ts \u00b6 DO follow the same project and test structure as the existing project. DO include tests when adding new functionality and features. When fixing bugs, start with adding a test that highlights how the current behavior is broken. DO keep discussions focused. When a new or related topic comes up it's often better to create new issue than to side track the conversation. DO NOT submit PR's for coding style changes. DO NOT surprise us with big PR's. Instead file an issue & start a discussion so we can agree on a direction before you invest a large amount of time. DO NOT commit code you didn't write. DO NOT submit PR's that refactor existing code without a discussion first.","title":"Contribution guidelines"},{"location":"guides/contributing/#contribution-guidelines","text":"We appreciate that you're interested in helping with moving the project forward. Before you submit your first PR, please read the following guide. We'd hate to see you work on something that someone else is already working on, something that we agreed not to do or something that doesn't match the project. Sharing is caring!","title":"Contribution guidelines"},{"location":"guides/contributing/#you-have-an-idea-for-a-new-control","text":"Awesome! Good ideas are invaluable for every product. Before you start hacking away, please check if there is no similar idea already listed in the issue list . If not, please create a new issue describing your idea. Once we agree on the feature scope and architecture, the feature will be ready for building. Don't hesitate to mention in the issue if you'd like to build the feature yourself. When building a new control, try to add your control to the default provided web part so that everyone can test it out. Please also provide the documentation for your controls in the documentation section .","title":"You have an idea for a new control"},{"location":"guides/contributing/#you-have-a-suggestion-for-improving-an-existing-control","text":"Nothing is perfect. If you have an idea how to improve an existing control, let us know by submitting an issue in the issue list . Some things are done for a reason, but some are not. Let's discuss what you think and see how the project could be improved for everyone.","title":"You have a suggestion for improving an existing control"},{"location":"guides/contributing/#youve-found-a-bug","text":"Bugs happen. When you find a bug, please have a look at the issue list if a similar bug has already been logged. If not, let us know what doesn't work and how we can reproduce it. If we can't reproduce your bug, we will ask you for clarification, which will only make it longer to fix it.","title":"You've found a bug"},{"location":"guides/contributing/#fixing-typos","text":"Typos are embarrassing! Most PR's that fix typos will be accepted immediately. In order to make it easier to review the PR, please narrow the focus instead of sending a huge PR of fixes.","title":"Fixing typos"},{"location":"guides/contributing/#tips","text":"Before contributing: ensure that the dev branch on your fork is in sync with the original sp-dev-fx-property-controls repository ```sh # assuming you are in the folder of your locally cloned fork.... git checkout dev","title":"Tips"},{"location":"guides/contributing/#assuming-you-have-a-remote-named-upstream-pointing-to-the-official-sp-dev-fx-property-controls-repo","text":"git fetch upstream","title":"assuming you have a remote named upstream pointing to the official sp-dev-fx-property-controls repo"},{"location":"guides/contributing/#update-your-local-dev-to-be-a-mirror-of-whats-in-the-main-repo","text":"git pull --rebase upstream dev ``` create a feature branch for your change. If you'll get stuck on an issue or merging your PR will take a while, this will allow you to have a clean dev branch that you can use for contributing other changes sh git checkout -b my-contribution","title":"update your local dev to be a mirror of what's in the main repo"},{"location":"guides/contributing/#dos-donts","text":"DO follow the same project and test structure as the existing project. DO include tests when adding new functionality and features. When fixing bugs, start with adding a test that highlights how the current behavior is broken. DO keep discussions focused. When a new or related topic comes up it's often better to create new issue than to side track the conversation. DO NOT submit PR's for coding style changes. DO NOT surprise us with big PR's. Instead file an issue & start a discussion so we can agree on a direction before you invest a large amount of time. DO NOT commit code you didn't write. DO NOT submit PR's that refactor existing code without a discussion first.","title":"DO's & DON'Ts"},{"location":"guides/migrate-from-v1/","text":"Migrating from v1 to v2 \u00b6 Most of the controls have no breaking changes when moving from v1 to v2. However, some APIs were changed to make the library more stable and controls behavior more even. Also, we've bumped up React and Fluent UI versions used in the library. It means you will need to update package.json file in your SPFx projects. The below guide is an overview of what it takes to migrate from v1 to v2. If we missed something, please let us know in the issues list so we can update the guide. Thanks! v2 Supports SharePoint Online Only \u00b6 v2 of Reusable Controls is based on SharePoint Framework 1.11 and, as a result, does not support SharePoint on-premises. Important : Please, use v1 if you plan to deploy your solution on-premises. React and Fluent UI versions \u00b6 v2 of Reusable Controls uses React.js v16.8.5 and Fluent UI (Office UI Fabric React) v6.214.0. Although it is not necessary to use the same modules' versions in your project, we highly recommend to update your solution accordingly: \"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\" , }, The easiest way to upgrade SharePoint Framework solution is to use Office365 CLI spfx project upgrade command. APIs Changes \u00b6 ...","title":"Migrating from v1 to v2"},{"location":"guides/migrate-from-v1/#migrating-from-v1-to-v2","text":"Most of the controls have no breaking changes when moving from v1 to v2. However, some APIs were changed to make the library more stable and controls behavior more even. Also, we've bumped up React and Fluent UI versions used in the library. It means you will need to update package.json file in your SPFx projects. The below guide is an overview of what it takes to migrate from v1 to v2. If we missed something, please let us know in the issues list so we can update the guide. Thanks!","title":"Migrating from v1 to v2"},{"location":"guides/migrate-from-v1/#v2-supports-sharepoint-online-only","text":"v2 of Reusable Controls is based on SharePoint Framework 1.11 and, as a result, does not support SharePoint on-premises. Important : Please, use v1 if you plan to deploy your solution on-premises.","title":"v2 Supports SharePoint Online Only"},{"location":"guides/migrate-from-v1/#react-and-fluent-ui-versions","text":"v2 of Reusable Controls uses React.js v16.8.5 and Fluent UI (Office UI Fabric React) v6.214.0. Although it is not necessary to use the same modules' versions in your project, we highly recommend to update your solution accordingly: \"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\" , }, The easiest way to upgrade SharePoint Framework solution is to use Office365 CLI spfx project upgrade command.","title":"React and Fluent UI versions"},{"location":"guides/migrate-from-v1/#apis-changes","text":"...","title":"APIs Changes"},{"location":"guides/mpa/","text":"Minimal Path to Awesome \u00b6 The shortest way to prepare your local copy of the project for development and testing. Install prerequisites \u00b6 Before you start contributing to this project, you will need Node.js. This project has been tested with the 10.x version of Node.js and the version of NPM that comes with it. You can use Node Version Manager to switch between different versions of Node.js. Get the local version of the project \u00b6 fork this repository clone your fork in the command line: run npm install to restore dependencies run gulp serve to serve your project Start making your changes Documentation \u00b6 SharePoint Framework Property Controls uses MkDocs to publish documentation pages. See more information about installing MkDocs on your operating system at http://www.mkdocs.org/#installation. Also, documentation uses custom MkDocs theme that should be installed as well. See Material theme for MkDocs Once you have MkDocs and Material theme installed on your machine, in the command line: run cd ./docs/documentation to change directory to where the manual pages are stored run mkdocs serve to start the local web server with MkDocs and view the documentation in the web browser","title":"Minimal Path to Awesome"},{"location":"guides/mpa/#minimal-path-to-awesome","text":"The shortest way to prepare your local copy of the project for development and testing.","title":"Minimal Path to Awesome"},{"location":"guides/mpa/#install-prerequisites","text":"Before you start contributing to this project, you will need Node.js. This project has been tested with the 10.x version of Node.js and the version of NPM that comes with it. You can use Node Version Manager to switch between different versions of Node.js.","title":"Install prerequisites"},{"location":"guides/mpa/#get-the-local-version-of-the-project","text":"fork this repository clone your fork in the command line: run npm install to restore dependencies run gulp serve to serve your project Start making your changes","title":"Get the local version of the project"},{"location":"guides/mpa/#documentation","text":"SharePoint Framework Property Controls uses MkDocs to publish documentation pages. See more information about installing MkDocs on your operating system at http://www.mkdocs.org/#installation. Also, documentation uses custom MkDocs theme that should be installed as well. See Material theme for MkDocs Once you have MkDocs and Material theme installed on your machine, in the command line: run cd ./docs/documentation to change directory to where the manual pages are stored run mkdocs serve to start the local web server with MkDocs and view the documentation in the web browser","title":"Documentation"},{"location":"guides/submitting-pr/","text":"Submitting a PR \u00b6 We appreciate your initiative and would love to integrate your work with the rest of the project! Here is how you can help us do it as quickly as possible. check, that your feature branch is up-to-date. If it's not, there is a risk of merge conflicts or other issues that will complicate merging your changes into the main repository. Refer to these resources for more information on syncing your repo: GitHub Help: Syncing a Fork AC: Keep Your Forked Git Repo Updated with Changes from the Original Upstream Repo Looking for a quick cheat sheet? Look no further: ```sh assuming you are in the folder of your locally cloned fork.... \u00b6 git checkout dev assuming you have a remote named upstream pointing to the official sp-dev-fx-property-controls repo \u00b6 git fetch upstream update your local dev branch to be a mirror of what's in the main repo \u00b6 git pull --rebase upstream dev switch to your branch where you are working, say \"issue-xyz\" \u00b6 git checkout issue-xyz update your branch to update its fork point to the current tip of dev & put your changes on top of it \u00b6 git rebase dev `` - submit PR to the **dev** branch of the main repo. PRs submitted to other branches will be declined - let us know what's in the PR: is it a new command, bug fix or a minor update in the docs? The clearer the information you provide, the quicker your PR can be verified and merged - ideally 1 PR = 1 commit - this makes it easier to keep the log clear for everyone and track what's changed. If you're new to working with git, we'll squash your commits for you when merging your changes into the main repo - don't worry about changing the version or adding yourself to the list of contributors in package.json`. We'll do that for you when merging your changes.","title":"Submitting a PR"},{"location":"guides/submitting-pr/#submitting-a-pr","text":"We appreciate your initiative and would love to integrate your work with the rest of the project! Here is how you can help us do it as quickly as possible. check, that your feature branch is up-to-date. If it's not, there is a risk of merge conflicts or other issues that will complicate merging your changes into the main repository. Refer to these resources for more information on syncing your repo: GitHub Help: Syncing a Fork AC: Keep Your Forked Git Repo Updated with Changes from the Original Upstream Repo Looking for a quick cheat sheet? Look no further: ```sh","title":"Submitting a PR"},{"location":"guides/submitting-pr/#assuming-you-are-in-the-folder-of-your-locally-cloned-fork","text":"git checkout dev","title":"assuming you are in the folder of your locally cloned fork...."},{"location":"guides/submitting-pr/#assuming-you-have-a-remote-named-upstream-pointing-to-the-official-sp-dev-fx-property-controls-repo","text":"git fetch upstream","title":"assuming you have a remote named upstream pointing to the official sp-dev-fx-property-controls repo"},{"location":"guides/submitting-pr/#update-your-local-dev-branch-to-be-a-mirror-of-whats-in-the-main-repo","text":"git pull --rebase upstream dev","title":"update your local dev branch to be a mirror of what's in the main repo"},{"location":"guides/submitting-pr/#switch-to-your-branch-where-you-are-working-say-issue-xyz","text":"git checkout issue-xyz","title":"switch to your branch where you are working, say \"issue-xyz\""},{"location":"guides/submitting-pr/#update-your-branch-to-update-its-fork-point-to-the-current-tip-of-dev-put-your-changes-on-top-of-it","text":"git rebase dev `` - submit PR to the **dev** branch of the main repo. PRs submitted to other branches will be declined - let us know what's in the PR: is it a new command, bug fix or a minor update in the docs? The clearer the information you provide, the quicker your PR can be verified and merged - ideally 1 PR = 1 commit - this makes it easier to keep the log clear for everyone and track what's changed. If you're new to working with git, we'll squash your commits for you when merging your changes into the main repo - don't worry about changing the version or adding yourself to the list of contributors in package.json`. We'll do that for you when merging your changes.","title":"update your branch to update its fork point to the current tip of dev & put your changes on top of it"},{"location":"helpers/PropertyPaneHelpers/","text":"PropertyPaneHelpers \u00b6 These are helpers to interact with the property pane of the web part. Currently this helper allows you to show a spinner when the property pane is loading resources. This could be loading controls, fetching data, ... Normally you would get a white property pane until all data is loaded. How to use this control in your solutions \u00b6 Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your main web part TypeScript file: import { PropertyPaneHelpers } from '@pnp/spfx-property-controls/lib/helpers' ; You can use the following example to add the spinner to your web part property pane: /** * Load property pane resources */ protected async loadPropertyPaneResources () : Promise < void > { PropertyPaneHelpers . setSpinner ({ bgColor : \"white\" , spinnerProps : { styles : () => { return { circle : { height : 80 , width : 80 } }; } } }); // Write here the code you want to add to load your resources PropertyPaneHelpers . clearSpinner ( 200 ); } Implementation \u00b6 The setSpinner method allows you to set the following properties: Property Type Required Description bgColor string no Spinner background color className string no Class name to style the spinner yourself. spinnerProps ISpinnerProps no Spinner properties from Office UI Fabric.","title":"PropertyPaneHelpers"},{"location":"helpers/PropertyPaneHelpers/#propertypanehelpers","text":"These are helpers to interact with the property pane of the web part. Currently this helper allows you to show a spinner when the property pane is loading resources. This could be loading controls, fetching data, ... Normally you would get a white property pane until all data is loaded.","title":"PropertyPaneHelpers"},{"location":"helpers/PropertyPaneHelpers/#how-to-use-this-control-in-your-solutions","text":"Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency. Import the following modules to your main web part TypeScript file: import { PropertyPaneHelpers } from '@pnp/spfx-property-controls/lib/helpers' ; You can use the following example to add the spinner to your web part property pane: /** * Load property pane resources */ protected async loadPropertyPaneResources () : Promise < void > { PropertyPaneHelpers . setSpinner ({ bgColor : \"white\" , spinnerProps : { styles : () => { return { circle : { height : 80 , width : 80 } }; } } }); // Write here the code you want to add to load your resources PropertyPaneHelpers . clearSpinner ( 200 ); }","title":"How to use this control in your solutions"},{"location":"helpers/PropertyPaneHelpers/#implementation","text":"The setSpinner method allows you to set the following properties: Property Type Required Description bgColor string no Spinner background color className string no Class name to style the spinner yourself. spinnerProps ISpinnerProps no Spinner properties from Office UI Fabric.","title":"Implementation"}]}
\ No newline at end of file
diff --git a/sitemap.xml b/sitemap.xml
new file mode 100644
index 00000000..0f8724ef
--- /dev/null
+++ b/sitemap.xml
@@ -0,0 +1,3 @@
+
+