The new sites and the modern experience introduced in SharePoint revolutionized the way users interact with the platform but at the same time it closed the door to all the customizations like JSLink and Custom Actions typically used to extend the default functionalities. The time passed by and Microsoft is bringing most of the extensibility options back to the modern environment with the SharePoint Framework Extensions. In this session, I explained all the new customization methods available, namely Application Customizers, Field Customizers, Command Sets and how they can be used to extend SharePoint functionality. This session was given at the SharePoint Saturday Lisbon 2017 http://www.spsevents.org/city/Lisbon/Lisbon2017/speakers

1. Empower your SharePoint sites with SPFx Extensions
by João Ferreira

2. GOLD
SILVERLOCATION
BRONZE
MEDIA

3. João Ferreira
SharePoint Team Lead @ BindTuning
@joao12Ferreira
joao@bindtuning.com
HANDSONSharePoint.net

4.  SharePoint Customizations
 SPFx Overview
 SPFx Extenstions

6. • Custom Master Pages
• Alternate CSS
• Composed Looks (Themes)
• Custom Actions and JSLink
• Web Parts

8. Modern client-side development
Lightweight web and mobile
Powers our own experiences
Backward compatible
Supports open source tools
and JavaScript web frameworks

9. IIS Express
Project Templates
MSBuild
C#

10. • Local development time experience
• Test your changes immediately even in offline mode

11. Web Parts Extensions
Client side
Tools
Package
Deployment
Experiences
Development


13. • Application Customizers
• Field Customizers
• Command Sets

14. Add custom rendering script to well-known
placeholders
• Lists
• Libraries
• Pages

16. Customize how columns are rendered
• Lists
• Libraries

18. Extend modern lists command surface
• Lists
• Libraries

20. User navigates to the list, library or page
Server Returns:
Application Data (List data or Page data)
SPFx JavaScript Libraries
Manifest for all active SPFx components (extensions, web parts)
SharePoint Service

21. Application starts rendering
SPFx requests the component scripts from their location (normally
a CDN)
Application finishes rendering
Web parts and extensions are executed
Note: for field customizers data is not rendered until extension code
is executed
SharePoint Service

22. SharePoint Service
List View Command Sets can be used to introduce new custom actions to a list.
Can be configured to be active when numerous items are selected.
Specific areas in the page are available for Application Customizers to embed customizations
for end users. Application Customizers can be also invisible for the end users.
List View Field customizers can be used to customize experiences around the specific fields. They
can be associated to a specific field instance to make a customization execute when it’s used.

23. yo @microsoft/sharepoint

24. gulp serve -info --browser

25. Demo
Application Customizer

26. Demo
Field Customizer

27. Demo
Command Set

28. gulp bundle --ship
gulp package-solution --ship

29. • Azure
• Office 365 CDN
• Asset Packaging

30. • App Catalog
• Site Collection App Catalog

31. • PNP
• SPFx Extensions CLI

33. João Ferreira
SharePoint Team Lead @ BindTuning
@joao12Ferreira
joao@bindtuning.com
HANDSONSharePoint.net

34. GOLD
SILVERLOCATION
BRONZE
MEDIA