In this article

In this article

This article describes how to build a simple web part that uses the DocumentCard component of Office UI Fabric React. Office UI Fabric React is the front-end framework for building experiences for Office and Office 365. Fabric React includes a robust collection of responsive, mobile-first components that make it easy for you to create web experiences by using the Office Design Language.

The following image shows a DocumentCard component created with Office UI Fabric React.

You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel:

Create a new web part project

Create a new project directory in your favorite location:

md documentcardexample-webpart

Go to the project directory:

cd documentcardexample-webpart

Make sure you have the latest version of @microsoft/generator-sharepoint installed and create a new web part by running the Yeoman SharePoint generator:

Select N to require the extension to be installed on each site explicitly when it's being used.

Select N on the question if solution contains unique permissions.

Select WebPart as the client-side component type to be created.

The next set of prompts ask for specific information about your web part:

Use DocumentCardExample for your web part name, and select Enter.

Accept the default DocumentCardExample description, and select Enter.

Select React as the framework, and select Enter.

At this point, Yeoman installs the required dependencies and scaffolds the solution files. This might take a few minutes. Yeoman scaffolds the project to include your DocumentCardExample web part as well.

Next, enter the following to open the web part project in Visual Studio Code:

code .

You now have a web part project with the React framework.

Open DocumentCardExampleWebPart.ts from the src\webparts\documentCardExample folder.

As you can see, the render method creates a react element and renders it in the web part DOM.

Add an Office UI Fabric component

The new modern experiences in SharePoint use Office UI Fabric and Office UI Fabric React as the default front-end framework for building the new experiences. As a result, SharePoint Framework ships with a default version of Office UI Fabric and Fabric React that matches the version available in SharePoint. This ensures that the web part you are building uses the right version of the Fabric styles and components when deployed to SharePoint.

Because we chose React as our framework when creating the solution, the generator installed the right version of Office UI Fabric React as well. You can directly import the Fabric components in your react components without any additional work.

Note

With the current release of the SharePoint Framework, we recommend that you use the Office UI Fabric and Fabric React that ships with the generator. We do not recommend that you update the Office UI Fabric and Fabric React packages independently because that might conflict with the already available version in SharePoint, and as a result, your web part may fail to function as expected.

To add an Office UI Fabric component

Open DocumentCardExample.tsx from the src\webparts\documentCardExample\components folder.

Add the following import statement to the top of the file to import Fabric React components that we want to use.

In this code, the DocumentCard component includes some extra sections:

DocumentCardPreview

DocumentCardTitle

DocumentCardActivity

The previewProps property includes some properties of the DocumentCardPreview.

Notice the use of the relative path with a require statement to load images. Currently, you need to perform a small configuration in the gulpfile.js to enable these images to get processed properly by webpack.

Open gulpfile.js from the root folder.

Add the following code just above the build.initialize(gulp); code line.