Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SPUnite17 SPFx Extensions

408 views

Published on

SharePoint Unite 2017 Session

Published in: Technology
  • Login to see the comments

SPUnite17 SPFx Extensions

  1. 1. SPFx extensions How does it work and how do we use it?
  2. 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. 3. SPFx extensions, how does it work and how do we use it? Sponsors
  4. 4. The Modern UI Simply awesome
  5. 5. SharePoint Framework Only webparts
  6. 6. What about the Gap?
  7. 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. 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. 9. SPFx extensions, how does it work and how do we use it? And this is what it looks like
  10. 10. Application Customizer extend UI embed JavaScript across all pages in a scope 1. Global Navbar by Paolo Pialorsi
  11. 11. Application Customizer extend UI embed JavaScript across all pages in a scope 1. Global Navbar by Paolo Pialorsi Placeholders
  12. 12. Application Customizer extend UI embed JavaScript across all pages in a scope 1.
  13. 13. Notification bar example Application Customizer extend UI embed JavaScript across all pages in a scope 1.
  14. 14. Application Customizer extend UI embed JavaScript across all pages in a scope 1. Notification bar example
  15. 15. Command Set Customizer 2. Discuss Now by Paolo Pialorsi
  16. 16. Command Set Customizer 2.
  17. 17. Command Set Customizer 2.
  18. 18. Command Set Customizer 2. Notification bar example
  19. 19. Command Set Customizer 2. Notification bar example
  20. 20. Command Set Customizer 2. Don’t forget the manifest file
  21. 21. Field Customizer embed JavaScript for field specific UI rendering 3. Weather by Waldek Mastykarz
  22. 22. Field Customizer embed JavaScript for field specific UI rendering 3. View Display Form New Form Edit Form Quick Edit
  23. 23. Field Customizers VS Column formatters
  24. 24. Field Customizer embed JavaScript for field specific UI rendering 3. …more advanced use cases
  25. 25. Field Customizer embed JavaScript for field specific UI rendering 3. …more advanced use cases
  26. 26. Field Customizer embed JavaScript for field specific UI rendering 3.
  27. 27. Field Customizer embed JavaScript for field specific UI rendering 3. Notification bar example
  28. 28. Field Customizer embed JavaScript for field specific UI rendering 3. Notification bar example
  29. 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. 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. 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. 32. Some guidance about deployment Details at https://dev.office.com/blogs/deployment-options-for-sharepoint-framework-solutions
  33. 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. 34. Questions?

×