SPUnite17 SPFx Extensions
34
SPFx extensions How does it work and how do we use it?
-
Upload
nccomms -
Category
Technology
-
view
118 -
download
1
Transcript of SPUnite17 SPFx Extensions
SPFxextensions
How does it work
and how do we use it?
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
SPFx extensions, how does it work and how do we use it?
Sponsors
TheModern
UI
Simplyawesome
SharePointFramework
Only webparts
What about the Gap?
SPFx extensions, how does it work and how do we use it?
Prerequisites
Prerequisite
Node with npm 3.x
YeomanScaffolding tool for modern webapps
@microsoft/generator-sharepoint
GulpTask runner
Visual Studio Code or editor of choice
SPFx extensions, how does it work and how do we use it?
Getting set up
npm install -g [email protected] gulp yeoman @microsoft/generator-sharepoint
yo @microsoft/sharepoint
SPFx extensions, how does it work and how do we use it?
And this is whatit looks like
Application Customizer
extend UI embed JavaScript
across all pages in a scope
1.
Global Navbar by Paolo Pialorsi
Application Customizer
extend UI embed JavaScript
across all pages in a scope
1.
Global Navbar by Paolo Pialorsi
Placeholders
Application Customizer
extend UI embed JavaScript across all pages
in a scope
1.
Notification bar example
Application Customizer
extend UI embed JavaScript across all pages
in a scope
1.
Application Customizer
extend UI embed JavaScript across all pages
in a scope
1.
Notification bar example
Command SetCustomizer
2.
Discuss Now by Paolo Pialorsi
Command SetCustomizer
2.
Command Set
Customizer
2.
Command Set
Customizer
2.
Notification bar example
Command Set
Customizer
2.
Notification bar example
Command Set
Customizer
2.
Don’t forget the manifest file
FieldCustomizer
embed JavaScript for field specific UI rendering
3.
Weather by Waldek Mastykarz
FieldCustomizer
embed JavaScript for field specific UI rendering
3. View
Display Form
New Form
Edit Form
Quick Edit
Field Customizers VS Column formatters
Field
Customizer
embed JavaScript for field specific UI
rendering
3.
…more advanced use cases
Field
Customizer
embed JavaScript for field specific UI
rendering
3.
…more advanced use cases
Field
Customizer
embed JavaScript for field specific UI
rendering
3.
Field
Customizer
embed JavaScript for field specific UI
rendering
3.
Notification bar example
Field
Customizer
embed JavaScript for field specific UI
rendering
3.
Notification bar example
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":{}}}
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":{}}}
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
Some guidance about deployment
Details at https://dev.office.com/blogs/deployment-options-for-sharepoint-framework-solutions
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
Questions?
