2. SPFx extensions, how does it work and how do we use it?
Martin Lingstuyl / SharePoint & Office 365 Dev
I4-YOU Business Solutions B.V.
LinkedIn https://www.linkedin.com/company/18182907/
Web https://i4-you.com
Digital meeting solution https://easy2meet.nl
Intranet Solution http://socialintranet.nu
7. SPFx extensions, how does it work and how do we use it?
Prerequisites
Prerequisite
Node with npm 3.x
Yeoman
Scaffolding tool for modern webapps
@microsoft/generator-sharepoint
Gulp
Task runner
Visual Studio Code or editor of choice
8. SPFx extensions, how does it work and how do we use it?
Getting
set up
npm install -g npm@3.x gulp yeoman @microsoft/generator-sharepoint
yo @microsoft/sharepoint
9. SPFx extensions, how does it work and how do we use it?
And this is what
it looks like
29. SPFx extensions, how does it work and how do we use it?
Debugging SPFx Extensions
• Starting serving the files with
• No workbench, use QueryStrings when loading a page:
gulp serve --nobrowser
?loadSPFX=true
&debugManifestsFile=https://localhost:4321/temp/manifests.js
&customActions={"<id>":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{}}}
&customActions={"<id>":{"location":"ClientSideExtension.ListViewCommandSet","properties":{}}}
&fieldCustomizers={"<fieldname>":{"id":"<id>","properties":{}}}
30. SPFx extensions, how does it work and how do we use it?
In our example it looks like this:
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"d3359529-
056c-4575-aab6-ba589bc70dd2":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{}},
"00ba0713-ed47-40f2-951c-d9b7dc9160c8“:
{"location":"ClientSideExtension.ListViewCommandSet"}}&fieldCustomizers={"NotificationType":{"id":"ce376f8e-
1bc2-467a-baa8-3b76783edabd","properties":{}}}
31. SPFx extensions, how does it work and how do we use it?
Things to remember
• You can combine debug QueryStrings
• Debugging typescript in Chrome dev tools => webpack
(Use Ctrl + P to find the files if you can’t)
• Use ?reset=true to stop the debugging prompts
32. Some guidance about deployment
Details at https://dev.office.com/blogs/deployment-options-for-sharepoint-framework-solutions
33. SPFx extensions, how does it work and how do we use it?
Resources
• https://aka.ms/spfx-extensions
• https://github.com/SharePoint/sp-dev-fx-extensions
• https://github.com/martinlingstuyl/Spfx-Extension-Notification-Bar-Sample
• https://dev.office.com/blogs/deployment-options-for-sharepoint-framework-solutions
• Please vote this up! New / Edit mode for the Field Customizer:
https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-
platform/suggestions/20474935-field-customizer-evolution-forms-quick-edit-mode
• Please vote this up! Additional placeholders for the Application Customizer:
https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-
platform/suggestions/19536022-extensions-application-customizer-additional-pl