NET Framework, C#, Visual Studio 2017 e GitHub - SharePoint ...

Understanding SharePoint Framework Extensions Paolo Pialorsi – Senior Consultant, PiaSys.com @PaoloPia – [email protected]

http://www.piasys.com/

Thank you to our sponsors!

About me ▪ Project Manager, Consultant, Trainer ▪ About 50 Microsoft certification exams passed ▪ MCSM – Charter SharePoint ▪ MVP Office Servers 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 http://www.piasys.com/

Agenda ▪ Introducing SharePoint Framework ▪ SharePoint Framework Extensions ▪ Application Customizer ▪ List View Command Set ▪ Field Customizer

▪ SPFx Extensions Deployment ▪ Q&A

http://www.piasys.com/

Introducing SharePoint Framework http://www.piasys.com/

SharePoint Extensibility Principles ▪ To provide an Application Development Framework that aligns 1st and 3rd parties ▪ To build industry leading client side solutions On-Premises and in the Cloud ▪ Unlocking the potentials of SharePoint and the Microsoft Graph on desktops or any device http://www.piasys.com/

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 ▪ 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

http://www.piasys.com/

Building out the User Experience

Experiences

Web Parts

Add-ins

Extensions

MS Graph

Development

http://www.piasys.com/

Client side Tools

Package Deployment

CSOM SP APIs

SharePoint Framework Extensions http://www.piasys.com/

Client-Side Extensions ▪ Application Customizer

▪ Command Set

▪ Field Customizer

http://www.piasys.com/

Extensions Execution Logic SharePoint Service

http://www.piasys.com/

Extensions Execution Logic SharePoint Service

http://www.piasys.com/

Extensions Execution Logic SharePoint Service

http://www.piasys.com/

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 URL ▪ ?loadSPFX=true& debugManifestsFile=https://localhost:4321/temp/manifests.js& customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485": {"location":"ClientSideExtension.ApplicationCustomizer", "properties":{"testMessage":"Hello as property!"}}} http://www.piasys.com/

Application Customizer Provisioning

▪ Reference the elements.xml file in package-solution.json http://www.piasys.com/

DEMO Developing Application Customizers

http://www.piasys.com/

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 URL: ▪ ?loadSpfx=true& debugManifestsFile=https://localhost:4321/temp/manifests.js& customActions={"a8047e2f-30d5-40fc-b880-b2890c7c16d6": {"location":"ClientSideExtension.ListViewCommandSet.CommandBar", "properties":{"sampleTextOne":"One item is selected in the list.","sampleTextTwo":"This command is always visible."}}}

http://www.piasys.com/

Command Set Provisioning

▪ Reference the elements.xml file in package-solution.json http://www.piasys.com/

DEMO Developing List View Command Sets

http://www.piasys.com/

Field Customizer ▪ Override onRenderCell(event) method ▪ Play with event.domElement to replace/update the HTML of the cell

▪ Debug URL: ▪ ?loadSPFX=true& debugManifestsFile=https://localhost:4321/temp/manifests.js& fieldCustomizers={"Percent":{ "id":"45a1d299-990d-4917-ba62-7cb67158be16", "properties":{"sampleText":"Hello!"}}}

http://www.piasys.com/

Field Customizer Provisioning

▪ Reference the elements.xml file in package-solution.json http://www.piasys.com/

DEMO Developing Field Customizers

http://www.piasys.com/

SPFx Extensions Deployment http://www.piasys.com/

SPFx Extensions Deployment ▪ Relies on SharePoint Feature Framework for deployment ▪ or elements

▪ Tenant-wide deployment doesn’t apply Feature Framework XML ▪ Thus, to deploy SPFx Extensions you have two options ▪ Use non-tenant-wide deployed packages ▪ Use tenant-wide packages + PowerShell/CSOM/PnP to apply features

http://www.piasys.com/

Q&A http://www.piasys.com/

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/

▪ And the upcoming events: ▪ https://piasys.com/events/

http://www.piasys.com/

Thank you!

Please rate this session bit.ly/spshel2018