Bind Dropdown from SharePoint List in SPFx (SPHttpClient, PnPJS, Graph)

Recently, I was working on several SPFx solutions, including SPFx web parts and form customizer extensions for creating forms and storing their inputs in SharePoint lists.

In those forms, for the dropdown values, I was required to bind SharePoint list choice field values, so that whenever I added new choices, they would be automatically updated.

In this article, I will explain three different approaches for binding SharePoint list choice values to the dropdown control in SPFx solutions.

Bind Dropdown list from a SharePoint list in SPFx using SPHttpClient

In this section, we will see how to bind the SharePoint list choice field values into a dropdown control using the SPHttpClient. In the image below, you can see a Department field, which is a choice field from the Expense Reimbursements list.

Follow the steps below to achieve this!

1. Open the command prompt and run the commands below to create a directory for the SPFx solution.

md SPFxDropdownfrmSharePoint
cd SPFxDropdownfrmSharePoint

2. Once the folder is created, run the command below to make the project structure.

yo @microsoft/sharepoint

3. Then it will ask the following questions; answer them as I mentioned below.
   • What is your solution name? SPFxDropdownfrmSharePoint
   • Which type of client-side component to create? WebPart
   • Add new Web part to solution sp-fx-dropdownfrm-share-point.
   • What is your Web part name? DropdownListfromSP
   • Which template would you like to use? React

4. Once the solution is created successfully! Run the code . It will open the code in VS Code. Then, open the Props.ts file located within the component folder and update the props as shown below.

import { SPHttpClient } from '@microsoft/sp-http';
export interface IDropdownlistfromSpProps {
  description: string;
  isDarkTheme: boolean;
  environmentMessage: string;
  hasTeamsContext: boolean;
  userDisplayName: string;
  siteUrl: string;
  spHttpClient: SPHttpClient;
}

We imported SPHttpClient from @microsoft/sp-http and added it as a prop (spHttpClient) in our interface. This way, we can easily reuse the same client throughout the solution whenever we need to interact with SharePoint.

5. Then, open the .ts file and update its render method. We pass spHttpClient as a prop so that the React component can interact directly with SharePoint data.

  public render(): void {
    const element: React.ReactElement<IDropdownlistfromSpProps> = React.createElement(
      DropdownlistfromSp,
      {
        description: this.properties.description,
        isDarkTheme: this._isDarkTheme,
        environmentMessage: this._environmentMessage,
        hasTeamsContext: !!this.context.sdks.microsoftTeams,
        userDisplayName: this.context.pageContext.user.displayName,
        siteUrl: this.context.pageContext.web.absoluteUrl,
        spHttpClient: this.context.spHttpClient
      }
    );

    ReactDom.render(element, this.domElement);
  }

6. Now, update the .tsx file code with the code below.

import * as React from 'react';
import styles from './DropdownlistfromSp.module.scss';
import type { IDropdownlistfromSpProps } from './IDropdownlistfromSpProps';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

export interface IDropdownlistfromSpState {
  choices: string[];
  selectedValue: string;
}
export default class DropdownlistfromSp extends React.Component<IDropdownlistfromSpProps, IDropdownlistfromSpState> {
  constructor(props: IDropdownlistfromSpProps) {
    super(props);

    this.state = {
      choices: [],
      selectedValue: ""
    };
  }
  public componentDidMount(): void {
    this._getChoiceFieldValues();
  }
  private _getChoiceFieldValues(): void {
    const listName: string = "ExpenseReimbursements"; 
    const fieldInternalName: string = "Department";   
    const endpoint: string = `${this.props.siteUrl}/_api/web/lists/getbytitle('${listName}')/fields/getbyinternalnameortitle('${fieldInternalName}')?$select=Choices`;

    this.props.spHttpClient.get(endpoint, SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse) => response.json())
      .then((data: any) => {
        if (data && data.Choices) {
          this.setState({ choices: data.Choices });
        }
      });
  }
  private _onDropdownChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
    this.setState({ selectedValue: event.target.value });
  }
  public render(): React.ReactElement<IDropdownlistfromSpProps> {


    return (
      <section className={`${styles.dropdownlistfromSp} `}>
       <h3>Department Dropdown</h3>
        <select
          value={this.state.selectedValue}
          onChange={this._onDropdownChange}
          className={styles.selectControl} 
        >
          <option value="">-- Select a Department --</option>
          {this.state.choices.map((choice, index) => (
            <option key={index} value={choice}>
              {choice}
            </option>
          ))}
        </select>

        {this.state.selectedValue && (
          <p>You selected: <strong>{this.state.selectedValue}</strong></p>
        )}
      </section>
    );
  }
}

