SharePoint Unite 2017 Session

1. SPFx
extensions
How does it work
and how do we use it?

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

3. SPFx extensions, how does it work and how do we use it?
Sponsors

4. The
Modern
UI
Simply
awesome

5. SharePoint
Framework
Only webparts

6. What about the Gap?

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

10. Application
Customizer
extend UI
embed JavaScript
across all pages in a scope
1.
Global Navbar by Paolo Pialorsi

11. Application
Customizer
extend UI
embed JavaScript
across all pages in a scope
1.
Global Navbar by Paolo Pialorsi
Placeholders

12. Application
Customizer
extend UI
embed JavaScript
across all pages
in a scope
1.

13. Notification bar example
Application
Customizer
extend UI
embed JavaScript
across all pages
in a scope
1.

14. Application
Customizer
extend UI
embed JavaScript
across all pages
in a scope
1.
Notification bar example

15. Command Set
Customizer
2.
Discuss Now by Paolo Pialorsi

16. Command Set
Customizer
2.

17. Command Set
Customizer
2.

18. Command Set
Customizer
2.
Notification bar example

19. Command Set
Customizer
2.
Notification bar example

20. Command Set
Customizer
2.
Don’t forget the manifest file

21. Field
Customizer
embed JavaScript for field
specific UI rendering
3.
Weather by Waldek Mastykarz

22. Field
Customizer
embed JavaScript for field
specific UI rendering
3. View
Display Form
New Form
Edit Form
Quick Edit

23. Field Customizers VS Column formatters

24. Field
Customizer
embed JavaScript for
field specific UI
rendering
3.
…more advanced use cases

25. Field
Customizer
embed JavaScript for
field specific UI
rendering
3.
…more advanced use cases

26. Field
Customizer
embed JavaScript for
field specific UI
rendering
3.

27. Field
Customizer
embed JavaScript for
field specific UI
rendering
3.
Notification bar example

28. Field
Customizer
embed JavaScript for
field specific UI
rendering
3.
Notification bar example

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

34. Questions?