SharePoint framework webpart with Office UI Fabric React component

What is Office UI Fabric and Why do I need it?

Its Microsoft’s official front end framework for building User Interface experiences for Office and Office 365. In simple terms it gives you the look and feel for your component. Moreover, they are open source, mobile responsive and reusable, no need to create from scratch just refer them in your code and start utilizing them.

Microsoft modern SharePoint out of the box webparts are made up these Office UI Fabric framework, so to maintain consistency look and feel as like Office it’s better to use these components in our custom SPFx webparts.

Find the Fabric UI reusable components like button, navigation, etc., here

In this blog we can see a sample of how to use such Office UI Fabric react component named “DocumentCard component”

Step 1: Create a basic SharePoint framework webpart

md myofficeuifabric
cd myofficeuifabric
yo @microsoft/sharepoint

Note: as this is a react fabric we need to create a webpart with “React”, so make sure you select “React” for “Which framework would you like to use” question.

So now we are ready with our basic react webpart, in next step we will learn how to add the office UI fabric code into our webpart.

Step 2: Install Office UI Fabric React in this webpart

Once the above webpart scaffolding is completed, then we can install the required Office UI Fabric React using npm. Run the below command.

npm install office-ui-fabric-react@5.132.0 --save

Note: If you have the lower version of SPFx please do an explicit version of Office UI Fabric as below. See below Issues faced heading.

Step 3:  What is different in code

Open the webpart solution project using Visual Studio Code. There is not much difference in the project folder structure even though we have opted for a React webpart, everything remains same in terms of project structure except some files.

Open the “MyofficeuifabricWebPart.ts”, we could see the additional React references added at the top of the webpart code file which is different that the default no JavaScript code

The major difference we see is the webpart render method

Leave them as it is as we don’t need them now. In react webpart under components folder there will be an additional file with “tsx” extension available, which holds the render code. In my case its “Myofficeuifabric.tsx”

Step 4: Add Office UI Fabric elements into code

Open the “Myofficeuifabric.tsx” and add the below code at the top to import “DocumentCard” office UI fabric component

import {
  DocumentCard,
  DocumentCardPreview,
  DocumentCardTitle,
  DocumentCardActivity,
  IDocumentCardPreviewProps
} from 'office-ui-fabric-react/lib/DocumentCard';

Replace the current render method with the below render method

public render(): JSX.Element {
    const previewProps: IDocumentCardPreviewProps = {
      previewImages: [
        {
          previewImageSrc: String(require('./document-preview.png')),
          iconSrc: String(require('./icon-ppt.png')),
          width: 318,
          height: 196,
          accentColor: '#ce4b1f'
        }
      ],
    };

    return (
      <DocumentCard onClickHref='http://bing.com'>
        <DocumentCardPreview { ...previewProps } />
        <DocumentCardTitle title='Revenue stream proposal fiscal year 2016 version02.pptx' />
        <DocumentCardActivity
          activity='Created Feb 23, 2016'
          people={
            [
              { name: 'Kat Larrson', profileImageSrc: String(require('./avatar-kat.png')) }
            ]
          }
        />
      </DocumentCard>
    );
  }

Next is for this webpart we have to show some images, so for that we need to make little changes in gulpfile.js from webpart root folder. Open ‘gulpfile.js’ and add the below code snippet

build.configureWebpack.mergeConfig({  
    additionalConfiguration: (generatedConfiguration) => {
        if (build.getConfig().production) {
            var basePath = build.writeManifests.taskConfig.cdnBasePath;
            if (!basePath.endsWith('/')) {
                basePath += '/';
            }
            generatedConfiguration.output.publicPath = basePath;
        }
        else {
            generatedConfiguration.output.publicPath = "/dist/";
        }
        return generatedConfiguration;
    }
});

I should be pasted just above the

build.initialize(gulp);

Then add the below 3 images into webpart components folder “src\webparts\documentCardExample\components

  • avatar-kat.png
  • icon-ppt.png
  • document-preview.png

Finally let us test our webpart by entering

Gulp serve

It’s great to see an amazing styled webpart in minutes with less effort, thanks office UI fabric team for saving our time. I have developed many webparts with worst user interface, hope this will help me to build many professional look and feel webparts for my customers.

In this webpart we have seen with sample data and images, we can later try this with dynamic SharePoint list/document library data in it.

Really cool and simple. Thanks again to Microsoft Office UI Fabric team.

Thank you for spending time in this blog.

Issues faced:

npm install –save office-ui-fabric-react

Don’t run the above, which will install the latest version of office ui fabric which caused many issues throwing error messages as below

node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(18,67)

In my case I have SPFx 1.8 version and used this command thinking that both latest would work well. Wasted 3 days to come out of those issues by uninstall/install multiple times and finally the downgrade worked

Very simple install the explicit version like “5.132.0”, so use the below instead

npm install office-ui-fabric-react@5.132.0 --save

In a SPFx react webpart “package.json” will have the dependencies section will be like this

Once after you install office UI fabric version “5.132”, it will be like this