SPFX Load SharePoint list items in a dropdown using PNP SP JS

It could be bit silly doing a basic operation. But thought of sharing this could help someone.

What I am going do here?

I want to display SharePoint list items in a dropdown in SPFX webpart.

  • As Microsoft recommends to use OUIFR(Office UI Fabric React) for design consistency I am going to use it rather than an normal html dropdown.
  • Also, for retrieving SharePoint list items I will use PNPSPJS

Step 1: Create SPFX React webpart

Step 2: Add Office UI fabric dropdown list to webpart with sample data:

npm install office-ui-fabric-react

For more details refer Microsoft site here

Add this piece of code in “SpfxReactReadWebPart.ts” file. This sets the SharePoint context which is required when you deploy the webpart into the site else you will get error

public onInit(): Promise<void> {
return super.onInit().then(_ => {
spfxContext: this.context

Add below import statements in ‘SpfxReactRead.tsx’

import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';

Add these 3 constant variables, one is to support the dropdown style and another one is to supply array values to dropdown

const dropdownStyles: Partial<IDropdownStyles> = {
  dropdown: { width: 300 }
const options: IDropdownOption[] = [  
  { key: 'apple', text: 'Apple' },
  { key: 'banana', text: 'Banana' },
  { key: 'orange', text: 'Orange'},
  { key: 'grape', text: 'Grape' },
  { key: 'broccoli', text: 'Broccoli' },
  { key: 'carrot', text: 'Carrot' },
  { key: 'lettuce', text: 'Lettuce' }
const stackTokens: IStackTokens = { childrenGap: 20 };

Add below stack tag inside render return function

<Stack tokens={stackTokens}>
      <Dropdown placeholder="Select an option" label="Basic uncontrolled example" options={options} styles={dropdownStyles} />

Then let’s see how the added dropdown looks like. Go with ‘Gulp serve’. I got the below error messages and the build failed

To fix them ctrl + click on the links will take to through the code line. Just comment them and re run ‘Gulp serve’ will work

Now local workbench loads, and I have added my webpart looks great with the Office UI fabric dropdown control added with the dummy data.

Step 3: Read SP list items using PNPSPJS

To read SP list items we are going to use pnp js, so install the libraries with the below command

npm install @pnp/logging @pnp/common @pnp/odata @pnp/sp @pnp/graph –save

Note: Normally we won’t use all these so no need to install everything, but some are interrelated, so I usually install all.

import { sp } from "@pnp/sp";

Add the below code just above the class method

var items: IDropdownOption[]=[];

export interface IReactGetItemsState{ 
  items: IDropdownOption[];

Then add then below constructor inside the class method to initialise the state

public constructor(props: ISpfxReactReadProps, state: IReactGetItemsState){ 
    this.state = { 
      items: []

Add the below ‘componentDidMount()’ method just below the constructor method. This method retrieves SharePoint list items using pnp sp js and sets it in the state using ‘setState’

public async componentDidMount(): Promise<void>
    // get all the items from a sharepoint list
    var reacthandler=this;
      for(var k in data){
        items.push({key:data[k].Title, text:data[k].Title});
      return items;

Step 4: Load SP list items to populate in drop down

As we are ready with the list items available in state, we can map it to the dropdown by changing the updating “options={this.state.items}”. It looks like this.

Cool. We are ready hit “Gulp serve” but local workbench will not the load any data as it needs a SharePoint site. So, go to SharePoint site workbench in my case it is “https://cogsharepoint.sharepoint.com/sites/Accounts/_layouts/15/workbench.aspx

And add the webpart into the page. Fantastic!!! we could see the SharePoint list items loaded into the dropdown list.

Thanks for reading my blog. Sharing is caring #sharingiscaring.