Here:

• IDropdownlistfromSpState = We created a state with two properties:
  • choices =to store the list of department values fetched from SharePoint.
  • selectedValue = to store the value selected by the user from the dropdown.
• In componentDidMount(), we call the _getChoiceFieldValues() method to get choice values whenever the web part is loaded.
• _getChoiceFieldValues() = In this method, we build the REST API URL for the SharePoint list [ExpenseReimbursements] and field[Department].
• We use spHttpClient.get() to call the SharePoint API.
• Once we get the response, we update the choices in state with the available department options.
• _onDropdownChange updates the selectedValue in state whenever the user picks a department from the dropdown.
• In the render() method, we are displaying the fetched choices into the dropdown control[<select></select>].
• When the user selects a department, we also show a message “You selected: [department name].”

7. Once the code is updated, save the changes and run the gulp serve command to test it locally.
   In the example below, you can see that the departments we added in the SharePoint list choice field are present in this dropdown, and the selected department is displaying.

This way, we can fetch the SharePoint list choice field values into a dropdown control using the SPHttp client.

Bind Dropdown list from a SharePoint list in SharePoint Framework using PnPJS

To use PnPjs in the SharePoint Framework web part, we first need to install that library within our SPFx solution. Run the command below in the command prompt in the root directory.

npm install @pnp/sp --save

Once it is installed successfully, follow the steps below to populate the dropdown control in the SPFx web part with choice field values using the PnP JS library.

1. Open the Props.ts file and update the properties as shown below.

import { SPFI } from '@pnp/sp';
export interface IDropdownListfromSpProps {
  description: string;
  isDarkTheme: boolean;
  environmentMessage: string;
  hasTeamsContext: boolean;
  userDisplayName: string;
  sp:SPFI;
}

Here, we add sp: SPFI as a prop so the React component can use the PnP SP instance to interact with SharePoint.

2. Then, open the .ts file and add the following import statements and update the render method as shown below.

import { spfi,SPFx,SPFI } from '@pnp/sp';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
export default class DropdownListfromSpWebPart extends BaseClientSideWebPart<IDropdownListfromSpWebPartProps> {

  private _isDarkTheme: boolean = false;
  private _environmentMessage: string = '';
  private _sp: SPFI;
  public render(): void {
    const element: React.ReactElement<IDropdownListfromSpProps> = React.createElement(
      DropdownListfromSp,
      {
        description: this.properties.description,
        isDarkTheme: this._isDarkTheme,
        environmentMessage: this._environmentMessage,
        hasTeamsContext: !!this.context.sdks.microsoftTeams,
        userDisplayName: this.context.pageContext.user.displayName,
        sp:this._sp
      }
    );

    ReactDom.render(element, this.domElement);
  }

Here:

• We import spfi, SPFx, and SPFI from @pnp/sp along with modules for webs, lists, and items. These give us access to PnP methods to work with SharePoint data.
• We declare a private variable _sp: SPFI, which will hold our PnP SP instance.
• In the render() method, we pass this._sp as a prop (sp) to the React component.
• This allows the component to use the PnP SP object for SharePoint operations directly.

3. Here is the .tsx file code, which is binding the SharePoint list choice values to a dropdown using the PnP JS library.

import * as React from 'react';
import styles from './DropdownListfromSp.module.scss';
import type { IDropdownListfromSpProps } from './IDropdownListfromSpProps';
export interface IDropdownListfromSpState {
  choices: string[];
  selectedValue: string;
}

export default class DropdownListfromSp extends React.Component<IDropdownListfromSpProps,IDropdownListfromSpState> {
  constructor(props: IDropdownListfromSpProps) {
    super(props);

    this.state = {
      choices: [],
      selectedValue: ""
    };
  }
  public componentDidMount(): void {
    this._getChoiceFieldValues();
  }

