logo
Published on

Multi-Select Lookup Field Managed Using Fluent UI Dropdown in SPFx

This article explains how to implement Multi-Select Lookup Field Managed Using Fluent UI Dropdown in the SharePoint Framework (SPFx) web part.
Fluent UI Dropdown provides a rich user experience for managing lookup data, allowing multiple selections with clear visuals and smooth interaction.

Install Required Dependencies

npm install @fluentui/react --save

Configure Custom Properties

Create a new source code file under /src/webparts/<webpartname>/components and define the required interfaces.

import { IDropdown, IDropdownOption, IDropdownStyles } from '@fluentui/react';

export interface ISpFxFluentUiDropdownProps {
  selectedLookupValues: string[];
  projectLookupList: string;
}

export interface ISpFxFluentUiDropdownState {
  projects: IDropdownOption[];
  selectedProjects: number[];
}

Import Dependencies

Add the required imports in your React component.

import * as React from 'react';
import { Dropdown, IDropdownOption } from '@fluentui/react';
import { sp } from '@pnp/sp/presets/all';
import { PrimaryButton } from '@fluentui/react/lib/Button';
import styles from './SpFxFluentUiDropdown.module.scss';

Render the Dropdown Component

The following code renders the Fluent UI Dropdown for selecting multiple lookup values.

public render(): React.ReactElement<ISpFxFluentUiDropdownProps> {
  return (
    <div className={styles.dropdown}>
      <Dropdown
        placeholder="Select projects"
        label="Projects"
        selectedKeys={this.state.selectedProjects}
        onChange={this._onProjectChange}
        multiSelect
        options={this.state.projects}
      />
      <PrimaryButton text="Save" onClick={this._saveValues} />
    </div>
  );
}

Component Logic

Add component logic to fetch and bind SharePoint lookup values.

private async _getLookupValues() {
  const items: any[] = await sp.web.lists.getByTitle('Projects').items.select('Id,Title').get();
  const projectOptions: IDropdownOption[] = items.map(i => ({ key: i.Id, text: i.Title }));
  this.setState({ projects: projectOptions });
}

Handle selection and save actions.

private _onProjectChange(event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void {
  const selectedProjects = [...this.state.selectedProjects];
  if (item.selected) {
    selectedProjects.push(item.key as number);
  } else {
    const index = selectedProjects.indexOf(item.key as number);
    if (index > -1) selectedProjects.splice(index, 1);
  }
  this.setState({ selectedProjects });
}

private async _saveValues() {
  await sp.web.lists.getByTitle('Tasks').items.getById(1).update({
    ProjectLookupId: { results: this.state.selectedProjects }
  });
  alert('Lookup values saved successfully.');
}

Deploy the Solution

Run the following commands to build, bundle, and package your solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file to the App Catalog, deploy it, and add your web part to a page.

Summary

  • Fluent UI Dropdown supports multiple selections with ease.
  • Lookup values can be bound dynamically using PnPjs.
  • This approach offers a modern, accessible UI experience in SPFx.

View full SPFx project on GitHub:Multi-Select Lookup Field Managed Using Fluent UI Dropdown in SPFx

GitHub

Author

Tags

SPFxFluent-UIReactSharePointDropdown
Calendar IconBook a demo