As the title states I am trying to use the PropertyFieldCollectionData in my SPFx Property Pane. But when I run the code and try to search in the peoplepicker nothing shows up, not even myself.
Don't know if it would be of any help but here is the imports as well
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,
IPropertyPaneDropdownOption,
PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart, WebPartContext } from '@microsoft/sp-webpart-base';
import * as strings from 'FaqProjectWebPartStrings';
import FaqProject from './components/FaqProject';
import { IFaqProjectProps } from './components/FaqProject';
import { PropertyFieldListPicker, PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker';
import { IPropertyFieldGroupOrPerson, PropertyFieldDropdownWithCallout, PropertyFieldPeoplePicker } from '@pnp/spfx-property-controls';
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader';
import { PropertyFieldToggleWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldToggleWithCallout';
import { PropertyFieldCollectionData, CustomCollectionFieldType } from '@pnp/spfx-property-controls/lib/PropertyFieldCollectionData';
import { PeoplePicker, PrincipalType } from '@pnp/spfx-controls-react/lib/PeoplePicker';
Sample code in my FaqProjectWebPart.ts
PropertyFieldCollectionData("collectionData", {
key: "collectionData",
label: "Collection data",
panelHeader: "Collection data panel header",
manageBtnLabel: "Manage collection data",
value: this.properties.collectionData,
fields: [
{
id: "Title",
title: "Name",
type: CustomCollectionFieldType.string,
required: true
},
{
id: "Group",
title: "Choose a group",
type: CustomCollectionFieldType.custom,
onCustomRender: (field, value, onUpdate, item, itemId, onError) => {
return (
React.createElement(PeoplePicker, {
context: this.context as any ,
personSelectionLimit: 1,
showtooltip: true,
key: itemId,
defaultSelectedUsers: [item.customFieldId],
onChange: (items: any[]) => {
console.log("Items", items);
item.customFieldId = items[0].secondaryText;
onUpdate(field.id, items[0].secondaryText);
},
showHiddenInUI: false,
principalTypes: [PrincipalType.User]
})
)
},
},
],
disabled: false
}),
Props
export interface IFaqProjectWebPartProps {
description: string;
faqListId: string;
categoryListId: string;
subCategoryListId: string;
panelViewToggle: boolean;
people: IPropertyFieldGroupOrPerson[];
collectionData: any[];
}
