Post
Ask Question

How to Use PnP ComboBoxListItemPicker Control in SPFx

Introduction 

 
PnP initiative is very useful, since, among many other things such as sample codes, guidance documentation, community calls, etc., it has also provided some reusable controls that can be used in SPFx web parts and extensions. You can refer to this link for more 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.
 
SPFx react control Version 1.17.0 was released recently, which added 4 new controls and other enhancements and bug fixes. You can find a summary of the 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 the SPFx solution and go to that directory.
  1. md PnPControlsDemo  
  2. cd PnPControlsDemo  
Let us now create our solution:
  1. yo @microsoft/sharepoint  
Select the below options:
 
 
Once you select all options in wizard one by one, it will take some time to generate the code structure.
 
 
Now let's install the required npm packages to use PnP controls. Run the below command: 
  1. 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 as well).
 
Now let's modify code to use these controls.
 

Passing WebPart context to React components

 
Combobox List Item Picker requires Sharepoint site context to work with, therefore we will pass it from our web part file to react components.
 
Open src\webparts\controls\components\IControlsProps.ts 
 
Modify the code to what is shown below:
  1. import { WebPartContext } from '@microsoft/sp-webpart-base';    
  2. export interface IControlsProps {  
  3.   description: string;  
  4.   context: WebPartContext;    
  5. }  
Open src\webparts\controls\ControlsWebPart.ts
 
Modify the render method to the pass context.
  1. public render(): void {  
  2.    const element: React.ReactElement<IControlsProps > = React.createElement(  
  3.      Controls,  
  4.      {  
  5.        description: this.properties.description,  
  6.        context:this.context  
  7.      }  
  8.    );  
  9.    ReactDom.render(element, this.domElement);  
  10.  }  
Please note we have just added line ‘context:this.context’ .
 

Modify the React component associated with the Web Part.

 
Open src\webparts\controls\components\Controls.tsx
 
Import the ComboBoxListItemPicker Control
  1. import { ComboBoxListItemPicker } from '@pnp/spfx-controls-react/lib/listItemPicker';  
Modify the render method:
  1. public render(): React.ReactElement<IControlsProps> {  
  2.     return (  
  3.       <div className={ styles.controls }>  
  4.         <div className={ styles.container }>  
  5.           <div className={ styles.row }>  
  6.             <div className={ styles.column }>  
  7.               <span className={ styles.title }>Welcome to SharePoint!</span>  
  8.               <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>  
  9.               <p className={ styles.description }>{escape(this.props.description)}</p>  
  10.               <a href="https://aka.ms/spfx" className={ styles.button }>  
  11.                 <span className={ styles.label }>Learn more</span>  
  12.               </a>  
  13.             </div>  
  14.           </div>  
  15.         </div>  
  16.         <br>  
  17.         </br>  
  18.         <ComboBoxListItemPicker listId='ba682bc2-351e-45ae-8cbe-b0512ba0291a'  
  19.                         columnInternalName='Desc'  
  20.                         keyColumnInternalName='Id'  
  21.                         // filter="Title eq 'SPFx'"  
  22.                         onSelectedItem={this.onSelectedComboBoxItemPicker}  
  23.                         webUrl={this.props.context.pageContext.web.absoluteUrl}  
  24.                         spHttpClient={this.props.context.spHttpClient}   
  25.                         multiSelect={true}  
  26.                        />  
  27.       </div>  
  28.     );  
  29.   }  
 If you look at above code, what we are doing is:
  1. Adding a 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 a columnInternalName which is name of column which you want to display in dropdown
  5. Provide a keyColumnInternalName which is the name of the column which you want to use as an Id(value)
  6. Binding an onSelectedEvent event with custom method (this.onSelectedComboBoxItemPicker)
Add onSelectedItem event handler to process the 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.
  1. private onSelectedComboBoxItemPicker(items:any[]) {  
  2.     console.log("selected items:", items);  
  3.   }  
Note
There was an issue with the initial release of this control which was not passing objects values in items array. This was fix as part of Release 1.1.18. 
 
For now, let us see this web part in the action. Run gulp serve
 
gulp serve
 
Open the SharePoint workbench page.
 
https://spevents.com/sites/spsahmd2019/_layouts/15/workbench.aspx
 
Add a target web part, and when the page loads, we will see below output:
 
 
Click on Dropdown and select some items:
 
 
Below is how it will look with the selected items:
 
 
If you go to the console, you can see below the object logged in the console. Please note that onSelectedItem event will be called every time an item is selected:
 
 

Conclusion

 
This control will be very useful when we wanted functionality to allow the user to select multiple items from the List.
 
Thanks for reading, hope you enjoyed it.


Similar Articles