SharePoint document library view using Fabric React component in SPFX web part

As we know Office UI Fabric which official front-end framework is for building a user interface that fits seamlessly into SharePoint modern experience. In this article, we going to see more detail about the Details list component. Also, we are retrieving SharePoint document library data into the Details list component. Herewith you can find the complete project download link.


Creating a new SharePoint Framework extension project

The first step we have to create a new SharePoint framework extension project, I have used SharePoint Framework version 1.8.2, if you have any question regarding set-up new SharePoint framework development environment then you can refer my one of the previous article where I explained simple steps to set up a new development environment and create the new project. While creating a project in the PowerShell you must select react framework.

Important files

In the new SharePoint framework web part solution contains tons of files, understanding each file’s purpose is awesome, but in this article, we are going take look only three files, because making changes in those three files is enough

  1. src\webparts\fabricDetailsList\FabricDetailsListWebPart.ts
  2. src\webparts\fabricDetailsList\components\IFabricDetailsListProps.ts
  3. src\webparts\fabricDetailsList\components\FabricDetailsList.tsx

Web part TS file (FabricDetailsListWebPart.ts)

In this file, we just calling create react element and created element assigned to the react DOM, also we are passing web part context as props so we can access these props in while create react component.

Property file (IFabricDetailsListProps.ts)

In the props file we just created two interfaces, one is IFabricDetailsListProps will pass the props which are read-only, so we only pass a context and another one is IFabricDetailsListWebpartProps will carry all states for the react components. so, we can set and get values to the controls.

Component file (FabricDetailsList.tsx)

In this file, we do most of the things like building details list, retrieving data from the SharePoint document library and assign that data collection into the details list.

In the constructor, we retrieve the value from SharePoint and assign the value to the Fabric react details list also we can also inject props to the button click events if required.

In the render event, we are returning the HTML content for the user interface,

click below download link to access the complete project code

Sharing is caring!

If you have any questions, feel free to let me know in the comments section.
Happy coding!!!

6 thoughts on “SharePoint document library view using Fabric React component in SPFX web part

  1. i would like to thank you for this amazing job you have done thanks you so much

    may i ask you a question
    i want to put a link to download each document of the library
    i have added in the request :

    but i don’ t know how to make a button in the details list to link to another page in order to download the file

    would you mind explain this to me please ?



Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s