logo
Published on

Fluent UI Toggle Switch Control in the SharePoint Framework (SPFx) Field Customizer Extension

This article provides steps to implement the Fluent UI Toggle Switch Control in a SharePoint Framework (SPFx) Field Customizer Extension.
The toggle enables users to instantly change boolean field values like Active or Enabled directly from a SharePoint list view.

⚙️ Create a New Extension Project

Run the following command to create a new extension:

yo @microsoft/sharepoint

When prompted:

  • Choose Extension → Field Customizer
  • Name the field customizer (e.g., FluentUiToggle)
  • Select React as the framework
  • Allow the solution to be deployed to all sites

📦 Install Dependencies

npm install @fluentui/react --save
npm install @pnp/sp --save

🧩 Implement the React Component

Create a TypeScript interface for your field properties:

export interface ISpFxExtensionFluentUiToggleProps {
  listId: string;
  itemId: number;
  fieldValue: boolean;
}

Import dependencies:

import * as React from 'react';
import { Toggle } from '@fluentui/react/lib/Toggle';
import { sp } from '@pnp/sp/presets/all';
import styles from './SpFxExtensionFluentUiToggle.module.scss';

Render the Fluent UI Toggle:

public render(): React.ReactElement<ISpFxExtensionFluentUiToggleProps> {
  const { fieldValue } = this.props;
  return (
    <div className={styles.cell}>
      <Toggle
        label=""
        onText="Active"
        offText="Inactive"
        checked={fieldValue}
        onChange={this._onToggleChange}
      />
    </div>
  );
}

Handle toggle changes and update SharePoint list items:

@autobind
private async _onToggleChange(ev: React.MouseEvent<HTMLElement>, checked: boolean): Promise<void> {
  const list = sp.web.lists.getById(this.props.listId);
  await list.items.getById(this.props.itemId).update({
    Active: checked
  });
}

⚙️ Configure serve.json

This file defines which list and field are used during local debugging.
Add the following to config/serve.json:

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "serveConfigurations": {
    "default": {
      "pageUrl": "https://ravichandran.sharepoint.com/sites/TheLanding/Lists/Sales/AllItems.aspx",
      "fieldCustomizers": {
        "Active": {
          "id": "60320897-6b87-4b93-a7a4-9df418002080",
          "properties": {
            "sampleText": "Value"
          }
        }
      }
    }
  }
}

✅ This ensures the field customizer attaches to the Active column in your Sales list during local testing.

🧾 Configure elements.xml

Add the following to sharepoint/assets/elements.xml to provision the Active column in your list:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Field ID="{8a2312ff-d669-4861-8341-ab4b58f23f13}"
         Name="SPFxActive"
         DisplayName="Active"
         Type="Boolean"
         Required="FALSE"
         Group="SPFx Columns"
         ClientSideComponentId="60320897-6b87-4b93-a7a4-9df418002080">
    <Default>FALSE</Default>
  </Field>
</Elements>

🧠 Explanation

  • The serve.json file binds your field customizer to a list field during debugging.
  • The elements.xml file defines the actual field structure in SharePoint.
  • The ClientSideComponentId must match your extension ID from package-solution.json.

🚀 Build and Deploy

Build, bundle, and deploy your solution:

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

Upload the .sppkg package to your App Catalog, deploy, and enable the extension for your SharePoint list.

📂 GitHub Source

View full SPFx project on GitHub:Fluent UI Toggle Switch Control in the SharePoint Framework (SPFx) Field Customizer Extension

GitHub

✅ Summary

This example demonstrates how to combine Fluent UI and PnPjs to create inline, dynamic updates for SharePoint boolean fields.
It’s ideal for toggling states like Active/Inactive, Enabled/Disabled, or Approved/Pending without opening the item form.

Author

Tags

SPFxSharePointFluent-UIField-CustomizerReact
Calendar IconBook a demo