agenda - dqcoffice fabric ui •the official front-end framework for building experiences that fit...

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