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

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

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

Office UI Fabric in a Nutshell

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 Licensing Core: open source – MIT – free, unlimited usage Certain assets: icons and fonts subject to Asset License https://github.com/OfficeDev/office-ui-fabric-core/blob/master/LICENSE

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: https://dev.office.com/fabric#/get-started Also, could be make this more of a table or column based?

Why Office UI Fabric

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

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

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 https://dev.office.com/fabric#/get-started

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 https://dev.office.com/fabric#/get-started Styles and component and icons

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>

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

Office ui fabric JS - example Breadcrumbs

Adding office ui fabric to your next project

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 to 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

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

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

Office ui fabric react

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

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

CUSTOMIZE OFFICE UI FABRIC AND SHAREPOINT FRAMEWORK CONSIDERATIONS

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 often, be mindful of customizations May lose custom code if not careful with updates

OFFICE UI FABRIC THEME GENERATOR Create customized Office UI Fabric themes https://developer.microsoft.com/en-us/fabric#/styles/themegenerator Create custom themes for usage in projects Based on UI Styling NPM package npm install --save @uifabric/styling

OFFICE UI FABRIC THEME GENERATOR import { colorClassNames, fontClassNames } from '@uifabric/styling'; return ( <div className={`${ColorClassNames.themePrimaryBackground}`}> ... </div> );

SHAREPOINT FRAMEWORK AND UI FABRIC SharePoint Online natively includes UI Fabric Concerns exist around versioning Solution: statically link to the Fabric React components npm install --save --save-exact office-ui-fabric-react@5.6.0

SHAREPOINT FRAMEWORK AND UI FABRIC import { Button } from ‘office-ui-fabric-react/lib/Button'; return ( <div> <Button>click me</Button> </div> );

DEMO: SHAREPOINT FRAMEWORK AND THE OFFICE UI FABRIC Create the custom dialog that is fluid / centered

recommendations Learn by doing Move to React / Angular Get started now Move to React / Angular A rendering engine gets you 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

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

resources Demos

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 Office UI Fabric Theme Generator https://developer.microsoft.com/en-us/fabric#/styles/themegenerator SharePoint Framework and Office UI Fabric https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/office-ui-fabric-integration Office UI Fabric Styling https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/styling Presentation Source code https://github.com/eoverfield/SP-Office-UI-Fabric

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