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?