Understanding SharePoint Framework Extensions
0 likes765 views
This document provides an overview and summary of SharePoint Framework extensions, including: - Application customizers allow customizing UI elements when placeholders change. - Command sets enable/disable commands and execute custom logic. They are available in context menus and top menus. - Field customizers override cell rendering and disposal to customize individual fields. - Extensions are deployed via elements.xml and can be deployed tenant-wide via client side component instances in SPFx 1.6. - The presentation covers the roles, types, development, and deployment of SPFx extensions.
Understanding SharePoint Framework Extensions
- 1. Understanding SharePoint Framework Extensions Paolo Pialorsi | @PaoloPia SharePoint Saturday Belgium 2018 #SPSBE
- 3. Patrick Tisseghem Founding father of BIWUG & true SharePoint master 17/10/1968 - 3/9/2008 Special Tribute Edition #SPSBE
- 4. About me • Project Manager, Consultant, Trainer • About 50 Microsoft certification exams passed • MCSM – Charter SharePoint • MVP Office Apps and Services • Office 365 Dev PnP Core Team Member • Focused on SharePoint and Office 365 since the beginning • Author of many books about XML, SOAP, .NET, LINQ, SharePoint, and Office 365 • Speaker at main IT conferences
- 5. Agenda • Understanding the role of SharePoint Framework • SharePoint Framework Extensions • Application Customizer • List View Command Set • Field Customizer • SPFx Extensions Deployment • Q&A
- 6. Understanding the role of SharePoint Framework
- 7. Web Parts Extensions Client side Tools SP APIs Package Deployment Experiences Development Building out the User Experience CSOM Add-ins MS Graph
- 8. SharePoint Framework (SPFx) • New framework to build Modern UI customizations • Built on the well-known web stack • Open model, not only for .NET/Microsoft-oriented developers • Works well on the cloud • It is available on-premises, too (SP2016 + FP2 or later) • Enterprise-ready when used with back-end services • Microsoft Graph, REST API and micro-services, Azure Functions, etc. • Not a new model, but an additional model to build UI elements for the Modern UI • We can build client-side Web Parts or client-side Extensions
- 10. Client-Side Extensions • Application Customizer • Command Set • Field Customizer
- 12. Extensions Execution Logic SharePoint Service
- 13. Extensions Execution Logic SharePoint Service
- 14. Extensions Execution Logic SharePoint Service
- 15. Application Customizer • Build custom UI elements when onInit() fires • Or when placeholders change • Use this.context.placeholderProvider to read available placeholders • Available placeholders (so far): • Top • Bottom • Debug integrated with Visual Studio Code and SPFx generator scaffolding • Config serve.json + gulp serve --config=configName
- 16. Application Customizer Provisioning • Reference the elements.xml file in package-solution.json <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <CustomAction Title="SPFxApplicationCustomizer" Location="ClientSideExtension.ApplicationCustomizer" ClientSideComponentId="46606aa6-5dd8-4792-b017-1555ec0a43a4" ClientSideComponentProperties="{"Top":"Top area of the page","Bottom": "Bottom area in the page"}"> </CustomAction> </Elements>
- 18. Command Set • Enable/Disable commands by overriding onListViewUpdated(event) method • Override onExecute(event) method and switch based on event.commandId • Available locations: • ClientSideExtension.ListViewCommandSet.ContextMenu: ECB • ClientSideExtension.ListViewCommandSet.CommandBar: Top menu • ClientSideExtension.ListViewCommandSet: Both • Debug integrated with Visual Studio Code and SPFx generator scaffolding • Config serve.json + gulp serve --config=configName
- 19. Command Set Provisioning <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <CustomAction Title="SPFxListViewCommandSet" RegistrationId="100" RegistrationType="List" Location="ClientSideExtension.ListViewCommandSet.CommandBar" ClientSideComponentId="5fc73e12-8085-4a4b-8743-f6d02ffe1240" ClientSideComponentProperties="{"sampleTextOne":"One item is selected in the list.", "sampleTextTwo":"This command is always visible."}"> </CustomAction> </Elements> • Reference the elements.xml file in package-solution.json
- 20. DEMO Developing List View Command Sets
- 21. Field Customizer • Override onRenderCell(event) method • Play with event.domElement to replace/update the HTML of the cell • Debug integrated with Visual Studio Code and SPFx generator scaffolding • Config serve.json + gulp serve --config=configName • Override onDisposeCell(event) method • To free any resources that you don’t need anymore
- 22. Field Customizer Provisioning <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <Field ID="{060E50AC-E9C1-3D3C-B1F9-DE0BCAC200F6}" Name="SPFxPercentage" DisplayName="Percentage" Type="Number" Min="0" Required="FALSE" Group="SPFx Columns" ClientSideComponentId="7e7a4262-d02b-49bf-bfcb-e6ef1716aaef"> </Field> </Elements> • Reference the elements.xml file in package-solution.json
- 25. SPFx Extensions Deployment • Relies on SharePoint Feature Framework for deployment • <CustomAction /> or <Field /> elements • Tenant-wide deployment doesn’t apply Feature Framework XML • But there is the <ClientSideComponentInstance /> element for tenant-wide extensions (SPFx 1.6) • Thus, to deploy SPFx Extensions you have two options • Use non-tenant-wide deployed packages • Use tenant-wide packages and • Tenant-wide extensions (since SPFx v. 1.6) • PowerShell • CSOM • PnP
- 26. What are tenant-wide extensions? • Extensions available across the whole tenant • Available starting from SPFx v. 1.6 • Supported for • Application Customizer • List View Command Set • Can be filtered based on target • Web template • List definition
- 27. Main steps • Create a new SPFx 1.6 project • Scaffolding will generate sample files to activate tenant-wide deployment • You can always remove them • Enable Tenant Wide Deployment (i.e. skipFeatureDeployment: true) • Develop your extensions • Deploy the .sppkg on the tenant App Catalog • Register them in the Tenant Wide Extensions list in the tenant App Catalog • Eventually filter by target WebTemplateId or ListTemplateId
- 28. DEMO Tenant-wide Extensions with SPFx 1.6
- 29. Q&A
- 30. Some shameless marketing • Follow me on Twitter: • https://www.twitter.com/PaoloPia • Subscribe to the “PiaSys Tech Bites” YouTube channel: • https://piasys.com/TechBites • Don’t miss the upcoming trainings • https://piasys.com/shop/ (New schedule for 2019 is coming soon …) • And the upcoming events: • https://piasys.com/events/
- 32. SharePoint Saturday Belgium 2018 #SPSBE