1. Use Office UI Fabric React to Build Beauty with SharePoint
Eric Overfield
Microsoft Regional Director and MVP
PixelMill

2. ERIC OVERFIELD President & Co-Founder of PixelMill
Microsoft MVP, Office Servers & Services
Microsoft Regional Director
Published SharePoint Author
SharePoint Community Organizer & Contributor
ericoverfield.com
@ericoverfield
Will make available on blog and twitter (slideshare.net), so if you remember one of those then you can always review everything we discuss

3. OVERVIEW Office UI Fabric Overview Include UI Fabric in Projects
Utilizing and Extending UI Fabric
UI Fabric and the SharePoint Framework

4. Sharepoint provisioning
DemosFocus here on provisioning SharePoint sites / assets / settings, etc

5. Office UI Fabric in a Nutshell

6. Office ui fabric
A framework for building custom Office 365 / SharePoint front-end experiences
Open source:
Primary pillars
Core: Styles / CSS
JavaScript: Interactions
React: UI Integration
AngularJS: open source project

7. Office ui fabric – what we get
Components
Navigation
Input containers
Content blocks
People picker, persona cards and more
Styles
Typography – Segoe UI Font
Color palette
Responsive grid
Animations
Icons
Office’s official product icons
Product and document symbols
Get screenshots of each from:
Also, could be make this more of a table or column based?

8. Why Office UI Fabric

9. Why Office ui fabric Why you will use Office UI Fabric
Consistency of interface with custom components
SharePoint Framework has UI Fabric built in
Allows developers to focus on functionality, not the look
Speed up the development cycle

10. DEMO: OFFICE UI FABRIC IN ACTION
Look at Fabric UI website
Primary focuses and how to use site
Look at the Office UI Fabric in action on a demo site with a few webparts on a page already styled with fabric
List view using table
Responsive grid
How about a script editor webpart that pulls in a script that does magic with handlebars.
Pull in list data
Create a form in a dialog
a navigation bar or breadcrumb

11. Office ui fabric – choose the right flavor
Fabric Core Styles
Core elements of the design language, including icons, colors, type, and grid
Fabric React
Robust, up-to-date components built with the React framework
Fabric JS
Simple, visuals-focused components that you can extend, rework, and use
Angular JS
Community-driven project to build components for Angular-based apps

12. Office ui fabric core Office UI Fabric Core – Styles and components
The starting place for utilizing the core design
Styles
Animations
Brand icons
Colors
Icons
Layout
Localization
Typography
Utilities
List of core components from
Styles and component and icons

13. Office ui fabric core - examples
Icons
<i class="ms-Icon ms-Icon--Mail" aria-hidden="true"></i>
Layout
Grids – responsive
Animation
<div class="ms-u-slideRightIn10">This content will slide in.</div>

14. Office ui fabric JS / REACT
Office UI Fabric JS – Interactions
Add UI interactions with Office UI Fabric JS
Panels, Dialogs, Callouts, and much more
Components
Breadcrumb
Button
Callout
Checkbox
ChoiceGroup
ColorPicker
CommandBar
ContextualMenu
DatePicker
DetailsList
Dialog
Overlay
Panel
Persona
Pickers
PeoplePicker
Pivot
ProgressIndicator
Rating
SearchBox
Slider
Spinner
TextField
Toggle
DocumentCard
Dropdown
Facepile
GroupedList
Image
Label
Layer
Link
List
MessageBar
Nav

15. Office ui fabric JS - example
Breadcrumbs

16. Adding office ui fabric to your next project

17. Office ui fabric integration methods
Using Office UI Fabric
Simplest method to connect to Fabric – call Fabric CSS / JS
<link rel="stylesheet" href=" />
<link rel="stylesheet" href=" />
<script src="
If you are using NodeJS
npm --save install office-ui-fabric office-ui-fabric-js office-ui-fabric-react
Then link to your source
Download the source and include in toolchain
Update gulpfile.js to include components

18. Office ui fabric integration with SharePoint
Using Office UI Fabric in SharePoint
Obtain source if including or customizing Fabric direct in project
Update the Master Page
Less ideal as custom master pages are not recommended
Alternative CSS / JavaScript Embed
Install via PnP / Feature Framework / PowerShell
Include link / script tags in custom webparts / customizations
SharePoint Framework includes pre-integration

19. DEMO: INCLUDE OFFICE UI FABRIC IN TOOLCHAIN
Look to download and include UI Fabric in toolchain of custom webpart project
Webpart may be a part of the previous demo

20. Office ui fabric react

21. Office ui fabric react Office UI Fabric React
Office UI Fabric pre-integrated with React
Community project exists for combining with AngularJS
Native to SharePoint Framework
Pre-included in yeoman template, no need for special tricks
Just “include” and go
Where Microsoft Office UI Fabric team appears to be spending effort
i.e. Fabric React more robust than Fabric JS

22. DEMO: OFFICE UI FABRIC REACT AND THE SHAREPOINT FRAMEWORK
Start up a spfx webpart (how about task list demo)
Could also use a native SP implementation using a CEWP for basic code, JS Embed for including react and rest

23. Make Office ui fabric your own

24. Extend Office ui fabric
Improve UI Fabric with your own requirements
UI Fabric built on open source tooling
NodeJS, gulp, etc
Can easily add your own components
Enhanced styles
JS Components
UI Fabric updates are often though, be mindful of customizations
May lose custom code if not careful with updates

25. DEMO: EXTEND THE UI FABRIC
Create the custom dialog that is fluid / centered

26. recommendations Learn by doing Move to React / Angular
Get started now
Move to React / Angular
A rendering engine gets to closer to SPFx
Watch for updates, they keep coming
New styles, controls and more
Look at examples for what controls are possible
You will find ideas you hadn’t considered

27. REVIEW Office UI Fabric Overview Include UI Fabric in Projects
Utilizing and Extending UI Fabric
UI Fabric and the SharePoint Framework

28. resources
Demos

29. Office UI Fabric https://dev.office.com/fabric
Office UI Fabric JS
GitHub: Office UI Fabric Core
GitHub: Office UI Fabric React
GitHub: Office UI Fabric JS
React Quickstart
Presentation Source code
Provisioning with PnP PowerShell

30. Use Office UI Fabric React to Build Beauty with SharePoint
THANK YOU