CODEWITHSUNDEEP
sharepointspfxpnp-js
Dalonso
Dalonso

Reputation: 11

How can I use a person field in a control @pnp/spfx-controls-reactComboBoxListItemPicker?

I use this configuration:

<ComboBoxListItemPicker       
listId='<LIST_ID>'       
columnInternalName='Author/Title'
keyColumnInternalName='ID'
webUrl='<WEB_URL>'
defaultSelectedItems={[]}
onSelectedItem={(items: any) => { console.log(items); }}       className='myComboBoxListItemPicker'
placeholder="Select an item" />

But the query that launches the control is this:

/_api/web/lists('xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx')/items?$select=ID,Author/Title&$filter=&$top=100

And get error 400, because $expand is missing.

Any idea?

Thanks.

I tried add $expand in filter property but not working

<ComboBoxListItemPicker       
listId='<LIST_ID>'       
columnInternalName='Author/Title'
keyColumnInternalName='ID'
filter='&$expand=Author'
webUrl='<WEB_URL>'
defaultSelectedItems={[]}
onSelectedItem={(items: any) => { console.log(items); }}       className='myComboBoxListItemPicker'
placeholder="Select an item" />

recovers the records but does not display them in the combo field Author/Title

Upvotes: 1

Views: 48

Answers (1)

Ghassen Khamassi
Ghassen Khamassi

Reputation: 1

- To use a person field in a control with @pnp/spfx-controls-react, you can leverage the PeoplePicker control provided by the library. This control allows you to select one or more users from your SharePoint environment and this is how can you install and work with this component: 
- Install: npm install @pnp/spfx-controls-react --save
- Import: import: { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";
- Source Code: const [selectedUsers, setSelectedUsers] = React.useState([]);
  const onChange = (items: any[]) => {
    setSelectedUsers(items);
    console.log(items); // Selected users
  };
return (
    <div>
      <PeoplePicker
        context={props.context}
        titleText="Select a person"
        personSelectionLimit={1}
        showtooltip={true}
        isRequired={true}
        selectedItems={onChange}
        showHiddenInUI={false}
        principalTypes={[PrincipalType.User]}
        resolveDelay={1000} />
    </div>
  );

Upvotes: -1

Related Questions