Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit...
Transcript of Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit...
![Page 1: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/1.jpg)
![Page 2: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/2.jpg)
Agenda
•What’s new and coming
•Component Libraries that make you look good
• Extensions to save you time
•Other cool things
![Page 3: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/3.jpg)
What’s New and comming
![Page 4: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/4.jpg)
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
![Page 5: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/5.jpg)
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
![Page 6: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/6.jpg)
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
![Page 7: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/7.jpg)
Component Libraries that make you look good
![Page 8: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/8.jpg)
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
![Page 9: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/9.jpg)
Show and Tell
![Page 10: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/10.jpg)
Reusable React controls that can be used in SharePoint Framework (SPFx) solutions
https://sharepoint.github.io/sp-dev-fx-controls-react/
![Page 11: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/11.jpg)
FileTypeIcon
![Page 12: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/12.jpg)
Placeholder control
![Page 13: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/13.jpg)
SecurityTrimmedControl
Show content to people who have the permissions
![Page 14: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/14.jpg)
TaxonomyPicker
![Page 15: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/15.jpg)
People Picker
![Page 16: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/16.jpg)
Other PnP SPFx Controls
•List Picker
•List View
•WebPartTitle
•IFrameDialog
![Page 17: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/17.jpg)
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/
![Page 18: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/18.jpg)
DEMO
![Page 19: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/19.jpg)
Extensions to save you time
![Page 20: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/20.jpg)
Visual Studio Code Extensions
Rencore Deploy SPFx Package
Rencore SPFx Script Check
Rencore tenant-wide SPFx Extension deployment information
![Page 21: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/21.jpg)
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
![Page 22: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/22.jpg)
Chrome Extensions
![Page 23: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/23.jpg)
DEMO
![Page 24: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/24.jpg)
Other Cool Things
![Page 25: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/25.jpg)
Webpack-bundle-analyzer
Consider calling your libraries externally. Every webpart has its own bundle.
![Page 26: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/26.jpg)
Start Looking at Containers
![Page 27: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/27.jpg)
Office 365 CLI
![Page 28: Agenda - DQCOffice Fabric UI •The official front-end framework for building experiences that fit seamlessly into Office and Office 365 build with React • Styles • Responsive](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04470a7e708231d40d2f24/html5/thumbnails/28.jpg)
Thank You