Using Fluent UI Components in SPFx Web Parts

Introduction

Fluent UI (formerly known as Office UI Fabric) is a collection of UX frameworks that provide high-quality, reusable components for building user interfaces in SharePoint Framework (SPFx) web parts. This article will guide you through installing Fluent UI components in your SPFx project, using them to create a user-friendly interface, and styling your web parts effectively.

1. Understanding Fluent UI

Fluent UI provides a set of components that adhere to Microsoft’s design language, allowing developers to create consistent and visually appealing user interfaces. Components such as buttons, text fields, and dropdowns can enhance the user experience in your SPFx web parts.

Key Benefits of Using Fluent UI:

• Consistent Design: Aligns with Microsoft’s design standards.
• Reusability: Easily reuse components across different projects.
• Accessibility: Components are designed with accessibility in mind.

2. Installing Fluent UI in Your SPFx Project

Step 1: Install Fluent UI Packages

1. Open your command prompt or terminal.
2. Navigate to your SPFx project directory:

   cd my-spfx-webpart

3. Run the following command to install Fluent UI:

   npm install @fluentui/react --save

Step 2: Install Type Definitions

To benefit from TypeScript’s type checking, install the type definitions for Fluent UI.

1. Run the following command:

   npm install @types/react --save-dev

3. Using Fluent UI Components in Your Web Part

Step 1: Import Fluent UI Components

Open your web part file (e.g., MyWebPart.ts) and import the necessary Fluent UI components you plan to use. Here’s an example of importing a button and a text field:

import { PrimaryButton, TextField } from '@fluentui/react';

Step 2: Add Components to Your Render Method

Inside the render method of your web part, you can add the Fluent UI components to create your user interface. Below is an example of how to implement a simple form with a text input and a button:

public render(): void {
    this.domElement.innerHTML = `
        <div>
            <h2>My Fluent UI Web Part</h2>
            <div id="myForm"></div>
        </div>
    `;

    this._renderForm();
}

private _renderForm(): void {
    const textField = new TextField({
        label: "Enter some text",
        placeholder: "Type here...",
        onChange: this._onTextChange.bind(this)
    });

    const button = new PrimaryButton({
        text: "Submit",
        onClick: this._onButtonClick.bind(this)
    });

    this.domElement.querySelector("#myForm").appendChild(textField);
    this.domElement.querySelector("#myForm").appendChild(button);
}

private _onTextChange(event: React.ChangeEvent<HTMLInputElement>): void {
    console.log("Text changed:", event.target.value);
}

private _onButtonClick(): void {
    console.log("Button clicked");
}

4. Styling Fluent UI Components

Fluent UI components can be styled using themes and custom styles. You can customize the appearance of your components to align with your application’s branding.

Step 1: Using Fluent UI Themes

You can apply a theme to your components by using the ThemeProvider from Fluent UI. Here’s how to wrap your application in a theme provider:

import { ThemeProvider, createTheme } from '@fluentui/react';

const myTheme = createTheme({
    palette: {
        themePrimary: '#0078d4',
        themeLighterAlt: '#f3f9fd',
        themeLighter: '#dbedf9',
        themeLight: '#b7e0f8',
        themeTertiary: '#5ca4ef',
        themeSecondary: '#1a8fcd',
        themeDarkAlt: '#0072bc',
        themeDark: '#0066b3',
        themeDarker: '#005a9e',
        neutralLighterAlt: '#f8f8f8',
        neutralLighter: '#f4f4f4',
        neutralLight: '#eaeaea',
        neutralQuaternary: '#dadada',
        neutralQuaternaryAlt: '#d0d0d0',
        neutral: '#a19f9d',
        neutralDark: '#605e5c',
        black: '#323130',
        white: '#ffffff'
    }
});

public render(): void {
    this.domElement.innerHTML = `
        <div>
            <h2>My Fluent UI Web Part</h2>
            <div id="myForm"></div>
        </div>
    `;

    return (
        <ThemeProvider theme={myTheme}>
            {this._renderForm()}
        </ThemeProvider>
    );
}

Step 2: Customizing Styles

You can create custom styles using CSS and apply them to your Fluent UI components by adding a className property:

const customStyle = {
    root: {
        margin: "20px",
        padding: "10px",
        backgroundColor: "#f3f3f3",
        borderRadius: "5px"
    }
};

const textField = new TextField({
    label: "Enter some text",
    placeholder: "Type here...",
    styles: customStyle
});

5. Testing Your Web Part

After implementing Fluent UI components, you can test your web part in the local workbench.

1. Run your Gulp server:

   gulp serve

2. Open the local workbench in your browser:

   https://localhost:4321/temp/workbench.html

3. Add your web part to the page and interact with it to see how it functions.

6. Conclusion

You have successfully integrated Fluent UI components into your SPFx web part, enhancing the user interface with professional-looking elements. With Fluent UI, you can create visually appealing and accessible web parts that align with Microsoft’s design guidelines. As you continue your SPFx journey, explore more Fluent UI components and their customization options to further enrich your applications.