Combine Office UI Fabric with SharePoint

1. ERIC OVERFIELD | PixelMill
Microsoft MVP & RD
USE OFFICE UI FABRIC
TO BUILD BEAUTY
WITH SHAREPOINT
http://pxml.ly/EO-Office-UI-Fabric

2. ERIC OVERFIELD
President & Co-Founder of PixelMill
Microsoft MVP, Office Servers & Services
Microsoft Regional Director
Published SharePoint Author
SharePoint Community Organizer & Contributor @ericoverfield
ericoverfield.com

3. PixelMill is a modern SharePoint Design Agency based in Northern California. On the forefront of
web design trends since 1998, PixelMill provides innovative collaboration portals to enhance the
user adoption of SharePoint intranets, extranets, and public facing sites.
PIXELMILL
@pixelmillteam
pixelmill.com

4. 1. Office UI Fabric Overview
2. Included UI Fabric in Projects
3. Utilizing and Extending UI Fabric
4. UI Fabric and the SharePoint Framework
OVERVIEW

5. Office UI Fabric
In a Nutshell

6. @ericoverfieldericoverfield.com
Office UI Fabric
• A framework for building custom Office 365 / SharePoint front-end experiences
• Open source: https://github.com/OfficeDev/office-ui-fabric-core
• https://dev.office.com/fabric
• Primary pillars
• Core: Styles / CSS
• JavaScript: Interactions
• React: UI integration
• AngularJS: open source project
OFFICE UI FABRIC

7. @ericoverfieldericoverfield.com
Office UI Fabric
• Styles
• Typography - Segoe UI Font
• Color palette
• Responsive grid
• Animations
• Icons
• Office’s official product icons
• Product and document symbols
OFFICE UI FABRIC – WHAT WE GET
• Components
• Navigation
• Input containers
• Content blocks
• People picker, persona card and more

8. Why Office UI Fabric

9. @ericoverfieldericoverfield.com
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
WHY OFFICE UI FABRIC

10. Demo
OFFICE UI FABRIC IN ACTION

11. @ericoverfieldericoverfield.com
Office UI Fabric comes in different flavors
• 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
OFFICE UI FABRIC – CHOOSE THE RIGHT FLAVOR

12. @ericoverfieldericoverfield.com
Office UI Fabric Core – Styles and components
• The starting place for utilizing the core design
OFFICE UI FABRIC CORE
Styles
• Animations
• Brand icons
• Colors
• Icons
• Layout
• Localization
• Typography
• Utilities

13. @ericoverfieldericoverfield.com
Icons
• <i class="ms-Icon ms-Icon--Mail" aria-hidden="true"></i>
Layout
• Grids – responsive
Animations
• <div class="ms-u-slideRightIn10">This content will slide in.</div>
OFFICE UI FABRIC CORE - EXAMPLES

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

15. @ericoverfieldericoverfield.com
Breadcrumbs
OFFICE UI FABRIC JS - EXAMPLE

16. ADDING OFFICE UI FABRIC
TO YOUR NEXT PROJECT

17. @ericoverfieldericoverfield.com
OFFICE UI FABRIC INTEGRATION METHODS
Using Office UI Fabric
• Simplest method to connect to Fabric – call Fabric CSS / JS
• <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.min.css"
/>
• <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-
js/1.2.0/css/fabric.components.min.css" />
• <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/js/fabric.min.js"></script>
• If you are using NodeJS:
• npm --save install office-ui-fabric office-ui-fabric-js office-ui-fabric-react
• Then link in your source
• Download the source and include in toolchain
• https://github.com/OfficeDev/office-ui-fabric-core
• https://github.com/OfficeDev/office-ui-fabric-js
• https://github.com/OfficeDev/office-ui-fabric-react
• Update gulpfile.js to include components

18. @ericoverfieldericoverfield.com
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
• SharePoint Framework includes pre-integration

19. Demo
INCLUDE OFFICE UI FABRIC
IN TOOLCHAIN

20. OFFICE UI FABRIC REACT

21. @ericoverfieldericoverfield.com
Office UI Fabric React
• Office UI Fabric pre-integrated with React
• Community project existing for combining with AngularJS
• Native to SharePoint Framework
• Pre-included in yeoman template, no need for special tricks
• Where team appears to be spending effort
• i.e. Fabric React more robust than Fabric JS
OFFICE UI FABRIC REACT

22. Demo
OFFICE UI FABRIC REACT AND
THE SHAREPOINT FRAMEWORK

23. MAKE OFFICE UI FABRIC
YOUR OWN

24. 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 often though, be mindful of customizations
• May lose custom code if not careful with update
EXTEND THE UI FABRIC

25. Demo
EXTEND THE UI FABRIC

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

27. REVIEW
1. Office UI Fabric Overview
2. Included UI Fabric in Projects
3. Utilizing and Extending UI Fabric
4. UI Fabric and the SharePoint Framework

28. RESOURCES

29. RESOURCES
• Office UI Fabric
https://dev.office.com/fabric
• Office UI Fabric JS
https://dev.office.com/fabric-js/GetStarted/GetStarted.html
• GitHub: Office UI Fabric Core
https://github.com/OfficeDev/office-ui-fabric-core
• GitHub: Office UI Fabric React
https://github.com/OfficeDev/office-ui-fabric-react
• GitHub: Office UI Fabric JS
https://github.com/OfficeDev/office-ui-fabric-js
• React Quickstart
https://facebook.github.io/react/tutorial/tutorial.html
• Presentation Source code
https://github.com/eoverfield/SP-Office-UI-Fabric
• Provisioning with PnP PowerShell
https://www.youtube.com/watch?v=h9iZpK_6iG4

30. THANK YOU
USE OFFICE UI FABRIC
TO BUILD BEAUTY
WITH SHAREPOINT