  private async _getChoiceFieldValues(): Promise<void> {
    try {
      const listName = "ExpenseReimbursements";
      const fieldInternalName = "Department";

      const field: any = await this.props.sp.web.lists.getByTitle(listName).fields.getByInternalNameOrTitle(fieldInternalName)
        .select("Choices")();

      if (field && field.Choices) {
        this.setState({ choices: field.Choices });
      }
    } catch (error) {
      console.error("Error fetching choice field values:", error);
    }
  }
private _onDropdownChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
    this.setState({ selectedValue: event.target.value });
  }

  public render(): React.ReactElement<IDropdownListfromSpProps> {
  return (
      <section className={styles.dropdownListfromSp}>
        <h3>Department Dropdown</h3>
        <select
          value={this.state.selectedValue}
          onChange={this._onDropdownChange}
          className={styles.selectControl}
        >
          <option value="">-- Select a Department --</option>
          {this.state.choices.map((choice, index) => (
            <option key={index} value={choice}>
              {choice}
            </option>
          ))}
        </select>

        {this.state.selectedValue && (
          <p>You selected: <strong>{this.state.selectedValue}</strong></p>
        )}
      </section>
    );
  }
}

This code is similar to the earlier one, but instead of using SPHttpClient, we utilize PnPjs to retrieve data from SharePoint.

• _getChoiceFieldValues()= In this method, we call this.props.sp.web.lists.getByTitle(…).fields.getByInternalNameOrTitle(…).select(“Choices”)() to fetch the Department choices.
• The rest of the logic (state, dropdown, handling selection) works the same as before.

This way, we can bind the choice values to the dropdown control in the SPFx web part.

Bind a Dropdown list from a SharePoint list using MSGraph in SPFx Web Part

When using the Microsoft Graph API in an SPFx web part, we must request permissions based on the action being performed.

Now, in this webpart, we are reading only the SharePoint list choice field values. We need to request the following permission in the Package-solution.json file.

"webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "Sites.Read.All"
      }
    ]

Once the admin people grant this permission, we can fetch the site-related details with the above permission.

Follow the steps below to bind the choice field values to the dropdown control.

1. Update the props in the Props.ts file as shown below.

import { MSGraphClientV3 } from '@microsoft/sp-http';
export interface IDropdownListfromSpProps {
  description: string;
  isDarkTheme: boolean;
  environmentMessage: string;
  hasTeamsContext: boolean;
  userDisplayName: string;
  graphClient: MSGraphClientV3;
}

We import MSGraphClientV3 from @microsoft/sp-http and assign it to the graphClient property. This allows us to make Microsoft Graph API calls directly from our SPFx component.

2. Also, update the code below in the .ts file.

import { MSGraphClientV3 } from '@microsoft/sp-http';

export default class DropdownListfromSpWebPart extends BaseClientSideWebPart<IDropdownListfromSpWebPartProps> {

