Using Fluent UI to Build Responsive SPFx Web Parts

In the fifth part of our SPFx development series, we delve into Fluent UI, a robust set of UI controls developed by Microsoft, which is designed to create seamless and responsive user experiences in SharePoint and Microsoft 365 applications. Fluent UI integrates deeply with SharePoint, offering a consistent look and feel, and is ideal for building highly customized SPFx web parts with modern UI components.

This article will provide an overview of Fluent UI and how to use its controls to build complex, responsive, and accessible web parts in SPFx projects.

What is Fluent UI?

Fluent UI is a design system and collection of reusable UI controls, built by Microsoft, that can be used in web, desktop, and mobile applications. It provides a modern, fluent, and responsive interface, ensuring your applications look and function well across different platforms and devices.

Fluent UI was formerly known as Office UI Fabric, and it is tightly integrated with the Microsoft ecosystem, making it the go-to UI framework for developing SharePoint web parts.

Some key features of Fluent UI include:

Responsive design: Fluent UI controls automatically adjust to various screen sizes and device types.
Accessibility: The controls are built with accessibility in mind, following the latest standards to ensure a seamless experience for all users.
Customization: Fluent UI offers extensive theming and customization options, allowing developers to adapt the UI to their specific needs.

Getting Started with Fluent UI in SPFx

Before using Fluent UI in your SPFx projects, you’ll need to install the necessary packages. Fluent UI is available as a set of React components, so it integrates seamlessly into SPFx projects that use React.

1. Install Fluent UI

First, install Fluent UI packages via npm:

npm install @fluentui/react --save

2. Importing Fluent UI Components

Once installed, you can begin using Fluent UI components by importing them into your React web part.

For example, to use a PrimaryButton and TextField, import them as follows:

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

You can now use these components in your SPFx web part like any other React component.

Using Fluent UI Controls

Fluent UI offers a wide range of controls, including buttons, text fields, dialogs, dropdowns, and more. Below are examples of how to use some of the most common Fluent UI controls in your SPFx web parts.

1. Primary Button

The PrimaryButton control is used to represent the main action a user can take on a page or form.

<PrimaryButton 
  text="Click me" 
  onClick={() => alert("Button clicked!")} 
/>

2. Text Field

The TextField control is used for input fields in forms. It supports various types of input, including multiline and password fields.

<TextField 
  label="Enter your name" 
  placeholder="John Doe" 
  onChange={(e, value) => console.log(value)} 
/>

3. Dropdown

The Dropdown control provides a list of selectable options.

<Dropdown 
  label="Select an option" 
  options={[
    { key: 'option1', text: 'Option 1' },
    { key: 'option2', text: 'Option 2' },
    { key: 'option3', text: 'Option 3' }
  ]}
  onChange={(e, option) => console.log(option?.text)} 
/>

4. Dialog

The Dialog control is useful for displaying modal pop-ups or confirmation dialogs.

<Dialog
  hidden={false}
  onDismiss={() => console.log('Dialog dismissed')}
  dialogContentProps={{
    title: 'Confirmation',
    subText: 'Are you sure you want to continue?'
  }}
>
  <DialogFooter>
    <PrimaryButton onClick={() => console.log('Confirmed')} text="Yes" />
    <DefaultButton onClick={() => console.log('Canceled')} text="No" />
  </DialogFooter>
</Dialog>

5. Responsive Grid Layout

Fluent UI’s Stack component is a powerful tool for building responsive layouts. It simplifies flexbox-based layout creation, ensuring your components adapt smoothly to different screen sizes.

<Stack horizontal tokens={{ childrenGap: 10 }} wrap>
  <Stack.Item grow>
    <PrimaryButton text="Button 1" />
  </Stack.Item>
  <Stack.Item grow>
    <PrimaryButton text="Button 2" />
  </Stack.Item>
  <Stack.Item grow>
    <PrimaryButton text="Button 3" />
  </Stack.Item>
</Stack>

In this example, the Stack component ensures the buttons are laid out in a horizontal row with equal spacing, and they wrap to a new row if the screen width becomes too narrow.

Customizing Fluent UI with Themes

Fluent UI allows you to customize the look and feel of your controls by using themes. This is particularly useful for aligning your web part’s UI with your organization’s branding.

1. Applying a Theme

You can use the ThemeProvider component to apply a custom theme to your entire web part:

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

const customTheme = 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={customTheme}>
  <PrimaryButton text="Themed Button" />
</ThemeProvider>

In this example, the customTheme object defines a set of colors that will be applied to all Fluent UI controls within the ThemeProvider.

2. Using Fluent UI Icons

Fluent UI also offers a comprehensive set of icons that you can easily integrate into your web parts. For example, to display an icon alongside a button:

import { Icon } from '@fluentui/react';

<PrimaryButton 
  text="Settings"
  iconProps={{ iconName: 'Settings' }} 
/>

You can browse the full list of available Fluent UI icons on Microsoft’s documentation site.

Best Practices for Using Fluent UI in SPFx

When building web parts with Fluent UI, consider the following best practices:

Accessibility: Fluent UI controls are built with accessibility in mind, but you should still test your web parts using screen readers and other accessibility tools to ensure a fully accessible experience.
Consistency: Fluent UI ensures your web parts follow Microsoft’s design guidelines, but if you customize the theme or layout, make sure it remains consistent across your entire application.
Performance: Fluent UI is optimized for performance, but always consider using lazy loading techniques for components that are not immediately visible to users, especially when building large, complex SPFx solutions.
Responsiveness: Use Fluent UI’s layout components, such as Stack, to create responsive web parts that look great on both desktop and mobile devices.

Conclusion

Fluent UI is an indispensable tool for developing modern, responsive, and accessible SharePoint Framework web parts. With a wide array of controls and customization options, Fluent UI enables you to create sophisticated user interfaces that align with your organization’s branding while maintaining a consistent user experience across Microsoft 365 applications.

In the next article, we’ll explore Advanced PnP Provisioning Techniques, where we’ll show how to automate the creation of SharePoint sites and configurations using PnP provisioning templates.

Stay tuned for more in-depth guides on mastering SPFx development with Fluent UI and PnP.

edvaldo b. guimarães filho

Using Fluent UI to Build Responsive SPFx Web Parts