agenda - dqcoffice fabric ui •the official front-end framework for building experiences that fit...
TRANSCRIPT
Agenda
•What’s new and coming
•Component Libraries that make you look good
• Extensions to save you time
•Other cool things
What’s New and comming
SPFx 1.6
• Connect to secured AAD protected resources using AADHttpClient
• Connect to the graph using MSGraphClient
• Tenant Wide Deployment of extensions
• sp-dialog Updates
SPFx 1.7
• React 16• Domain-isolated Web Parts• Dynamic Data (GA)• List Subscriptions (socket.io)• SPFx Components in Teams• Provider Hosted Solutions• Application Pages (similar to on-prem application pages)
Related:• Support for SharePoint 2019 in October
SPFx RoadMap
• More Placeholders• Content Header
• Content Footer
• Navigation
• Search
• "Citizen developer" model for lightweight development
• Better Approval Experience
• Workbench 2.0 (Will work with extensions)
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/roadmap
Component Libraries that make you look good
Office Fabric UI
• The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React
• Styles• Responsive Framework• Typography• Animations• Icons• More
• Components• Basic Inputs• Navigation• Content• Pickers• Progress & Validation• More
https://developer.microsoft.com/en-us/fabric
Show and Tell
Reusable React controls that can be used in SharePoint Framework (SPFx) solutions
https://sharepoint.github.io/sp-dev-fx-controls-react/
FileTypeIcon
Placeholder control
SecurityTrimmedControl
Show content to people who have the permissions
TaxonomyPicker
People Picker
Other PnP SPFx Controls
•List Picker
•List View
•WebPartTitle
•IFrameDialog
Theres More – PnP SPFx Property Controls
• CodeEditor (Edit html code)
• CollectionData
• ColorPicker
• TimePicker
• ListPicker
• MultiSelect
• Number
• Order
• PeoplePicker
• SpinButton
• SwatchColorPicker
• TermPicker
• Callouts
https://sharepoint.github.io/sp-dev-fx-property-controls/
DEMO
Extensions to save you time
Visual Studio Code Extensions
Rencore Deploy SPFx Package
Rencore SPFx Script Check
Rencore tenant-wide SPFx Extension deployment information
Chrome Extensions
• Script Links
• Edit Files and pages
• Web Properties
• List Properties
• WebHooks
• PnP JS Console
• Search
• Graph Man
• Site Designs
• Site Scripts
• App Catalog
Chrome Extensions
DEMO
Other Cool Things
Webpack-bundle-analyzer
Consider calling your libraries externally. Every webpart has its own bundle.
Start Looking at Containers
Office 365 CLI
Thank You