SharePoint Framework - Integrating Office UI Fabric

Overview

SharePoint Framework (SPFx) offers a lightweight, responsive client-side web part development for classic as well as modern SharePoint. In this article, we will explore how we can integrate the Office UI Fabric into SharePoint Framework.

The UI Challenges

In the SharePoint journey so far, we have been developing custom web parts. Developing the visual interface for each of the custom web parts has involved significant efforr from SharePoint developers as well as UX designers and UI developers to make the web part look like an integral part of the SharePoint portal. A huge amount of effort  was invested in designing the CSS classes and placing the required controls (like labels, textboxes, buttons, etc.) on the web part. This also had its own challenge to rewrite while re-branding the SharePoint portals.
Office UI Fabric handles this challenge gracefully for SharePoint developers and designers so that they can build the client side web parts which can resemble their appearance to Office 365 and provide responsiveness.

Brief information about Office UI Fabric

Office UI Fabric is an official front-end framework to build experiences that fit seamlessly in Office 365. The Office UI Fabric components are built with React JS. Microsoft uses Fabric Core and Fabric React which offers numerous components and styles. Read more about Office UI Fabric here.

Office UI Fabric for SharePoint Framework

SharePoint Framework Fabric Core npm package (@microsoft/sp-office-ui-fabric-core) is a subset of Fabric Core Styles that can be easily integrated with SharePoint Framework. Yeoman generator for SharePoint Framework (from version 1.3.4 onwards) supports Office UI Fabric by default.

To install the Fabric Core package in your existing project, use the below command.
  1. npm install @microsoft/sp-office-ui-fabric-core –save  
To use Fabric Core styles, use the below declaration
  1. @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';  
However, it is recommended to use "Office UI Fabric React" package with SharePoint Framework.

Create SPFx Solution

Open the command prompt. Create a directory for SPFx solution.
  1. md spfx-officeuifabric  
Navigate to the above-created directory.
  1. cd spfx-officeuifabric  
Run Yeoman SharePoint Generator to create the solution.
  1. yo @microsoftSharePointt  
Yeoman generator will present you with the wizard by asking questions about the solution to be created.

SharePoint Framework - Integrating Office UI Fabric 
 
Solution Name

Hit enter to have a default name (spfx-officeuifabric in this case) or type in any other name for your solution.

Selected choice - Hit enter
 
Target for component

Here, we can select the target environment where we are planning to deploy the client webpart; i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).

Selected choice - SharePoint Online only (latest)
 
Place of files

We may choose to use the same folder or create a subfolder for our solution.

Selected choice - Same folder
 
Deployment option

Selecting Y will allow the app to be deployed instantly to all sites and will be accessible everywhere.

Selected choice - N (install on each site explicitly)
 
Type of client-side component to create

We can choose to create a client-side web part or an extension. Choose a web part option.

Selected choice - WebPart
 
Web part name

Hit enter to select the default name or type in any other name.

Selected choice - OfficeUIFabricExamples
 
Web part description

Hit enter to select the default description or type in any other value.

Selected choice - Office UI Fabric Integration with SPFx
 
Framework to use

Select any JavaScript framework to develop the component. Available choices are (No JavaScript Framework, React, and Knockout)

Selected choice - React
 
Yeoman generator will perform scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.

Once the scaffolding process is completed, lock down the version of project dependencies by running the below command.
  1. npm shrinkwrap  
In the command prompt type the below command to open the solution in the code editor of your choice.
  1. code .  

Office UI Fabric Components

Office UI Fabric has the below-categorized components,

Basic Inputs
  • Button
  • Checkbox
  • ChoiceGroup
  • ComboBox
  • ContextualMenu
  • Dropdown
  • Label
  • Link
  • Rating
  • Slider
  • SpinButton
  • TextField
  • Toggle
Navigation
  • Breadcrumb
  • CommandBar
  • Nav
  • OverflowSet
  • Pivot
  • SearchBox
Content
  • ActivityItem
  • Calendar
  • DetailsList
  • Facepile
  • GroupedList
  • Icon
  • Image
  • List
  • Persona
Pickers
  • Pickers
  • ColorPicker
  • DatePicker
  • PeoplePicker
  • SwatchColorPicker
