1. The SharePoint framework
CONFIDENTIAL
The SharePoint framework
Customizing modern sites with SPFx Web Parts and Plug-Ins

2. Introduction Bill Feldker Cloud Architect - Valorem Reply
SharePoint Developer since 2007
Patrick Witbrod
Software Engineer – Valorem Reply
SharePoint Developer since 2014

3. Agenda
The Framework
Tools
Web Part development
Extensions
Deployment
Examples

4. Webparts
We can use SharePoint Framework (SPFx) WebParts to build functionally on top of pages.
Native Client Side WebParts. Similar to the script editor web part but you can stop worrying about your pages being “safe for scripting”
Page Context in the DOM. No iframes slowing your page down and keeping you from accessing your app.
Framework Agnostic. Because of the way the framework is set up you can use whatever you want. Angular, React, knockout, or nothing.
Modern Web Development Practices. This is a complete retooling but instead of something SharePoint specific any web developer with experience using modern tooling ca

5. Our Tools

6. In Practice
Yo SharePoint
Gulp Serve
Build Application
Deploy

7. A Note on NPM

8. Demo

9. Extensions
We can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience.
Application Customizers. Adds scripts to the page, and accesses well-known HTML element placeholders and extends them with custom renderings.
Field Customizers. Provides modified views to data for fields within a list.
Command Sets. Extends the SharePoint command surfaces to add new actions, and provides client-side code that you can use to implement behaviors.

10. Deploying and Updating your Solution
Steps for Deploying
Package your Solution run package-solution command
Add package to the app catalog
Trust your solution
Go to the site collection you want it deployed to
Add the app to your site
Add the web part to your page
Updating your solution
Make dhanges to the solution
Modify the version number in the package-solution.json file
Re-build the package
Add the package to the app catalog
Trust the solution
Go to the site collection it is deployed in
Update your app by clicking it in the site contents area

11. Real World Examples Web Parts Search Visualizer (CSWP)
Content Query (CQWP)
Extensions
Remove Feedback button
Add CSS to the site
Add a portal Footer

12. Demo

13. Thank you Bill Feldker Cloud Architect
(314)
Thank you
Patrick Witbrod Software Engineer
(573)

14. Source Code Helpful Links Web Parts SharePoint Framework NodeJS
Visual Studio Code
Typescript
React
Source Code

15. Platinum Sponsors Silver Sponsors Say Thanks to our Sponsors
without them this event wouldn’t happen!
Platinum Sponsors
Silver Sponsors