1 / 15

The SharePoint framework

Learn how to enhance SharePoint sites using the SharePoint Framework (SPFx) for modern web development, creating and deploying web parts and extensions with real-world examples.

chrisman
Download Presentation

The SharePoint framework

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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

  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 FeldkerCloud Architect Patrick WitbrodSoftware Engineer bfeldker@valorem.com(314) 397-2338 pwitbrod@valorem.com(573) 639-9543

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

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

More Related