SharePoint Framework Extensions Future of SharePoint Development Alex Terentiev

About Myself 10 years of experience with SharePoint Leading development of multiple SharePoint products sold worldwide Expert in Front-end development and modern web development toolchain Regular contributor to SharePoint Patterns and Practices Awarded with 1st prize award during invite-only SharePoint Dev Kitchen March 2017 event @alexaterentiev https://tricky-sharepoint.blogspot.com/ https://github.com/AJIXuMuK https://www.linkedin.com/in/alekseiterentiev/

Agenda What is SharePoint Framework? SharePoint Framework Development Toolchain SharePoint Framework Extensions Overview SharePoint Framework Extensions Demos SharePoint Framework-related Recap of MS Ignite

What is SharePoint Framework (SPFx)? SharePoint Framework Development Toolchain SharePoint Framework Extensions Overview SharePoint Framework Extensions Demos SharePoint Framework-related Recap of MS Ignite

What is SharePoint Framework (SPFx)? The SharePoint Framework (SPFx) is a page and web part model for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling. Key Features: Runs in the context of the current user and connection in the browser It's framework agnostic The toolchain is based on common open source client development tools The controls are rendered in the normal page DOM Performance is reliable The controls are responsive and accessible by nature SPFx web parts can be added to both classic and modern pages Enables the developer to access page lifecycle

SPFx Security Considerations Code is executed in browser and under current user context – no elevated privileges or any other security concerns SPFx solution is a package that should be deployed to the App Catalog and approved by tenant administrator All SPFx assets (JavaScript, images, configuration files) can be hosted on tenant-scoped CDN (Office 365 CDN)

SPFx Development Toolchain What is SharePoint Framework? SharePoint Framework Development Toolchain SharePoint Framework Extensions Overview SharePoint Framework Extensions Demos SharePoint Framework-related Recap of MS Ignite

SPFx Development Toolchain MS Build IIS Express Project Templates Typed superset of JavaScript that compiles to plain JavaScript Package manager to reference dependencies Environment for hosting and serving JavaScript code. Templates engine Task runner and module bundler to compile and package solutions

SPFx Development: How to Sart? Create Office 365 Tenant (Recommendation: Office 365 Enterprise E3 Developer subscription tenant) Set up development environment: Set up local development environment Use Docker Image by Waldek Mastykarz (https://goo.gl/fzNV7P)

SPFx Extensions Overview What is SharePoint Framework? SharePoint Framework Development Toolchain SharePoint Framework Extensions Overview SharePoint Framework Extensions Demos SharePoint Framework-related Recap of MS Ignite

SPFx Extensions Development Flow Install SPFx Templates (generator) Compile, Bundle Package Create Project from Template Test Deploy to Storage Reference Additional Libraries Ready to Ship? Yes Implement Custom Code Install to App Catalog and on the Site No

SPFx Extensions: Application Customizer Purpose: Inject custom JavaScript on the page Insert custom HTML to well-known locations on the page - Placeholders Parallel with classic SharePoint Dev: ScriptLink Custom Action Use case examples: Notification banners Custom footers Pop up messages

Shortcut to set unique permissions SPFx Extensions: Command Set Purpose: Insert custom commands to Lists’ command bar Insert custom commands to List Items’ context menu (ECB) Parallel with classic SharePoint Dev: Ribbon and ECB Custom Actions Use case examples: Shortcut to set unique permissions Clone selected items Email links to documents

SPFx Extensions: Field Customizer Purpose: Provide custom rendering for each cell of the column Parallel with classic SharePoint Dev: Field JSLink Use case examples: Color-coding SSN-masking Inline editing controls

SPFx Extensions: Applying Feature Framework CSOM/JSOM PowerShell

SPFx Extension Demos What is SharePoint Framework? SharePoint Framework Development Toolchain SharePoint Framework Extensions Overview SharePoint Framework Extensions Demos SharePoint Framework-related Recap of MS Ignite

MS Ignite Recap Microsoft Ignite What is SharePoint Framework? September 25 – 29, 2017, Orlando, FL MS Ignite Recap What is SharePoint Framework? SharePoint Framework Development Toolchain SharePoint Framework Extensions Overview SharePoint Framework Extensions Demos SharePoint Framework-related Recap of MS Ignite

MS Ignite Recap SPFx Extensions are in GA – Released SharePoint 2016 Feature Pack 2 with SPFx Web Parts support – Released Tenant-scope deployment of SPFx solutions – Released SPFx tenant properties (tenant property bag) – First Release Site Collection app catalog – Coming soon Permissions scopes & 3d party Web API access management – Coming soon ALM APIs for SPFx solutions – Coming soon SharePoint PnP Reusable Controls – Developer Preview SharePoint PnP Community Solutions – Developer Preview More information about Ignite announcements can be found here: https://tricky-sharepoint.blogspot.com/2017/10/microsoft-ignite-2017-recap-subjective.html

Resources Documentation Updates and Feedback https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview - main documentation Documentation https://github.com/SharePoint/sp-dev-docs/wiki - Wiki Updates and Feedback Follow @SharePoint and @OfficeDev on Twitter http://dev.office.com/blogs - Office Development Blog https://github.com/SharePoint/sp-dev-docs/issues - Repository for issues and questions https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform - features/improvements requests Office Dev Patterns & Practices https://dev.office.com/patterns-and-practices - entry point to all SharePoint PnP resources GitHub https://github.com/SharePoint/sp-dev-fx-webparts - SPFx Web Parts repository https://github.com/SharePoint/sp-dev-fx-extensions - SPFx Extensions repository https://techcommunity.microsoft.com/t5/SharePoint-Blog/bg-p/SPBlog - The SharePoint Community Blog

Q&A

Alex Terentiev @alexaterentiev https://tricky-sharepoint.blogspot.com/