PnP ComboBoxListItemPicker in SPFx

PnP initiative is awesome because, among many other things like sample codes, guidance documentation, community calls. it has also provided some reusable controls which can be used in SPFx web parts and extension. You can refer to this link for details.

There are 2 types of controls  SPFx react controls that can be used in the content of the web part and other SPFx property pane controls which can be used in the property pane of SPFx web part.

Yesterday, SPFx react control Version 1.17.0 was released which added 4 new controls and other enhancements and bug fixes.  You can find a summary of current release at this link

In this article, we will learn how to use PnP Combo box List Item control in the SPFx web part.

Create WebPart

Run below commands in sequence.

Open a command prompt and create a directory for SPFx solution and go to that directory.

md PnPControlsDemo
cd PnPControlsDemo

Let us now create our solution

yo @microsoft/sharepoint

Select below options

Once you select all options in wizard one by one, it will take some time to generate the code structure.

Now let us install required npm packages to use PnP controls. Run below command

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

After it is completed, open the same folder in Visual Studio code( you can use any other editor also).

Now let us modify code to use these controls.

Step – Passing WebPart context to React components

Combobox List Item Picker  requires Sharepoint site context to work with, hence we will pass it from our web part file to react components.

Open src\webparts\controls\components\IControlsProps.ts

Modify code to below

import { WebPartContext } from '@microsoft/sp-webpart-base';  
export interface IControlsProps {
  description: string;
  context: WebPartContext;  
}

Open src\webparts\controls\ControlsWebPart.ts

Modify render method to pass context.

public render(): void {
   const element: React.ReactElement<IControlsProps > = React.createElement(
     Controls,
     {
       description: this.properties.description,
       context:this.context
     }
   );
   ReactDom.render(element, this.domElement);
 }

Please note we have just added line ‘context:this.context’ .

Step – Modify React component associated with web part.

Open src\webparts\controls\components\Controls.tsx

Import the ComboBoxListItemPicker Control

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

Modify the render method

public render(): React.ReactElement<IControlsProps> {
    return (
      <div className={ styles.controls }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
          </div>
        </div>
        <br>
        </br>
        <ComboBoxListItemPicker listId='ba682bc2-351e-45ae-8cbe-b0512ba0291a'
                        columnInternalName='Desc'
                        keyColumnInternalName='Id'
                        // filter="Title eq 'SPFx'"
                        onSelectedItem={this.onSelectedComboBoxItemPicker}
                        webUrl={this.props.context.pageContext.web.absoluteUrl}
                        spHttpClient={this.props.context.spHttpClient} 
                        multiSelect={true}
                       />
      </div>
    );
  }

So if you look at above code, what we are doing is.

1. Added Combobox List Item Picker control
2. Passing a listId of targeted List
3. webUrl – Passing the url of web where our targeted list is available.
4. Provide columnInternalName which is name of column which you want to display in dropdown
5. Provide keyColumnInternalName which is name of column which you want to use as Id(value)
6. Binding onSelectedEvent event with custom method (this.onSelectedComboBoxItemPicker)

Add onSelectedItem event handler to process items selected by the user. For our example, we will only write in the console. But you can always use state and set values in state object or local variable.

private onSelectedComboBoxItemPicker(items:any[]) {
    console.log("selected items:", items);
  }

For now, let us see this web part in the action. Run gulp serve

gulp serve

https://spevents.com/sites/spsahmd2019/_layouts/15/workbench.aspx

Add target webpart, and on On-Page load we will see below output

Click on Dropdown and select some items

Below is how it will look with selected items.

If you go to console, you can see below object logged in console. Please note that onSelectedItem event will be called every time a item is selected.

Conclusion – This control will be very useful when we wanted functionality to allow the user to select multiple items from List.

Thanks for reading, hope you enjoyed it.

P.S – This article was originally published at this link.