  private _isDarkTheme: boolean = false;
  private _environmentMessage: string = '';
  public render(): void {
     this.context.msGraphClientFactory.getClient('3').then((client:MSGraphClientV3) =>{
    const element: React.ReactElement<IDropdownListfromSpProps> = React.createElement(
      DropdownListfromSp,
      {
        description: this.properties.description,
        isDarkTheme: this._isDarkTheme,
        environmentMessage: this._environmentMessage,
        hasTeamsContext: !!this.context.sdks.microsoftTeams,
        userDisplayName: this.context.pageContext.user.displayName,
        graphClient: client
      }
    );

    ReactDom.render(element, this.domElement);
  })}

Here:

• In the render() method, we use this.context.msGraphClientFactory.getClient(‘3’) to get an instance of MSGraphClientV3, which is the client used to call Microsoft Graph APIs.
• We pass the client to the React component via the graphClient prop so that the component can use it.

3. Now, update the code below in the .tsx file, which fetches the choice values from the SharePoint list and binds them to the dropdown control.

import * as React from 'react';
import styles from './DropdownListfromSp.module.scss';
import type { IDropdownListfromSpProps } from './IDropdownListfromSpProps';
export interface IDropdownListfromSpState {
  choices: string[];
  selectedValue: string;
}

export default class DropdownListfromSp extends React.Component<IDropdownListfromSpProps,IDropdownListfromSpState> {
  constructor(props: IDropdownListfromSpProps) {
    super(props);

    this.state = {
      choices: [],
      selectedValue: ""
    };
  }
  public componentDidMount(): void {
    this._getChoiceFieldValues();
  }

private async _getChoiceFieldValues(): Promise<void> {
  try {
    const listId = "6fb644597e0-417f-5642-d39f329b19e2"; // Your list GUID
    const fieldName = "Department"; // Your Choice field display name

    // Split the site URL into hostname and path
    const url = new URL(this.props.SiteURL as string);
    const hostname = url.hostname;   
    const pathname = url.pathname;   

    // Get all columns for the list
    const columnsEndpoint = `/sites/${hostname}:${pathname}:/lists/${listId}/columns`;
    const columnsResponse = await this.props.graphClient.api(columnsEndpoint).get();

    if (!columnsResponse || !columnsResponse.value || columnsResponse.value.length === 0) {
      console.warn(`No columns returned for list ${listId}.`);
      return;
    }

    const field = columnsResponse.value.find((col: any) => col.name === fieldName);
    if (!field || !field.id) 
      console.warn(`Field '${fieldName}' not found in list ${listId}.`);
      return;
    }

    const columnEndpoint = `/sites/${hostname}:${pathname}:/lists/${listId}/columns/${field.id}`;
    const columnResponse = await this.props.graphClient.api(columnEndpoint).get();

    if (columnResponse && columnResponse.choice && columnResponse.choice.choices) {
      this.setState({ choices: columnResponse.choice.choices });
      console.log("Choice values:", columnResponse.choice.choices);
    } else {
      console.warn(`No choices found for field '${fieldName}'.`);
    }

  } catch (error) {
    console.error("Error fetching choice field values via MSGraph:", error);
  }
}


private _onDropdownChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
    this.setState({ selectedValue: event.target.value });
  }

  public render(): React.ReactElement<IDropdownListfromSpProps> {
  return (
      <section className={styles.dropdownListfromSp}>
        <h3>Department Dropdown</h3>
        <select
          value={this.state.selectedValue}
          onChange={this._onDropdownChange}
          className={styles.selectControl}
        >
          <option value="">-- Select a Department --</option>
          {this.state.choices.map((choice, index) => (
            <option key={index} value={choice}>
              {choice}
            </option>
          ))}
        </select>

        {this.state.selectedValue && (
          <p>You selected: <strong>{this.state.selectedValue}</strong></p>
        )}
      </section>
    );
  }
}

This code is similar to the earlier one, but instead of using PnP JS, we used the MSGraph to retrieve data from the SharePoint list choice field.

• _getChoiceFieldValues = It fetches the choice values for a specific SharePoint list column using the Microsoft Graph client (this.props.graphClient).
• It identifies the list by its ID [listId] and the choice field by its display name [ Department].
• The site URL (this.props.SiteURL) is split into hostname and pathname to construct the Graph API endpoints correctly [/sites/${hostname}:${pathname}:/lists/${listId}/columns].
• columnsResponse = await this.props.graphClient.api(columnsEndpoint).get() It calls the Graph API to retrieve all columns for the list and identifies the column that matches the chosen field.
• Using the column ID [field.id], it makes another Graph API call to retrieve detailed information about the choice field [/lists/${listId}/columns/${field.id}].
• The method extracts the available choices (columnResponse.choice.choices) and updates the component’s state so that the dropdown can display them.

This way, we can bind the SharePoint list choice field values to a dropdown control using the Microsoft Graph.

I hope you found this article helpful!, Here, I have explained three different methods for binding the SharePoint list choice field values to the dropdown control. Follow this article if you are looking to add choice values from SharePoint in a dropdown control.

• SharePoint Framework (SPFx) Extensions Application Customizer Example
• Create and Deploy SharePoint Framework (SPFx) extension field customizer
• Create and deploy SharePoint Framework (SPFx) listview command set extension
• How to display SharePoint list items in a table using SPFX
• Customize SharePoint Online site header and footer using SPFx Application Customizer

Bijay Kumar

After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.