Mastering Fluent UI for SharePoint Framework (SPFx) Development

In this third installment of the series, we will dive into Fluent UI and its powerful controls for creating polished, responsive, and modern user interfaces within SharePoint Framework (SPFx) solutions. Fluent UI, developed by Microsoft, is the preferred choice for building experiences that integrate seamlessly into the Microsoft ecosystem.

If you’re building web parts or extensions for SharePoint Online, using Fluent UI ensures consistency in design and accessibility while speeding up development with reusable, customizable components.

What is Fluent UI?

Fluent UI is an open-source collection of reusable components, styles, and design guidelines that ensure consistency in the user experience across Microsoft’s platforms. It replaces Office UI Fabric, Microsoft’s previous UI framework. Fluent UI offers a robust set of React components that you can use to build accessible, responsive, and aesthetically pleasing interfaces for your SharePoint applications.

The library includes a wide range of controls such as:

• Buttons
• Text inputs
• Dialogs and panels
• Dropdowns and lists
• Grids and tables
• Charts and graphs

Using Fluent UI in SPFx projects allows you to create web parts that not only follow Microsoft’s design guidelines but also integrate seamlessly with the overall SharePoint and Office 365 experience.

Setting Up Fluent UI in SPFx

To use Fluent UI in your SPFx solution, you’ll need to install the relevant package and import the components you need. Follow these steps to get started.

1. Install Fluent UI

Navigate to your SPFx project directory and run the following command to install Fluent UI:

npm install @fluentui/react --save

2. Import Fluent UI Components

Once installed, you can import the specific Fluent UI components you want to use in your web part. For example, if you want to use a Button and TextField, import them into your web part’s React component:

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

3. Basic Usage Example

Here’s a simple example of using a Fluent UI TextField and PrimaryButton within your SPFx web part:

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

export default class MyFluentUiWebPart extends React.Component<{}, {}> {
  public render(): React.ReactElement<{}> {
    return (
      <div>
        <TextField label="Enter your name" />
        <PrimaryButton text="Submit" />
      </div>
    );
  }
}

This example renders a text input and a button, which are fully styled according to the Fluent UI guidelines.

Common Fluent UI Controls for SPFx

Let’s explore some of the most commonly used Fluent UI controls in SPFx development and how to leverage them to create rich user interfaces.

1. Buttons

Fluent UI provides several types of buttons, including PrimaryButton, DefaultButton, and IconButton. Here’s how to use a PrimaryButton:

<PrimaryButton text="Save" onClick={this._saveItem} />

You can customize buttons by passing different properties such as text, iconProps, and disabled.

2. TextField

The TextField control is used to capture user input. You can use it to create text boxes, password fields, and multiline inputs.

<TextField label="Username" placeholder="Enter your username" />

You can also control the field’s state, such as its value and whether it’s disabled or required.

3. Dropdown

The Dropdown control allows users to select from a list of options:

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

const options: IDropdownOption[] = [
  { key: 'A', text: 'Option A' },
  { key: 'B', text: 'Option B' },
  { key: 'C', text: 'Option C' }
];

<Dropdown
  placeholder="Select an option"
  label="Choose an option"
  options={options}
/>

The Dropdown is a versatile control that supports multiple selections, search, and dynamic loading of options.

4. Dialog

The Dialog control is perfect for displaying modals or popup windows to gather user input or show information:

import { Dialog, DialogType, DialogFooter } from '@fluentui/react';
import { PrimaryButton, DefaultButton } from '@fluentui/react';

<Dialog
  hidden={false}
  onDismiss={this._closeDialog}
  dialogContentProps={{
    type: DialogType.normal,
    title: 'Are you sure?',
    subText: 'Do you want to proceed with this action?'
  }}
  modalProps={{
    isBlocking: false
  }}
>
  <DialogFooter>
    <PrimaryButton onClick={this._confirmAction} text="Yes" />
    <DefaultButton onClick={this._closeDialog} text="No" />
  </DialogFooter>
</Dialog>

You can use Dialog to confirm actions or display important information to the user.

Advanced Customization with Fluent UI

Fluent UI components are highly customizable. You can pass custom styles and themes to control the appearance of individual components or the entire application.

1. Customizing Component Styles

You can modify the styles of individual components using the styles prop. For example, to change the color of a PrimaryButton:

<PrimaryButton
  text="Submit"
  styles={{ root: { backgroundColor: 'green' } }}
/>

This overrides the default button styles, changing its background color to green.

2. Theming Your Application

Fluent UI supports theming, allowing you to define a custom theme and apply it across your entire SPFx solution. First, import the createTheme function:

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

Next, create a custom theme and wrap your application in the ThemeProvider:

const myTheme = createTheme({
  palette: {
    themePrimary: '#0078d4',
    themeLighterAlt: '#eff6fc',
    themeLighter: '#deecf9',
    themeLight: '#c7e0f4',
    themeTertiary: '#71afe5',
    themeSecondary: '#2b88d8',
    themeDarkAlt: '#106ebe',
    themeDark: '#005a9e',
    themeDarker: '#004578',
    neutralLighterAlt: '#faf9f8',
    neutralLighter: '#f3f2f1',
    neutralLight: '#edebe9',
    neutralQuaternaryAlt: '#e1dfdd',
    neutralQuaternary: '#d0d0d0',
    neutralTertiaryAlt: '#c8c6c4',
    neutralTertiary: '#a19f9d',
    neutralSecondary: '#605e5c',
    neutralPrimaryAlt: '#3b3a39',
    neutralPrimary: '#323130',
    neutralDark: '#201f1e',
    black: '#000000',
    white: '#ffffff',
  },
});

<ThemeProvider theme={myTheme}>
  <YourComponent />
</ThemeProvider>

This applies the custom theme to your entire application, changing the colors and styles of Fluent UI components to match the specified palette.

Best Practices with Fluent UI in SPFx

To make the most of Fluent UI, consider the following best practices:

1. Consistency: Use Fluent UI components to ensure that your web parts and applications follow Microsoft’s design language, providing a consistent user experience across SharePoint and Office 365.
2. Accessibility: Fluent UI is built with accessibility in mind. Ensure that your components are properly labeled and navigable using keyboard and screen readers.
3. Performance: While Fluent UI offers rich functionality, be mindful of performance when rendering large lists of controls or complex UI elements. Use pagination, virtualization, and lazy loading when appropriate.
4. Customization: Fluent UI allows you to customize individual components or apply a global theme. Use this capability to align your application with your organization’s branding while maintaining consistency with SharePoint’s overall look and feel.

Conclusion

Fluent UI is an essential tool for any SPFx developer looking to build modern, responsive, and accessible user interfaces for SharePoint solutions. With a rich set of components and flexible customization options, Fluent UI empowers developers to create UIs that look and feel like native Microsoft applications.

In the next article of this series, we will focus on advanced web part development using SPFx, diving deeper into complex interactions between Fluent UI components, data binding, and optimizing performance for large SharePoint environments.

Stay tuned as we continue this journey into mastering SPFx development with Fluent UI and PnP.