PnP Combo Box List Item Picker In SharePoint Framework

Open the “src\webparts\pnPComboBoxListItemPicker\PnPComboBoxListItemPickerWebPart.manifest.json” file and update the following.

• Update the interface
• Update the render method
• Update the getPropertyPaneConfiguration method

Update the interface

export interface IPnPComboBoxListItemPickerWebPartProps {
  listId: string;
  columnInternalName: string;
}

Update the render method

public render(): void {
  const element: React.ReactElement<IPnPComboBoxListItemPickerProps> = React.createElement(
    PnPComboBoxListItemPicker,
    {
      listId: this.properties.listId,
      columnInternalName: this.properties.columnInternalName,
      context: this.context
    }
  );
  ReactDom.render(element, this.domElement);
}

Update the getPropertyPaneConfiguration method

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: {
          description: strings.PropertyPaneDescription
        },
        groups: [
          {
            groupName: strings.BasicGroupName,
            groupFields: [
              PropertyPaneTextField('listId', {
                label: strings.ListIdFieldLabel
              }),
              PropertyPaneTextField('columnInternalName', {
                label: strings.ColumnInternalNameFieldLabel
              })
            ]
          }
        ]
      }
    ]
  };
}

Open the “src\webparts\pnPComboBoxListItemPicker\components\PnPComboBoxListItemPicker.tsx” file and import the control.

import { ComboBoxListItemPicker } from '@pnp/spfx-controls-react/lib/ComboBoxListItemPicker';

Update the render method as shown below.

public render(): React.ReactElement<IPnPComboBoxListItemPickerProps> {
    return (
        <div className={styles.pnPComboBoxListItemPicker}>
            <ComboBoxListItemPicker
                listId={this.props.listId}
                columnInternalName={this.props.columnInternalName}
                keyColumnInternalName='Id'
                onSelectedItem={this.onSelectedItem}
                webUrl={this.props.context.pageContext.web.absoluteUrl}
                multiSelect={true}
                spHttpClient={this.props.context.spHttpClient}
            />
        </div>
    );
}

onSelectedItem change event returns the selected folder.

private onSelectedItem(data: { key: string; name: string }[]) {
    for (const item of data) {
        console.log(`Item value: ${item.key}`);
        console.log(`Item text: ${item.name}`);
    }
}

Updated React component

Updated React component (src\webparts\pnPComboBoxListItemPicker\components\PnPComboBoxListItemPicker.tsx).

import * as React from 'react';
import styles from './PnPComboBoxListItemPicker.module.scss';
import { IPnPComboBoxListItemPickerProps } from './IPnPComboBoxListItemPickerProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { ComboBoxListItemPicker } from '@pnp/spfx-controls-react';
export default class PnPComboBoxListItemPicker extends React.Component<IPnPComboBoxListItemPickerProps, {}> {
    public render(): React.ReactElement<IPnPComboBoxListItemPickerProps> {
        return (
            <div className={styles.pnPComboBoxListItemPicker}>
                <ComboBoxListItemPicker
                    listId={this.props.listId}
                    columnInternalName={this.props.columnInternalName}
                    keyColumnInternalName='Id'
                    onSelectedItem={this.onSelectedItem}
                    webUrl={this.props.context.pageContext.web.absoluteUrl}
                    multiSelect={true}
                    spHttpClient={this.props.context.spHttpClient} />
            </div>
        );
    }
    private onSelectedItem(data: { key: string; name: string }[]) {
        for (const item of data) {
            console.log(`Item value: ${item.key}`);
            console.log(`Item text: ${item.name}`);
        }
    }
}

Deploy the solution

Execute the following commands to bundle and package the solution.

gulp bundle --ship
gulp package-solution --ship

Navigate to the tenant app catalog – Example: https://c986.sharepoint.com/sites/appcatalog/SitePages/Home.aspx

Upload the package file (sharepoint\solution\spfx-pnpreact-comboboxlistitempicker.sppkg).

Click Deploy.

Test the web part

Navigate to the SharePoint site and add the app.

Navigate to the page and add the web part as shown below.

Edit the web part and update the properties.

Result

Summary

Thus, in this article, you saw how to use PnP Combo Box List Item Picker control in SharePoint Framework.