Progress & Validation
  • MessageBar
  • ProgressIndicator
  • Shimmer
  • Spinner
Surfaces
  • Callout
  • Dialog
  • DocumentCard
  • HoverCard
  • Layer
  • Modal
  • Overlay
  • Panel
  • ScrollablePane
  • TeachingBubble
  • Tooltip
  • Coachmark
Utilities
  • FocusTrapZone
  • FocusZone
  • MarqueeSelection
  • ResizeGroup
  • Selection
  • Themes

How to use Office UI Fabric Components in SPFx WebPart

  1. Navigate to Office UI Fabric Components site here.
  2. Select and expand the Category of your component.
  3. Click the component node.
  4. Below is an example of selecting a button component.

    SharePoint Framework - Integrating Office UI Fabric

  5. Alternatively, search your component from the search box.
  6. Click Variants tab to see the variations for use of the component.

    SharePoint Framework - Integrating Office UI Fabric

  7. Click “Show code” to get the code for the component.

    SharePoint Framework - Integrating Office UI Fabric

  8. Copy entire code or part of it to use in your SPFx solution.
Implement Greet Message WebPart using Office UI Fabric

Using the Office UI Fabric components, we will implement a simple web part, having the below components,
  • Textbox – Accepts user name
  • Button – with text as “Greet” on click of which will show an alert greeting the text typed in the textbox.
In the solution, add file IComponentState.ts, which will represent the state of entered username.
  1. export interface IComponentState {  
  2.     userName: string;  
  3. }  
Open OfficeUiFabricExamples.tsx under “\src\webparts\officeUiFabricExamples\components\” folder,

Import Textfield and button components,
  1. // Import Textfield component  
  2. import { TextField } from 'office-ui-fabric-react/lib/TextField';  
  3.   
  4. // Import Button component  
  5. import { IButtonProps, DefaultButton } from 'office-ui-fabric-react/lib/Button';  
Add components to Render method
  1. export default class OfficeUiFabricExamples extends React.Component<IOfficeUiFabricExamplesProps, IComponentState> {  
  2.   constructor(props: IOfficeUiFabricExamplesProps, state: IComponentState) {  
  3.     super(props);  
  4.   
  5.     this.state = ({  
  6.       userName: ''  
  7.     });  
  8.   
  9.     this._greetClicked = this._greetClicked.bind(this);  
  10.   }  
  11.   
  12.   public render(): React.ReactElement<IOfficeUiFabricExamplesProps> {  
  13.     return (  
  14.       <div className={ styles.officeUiFabricExamples }>  
  15.         <div className={ styles.container }>  
  16.           <div className={ styles.row }>  
  17.             <div className={ styles.column }>  
  18.               <div className="docs-TextFieldExample">  
  19.                 <TextField   
  20.                   required={true}   
  21.                   name="txtUserName"   
  22.                   placeholder="Your name please!"  
  23.                   value={this.state.userName}  
  24.                   onChanged={e => this.setState({ userName: e })}  
  25.                 />  
  26.   
  27.                 <DefaultButton  
  28.                   data-automation-id="greet"  
  29.                   target="_blank"  
  30.                   title="Greet the user!"  
  31.                   onClick={this._greetClicked}  
  32.                   >  
  33.                   Greet  
  34.                 </DefaultButton>  
  35.   
  36.                 <p>{this.state.userName}</p>  
  37.               </div>  
  38.             </div>  
  39.           </div>  
  40.         </div>  
  41.       </div>  
  42.     );  
  43.   }  
  44.   
  45.   private _greetClicked(): void {  
  46.     alert('Hello ' + this.state.userName);  
  47.   }    
  48. }  
Test the WebPart
  1. On the command prompt, type “gulp serve”
  2. SharePoint local workbench will open
  3. Add the web part to the page
  4. Enter text in TextBox component, click the Greet button. An alert should appear with  the value entered in the textbox.

    SharePoint Framework - Integrating Office UI Fabric 
Summary

Office UI Fabric React components help to develop robust and consistent design across SharePoint modern experiences. Office UI Fabric is available out of the box for developers in SharePoint Framework.