PnP Combo Box List Item Picker In SharePoint Framework

PnP React Controls

Patterns and Practices (PnP) provides a list of reusable React controls to developers for building solutions such as web parts and extensions using SharePoint Framework.

Refer to this link to get the list of React controls for SPFx.

You will see how to use the PnP Combo Box List Item Picker control in the SPFx web part.

PnP Combo Box list item picker control

This control allows you to select one or more items from a list. The List can be filtered to allow select items from a subset of items. The item selection is based on a column value. The control will suggest items based on the inserted value. Refer to this link for more details.

Note. I have created a custom list named Countries and added the items as shown below. Title field values will be considered as column values.

In this article, you will see how to perform the following tasks.

• Prerequisites
• Create SPFx solution
• Implement Combo Box List Item Picker solution
• Deploy the solution
• Test the web part

Prerequisites

• Set up your Office 365 Tenant
• Set up a development environment

Create SPFx solution

Open the Node.js command prompt.

Create a new folder.

md spfx-pnpreact-comboboxlistitempicker

Navigate to the folder.

cd spfx-pnpreact-comboboxlistitempicker

Execute the following command to create the SPFx web part.

yo @microsoft/sharepoint

Enter all the required details to create a new solution as shown below.

Yeoman generator will perform the scaffolding process and once it is completed, lock down the version of project dependencies by executing the following command.

npm shrinkwrap

Execute the following command to open the solution in the code editor.

code .

Implement Combo Box List Item Picker solution

Execute the following command to install the PnP React Controls NPM package.

npm install @pnp/spfx-controls-react --save

Open the “src\webparts\pnPComboBoxListItemPicker\components\IPnPComboBoxListItemPickerProps.ts” file and update the code as shown below.

Note. List-ID and column internal name are configurable in the web part property pane that’s why we are adding in props.

import { WebPartContext } from '@microsoft/sp-webpart-base';
export interface IPnPComboBoxListItemPickerProps {
  listId: string;
  columnInternalName: string;
  context: WebPartContext;
}

Open the “src\webparts\pnPComboBoxListItemPicker\loc\mystrings.d.ts” file and update the code as shown below.

declare interface IPnPComboBoxListItemPickerWebPartStrings {
  PropertyPaneDescription: string;
  BasicGroupName: string;
  ListIdFieldLabel: string;
  ColumnInternalNameFieldLabel: string;
}
declare module 'PnPComboBoxListItemPickerWebPartStrings' {
  const strings: IPnPComboBoxListItemPickerWebPartStrings;
  export = strings;
}

Open the “src\webparts\pnPComboBoxListItemPicker\loc\en-us.js” file and update the code as shown below.

define([], function () {
  return {
    "PropertyPaneDescription": "Description",
    "BasicGroupName": "Group Name",
    "ListIdFieldLabel": "List ID",
    "ColumnInternalNameFieldLabel": "Column Internal Name",
  };
});

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.