Creating an SPFx Web Part with Fluent UI’s DetailsList Component

In this article, we will break down a SharePoint Framework (SPFx) web part that utilizes Fluent UI for rendering a DetailsList component. The DetailsList is a powerful control to display large datasets in a table format. We’ll explain the functions and methods in detail so you can understand how each part works.

https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist

1. Introduction

Fluent UI is a front-end framework from Microsoft for building web experiences in Office 365 and SharePoint environments. In this article, we integrate Fluent UI’s DetailsList component into an SPFx web part to render a list of items in a tabular format. The DetailsList control is ideal for handling large sets of data, such as SharePoint lists, due to its performance and extensive customization options.

2. Understanding SPFx and Fluent UI

SPFx (SharePoint Framework) is the development framework used to build client-side web parts that run inside SharePoint Online or on-premises SharePoint servers. SPFx web parts can use modern JavaScript libraries such as React, Angular, or Fluent UI.

Fluent UI provides a consistent design language for building applications that blend seamlessly into the Microsoft ecosystem. It includes ready-to-use components like buttons, text fields, and lists, which we can easily integrate into an SPFx web part.

In this tutorial, we are focusing on using React with SPFx and integrating Fluent UI’s DetailsList.

3. Overview of the Main Code

We’ll start by providing an overview of the code. Here’s the primary structure of the SPFx web part that will render a Fluent UI DetailsList component:

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import { IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import * as strings from 'DetailsList500ItensWebPartStrings';
import { DetailsListDocumentsExample } from './components/DetailsList500Itens';
import { IDetailsList500ItensProps } from './components/IDetailsList500ItensProps';

export interface IDetailsList500ItensWebPartProps {
  description: string;
}

export default class DetailsList500ItensWebPart extends BaseClientSideWebPart<IDetailsList500ItensWebPartProps> {

  public render(): void {
    const element: React.ReactElement<IDetailsList500ItensProps> = React.createElement(
      DetailsListDocumentsExample,
      {}
    );
    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

This code defines the structure of an SPFx web part that renders a React component using Fluent UI’s DetailsList. Let’s break down each part.

4. Detailed Breakdown of Functions and Methods

1. `render()` Method

public render(): void {
  const element: React.ReactElement<IDetailsList500ItensProps> = React.createElement(
    DetailsListDocumentsExample,
    {}
  );
  ReactDom.render(element, this.domElement);
}

Purpose: This method is responsible for rendering the React component into the web part’s DOM.
React.createElement: Creates a React element (in this case, DetailsListDocumentsExample) to be rendered. This component represents the DetailsList UI.
ReactDom.render: Renders the created React element into the web part’s DOM element (this.domElement). This function attaches the rendered UI to the HTML page.

In essence, this method instantiates the main DetailsListDocumentsExample component and injects it into the page.

2. `onDispose()` Method

protected onDispose(): void {
  ReactDom.unmountComponentAtNode(this.domElement);
}

Purpose: This method ensures that the component is properly removed from the DOM when the web part is disposed of.
ReactDom.unmountComponentAtNode: This function unmounts the React component from the DOM. It’s important for memory management, preventing potential memory leaks by cleaning up the component when it’s no longer needed.

Proper disposal is crucial in long-lived web applications to avoid performance issues over time.

3. `get dataVersion()` Method

protected get dataVersion(): Version {
  return Version.parse('1.0');
}

Purpose: Defines the data version for the web part.
Version.parse: Parses a string version number (‘1.0’) and returns a Version object.

This method helps to maintain data compatibility when the web part evolves. For instance, if new features or breaking changes are introduced, the version can be updated to ensure that older data formats are handled appropriately.

4. `getPropertyPaneConfiguration()` Method

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: { description: strings.PropertyPaneDescription },
        groups: [
          {
            groupName: strings.BasicGroupName,
            groupFields: [
              PropertyPaneTextField('description', { label: strings.DescriptionFieldLabel })
            ]
          }
        ]
      }
    ]
  };
}

Purpose: This method defines the configuration for the web part’s property pane, allowing users to customize the web part via the UI.
PropertyPaneTextField: Adds a text field to the property pane where users can input a description for the web part.

This configuration is important for making web parts customizable by end-users without modifying the underlying code. The property pane enables users to adjust settings like text, URLs, or any other customizable parameters.

strings.PropertyPaneDescription: This is a localized string used to display a description for the property pane. It ensures that descriptions and labels are easy to change for different languages or environments.
PropertyPaneTextField: This creates a text field inside the property pane, allowing users to enter values (e.g., the web part description).

5. Conclusion

In this article, we’ve covered a detailed breakdown of the SPFx web part code that integrates Fluent UI’s DetailsList component. Each method in the web part plays an essential role, from rendering the component to providing customization options through the property pane.

By understanding the flow and functionality of this code, developers can modify or extend the web part to suit various scenarios, such as displaying custom data, handling large lists, and ensuring efficient memory management.

6. Full Source Code

Here’s the full source code for the web part discussed in this article:

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import { IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import * as strings from 'DetailsList500ItensWebPartStrings';
import { DetailsListDocumentsExample } from './components/DetailsList500Itens';
import { IDetailsList500ItensProps } from './components/IDetailsList500ItensProps';

export interface IDetailsList500ItensWebPartProps {
  description: string;
}

export default class DetailsList500ItensWebPart extends BaseClientSideWebPart<IDetailsList500ItensWebPartProps> {

  public render(): void {
    const element: React.ReactElement<IDetailsList500ItensProps> = React.createElement(
      DetailsListDocumentsExample,
      {}
    );
    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

This example is a foundational structure you can build on to create more complex web parts that use Fluent UI and React in a SharePoint environment.

https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist

edvaldo b. guimarães filho

Creating an SPFx Web Part with Fluent UI’s DetailsList Component