Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Getting started with spfx

651 vues

Publié le

Getting started with spfx in Global Microsoft 365 Developer Bootcamp 2019 Gurgaon

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Getting started with spfx

  1. 1. Getting Started with SPFx Jenkins NS @jenkinsns
  2. 2. Jenkins NS Modern Workplace Solution Architect International Speaker Trainer Independent Consultant Blogger @jenkinsns jenkinsns@gmail.com http://www.jenkinsblogs.com Founder, JPOWER4 jenkinsns@jpower4.com http://www.jpower4.com SPEAKER SPFx: https://www.facebook.com/spfxinfo/ MS Teams: https://www.facebook.com/msteamsinfo Github : https://github.com/jenkinsns Other References
  3. 3. What I’ll cover  Introducing the SharePoint Framework (SPFx)  Configuring your SPFx Development Environment  SharePoint Framework (SPFx) Web Parts  SharePoint Framework (SPFx) Extensions  SharePoint Framework (SPFx) Library Componentdsdwsd
  4. 4. Introducing the SharePoint Framework (SPFx) What is the SharePoint Framework? Where is the SharePoint Framework supported? Configuring your Office 365 developer tenant for SPFx development
  5. 5. SharePoint UX – Evolving cross versions 2009 SharePoint Server 2010 2006 Office SharePoint Server 2007 2003 SharePoint Portal Server 2003 2001 SharePoint Portal Server 2001 2012 SharePoint Server 2013 2016 … SharePoint Server 2016, SPO
  6. 6. SPFx Version History SharePoint Framework is a new development model for building SharePoint customization. In the last three years, we have seen many number of releases for SharePoint Framework.  17 Feb 2017 - GA(1.0.0), 1.0.1, 1.0.2, 1.1.0, 1.1.1, 1.1.3, 1.2.0, 1.3.0, 1.3.1, 1.3.2, 1.3.4, 1.4.0, 1.4.1, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.7.1, 1.8.0, 1.8.1, 1.8.2, 1.9.0, 1.9.1  Aug 2016 - Drop 1, Drop 2, Drop 3, Drop 4, Drop 5, Drop 6, RC0 Always Microsoft recommend to use latest version, but in reality it is very difficult to manage with team based development, since we always don't upgrade to a new version.
  7. 7. SharePoint Framework Extensibility Principles
  8. 8. SharePoint Framework
  9. 9. Web Parts SharePoint Framework component types Extensions Libraries
  10. 10. SharePoint Framework Hosted Scenarios Classic Pages Modern Pages Teams TabsLists and Libraries App pages
  11. 11. Modern Site Pages
  12. 12. Office 365 Developer Tenant Setup Steps
  13. 13. Join the Office 365 Developer Program! https://aka.ms/IgniteO365DevProgram
  14. 14. https://[tenant]-admin.sharepoint.com Create App Catalog Site
  15. 15. Create App Catalog Site
  16. 16. https://[tenant]-admin.sharepoint.com Create a new Development Site collection
  17. 17. https://[sharpeointonline-site]/_layouts/workbench.aspx SharePoint Online Hosted Workbench
  18. 18. Configuring your SPFx Development Environment Tool Comparison: Server-side vs. client-side Node.js NPM, Yeoman, Gulp TypeScript
  19. 19. Open source tooling SharePoint Framework leverages an open source, Node.js based toolchain and embraces all web frameworks + code editors Build Process & Tooling • Yeoman Templates • Gulp (task runner) • Node.js • NPM (package manager) • SystemJS • Webpack • SASS • TypeScript Web Frameworks • React • Angular • Knockout • jQuery • … and more… your choice! Code Editors • Visual Studio Code • Atom • Sublime • Webstorm • … and more… your choice!
  20. 20. IIS Express Project Templates Server-side tool comparison MSBuild C#
  21. 21. Node.js - Runtime https://nodejs.org/
  22. 22. https://www.npmjs.com https://www.nuget.org NPM – Node Package Manager https://www.npmjs.com
  23. 23. Yeoman – Project Scaffolding Generator http://yeoman.io npm install -g yo npm install -g @microsoft/generator-sharepoint
  24. 24. Gulp – Task Runner http://gulpjs.com npm install -g gulp
  25. 25. TypeScript – Typed JavaScript https://www.typescriptlang.org
  26. 26. Interacting with SPFx Web Parts in Modern Pages Adding client-side web parts to modern pages Introducing the new reactive property pane Validating local SPFx development environment
  27. 27. Web Parts SharePoint client-side web parts
  28. 28. Client-side web parts
  29. 29. Adding SPFx web parts to pages
  30. 30. Validate local SPFx development configuration yo @microsoft/sharepoint gulp serve
  31. 31. Demo Creating & Running Your First SPFx Project
  32. 32. SharePoint Framework SPFx Extensions SPFx Extensions Debugging & Testing Extensions Deploying Extensions Application Customizers
  33. 33. SharePoint Framework Extensions
  34. 34. Application Customizers
  35. 35. Field Customizers
  36. 36. Command Sets
  37. 37.  .vscode:  config:  dist:  lib:  node_modules:  sharepoint:  src:  temp: Project Structure
  38. 38. https://localhost Debugging & Testing Extensions
  39. 39. Deployment
  40. 40. Tenant Wide Deployment Centralized control of which extensions are available across entire tenant Consistent end-user experience across all sites Consistent deployment across all sites Automatically enable functionality on newly created sites
  41. 41. Tenant Wide Deployment
  42. 42. List: Tenant Wide Extensions Column Type Description Title string Title of the entry. Can be descriptive entry for the registration. Doesn’t have to match anything, just for your reference Component ID GUID Manifest ID of the component. Has to be in GUID format and component must exists in the app catalog. Component Properties string Optional component properties. Web Template string Can be used to target extension only to specific web template. List Template int List type as a number. Location string Location of the entry. There are different support locations for application customizers and List View Command Sets. Sequence int Sequence of the entry in rendering. Disabled Boolean Enabled state of the deployment.
  43. 43. Application Customizers
  44. 44. Application Customizers Overview Debugging & Testing Deploying
  45. 45. Application Customizer - Placeholders
  46. 46. Application Customer // this is where you do your work
  47. 47. Demo Creating & Running Your First Application Customizer Project
  48. 48. Field Customizers Overview Debugging & Testing Deploying
  49. 49. Field Customizer
  50. 50. Field Customizer Class // called when rendering the cell
  51. 51. Deploying Field Customizers as a Site Column ClientSideComponentId="fcedd96a-1c34-4ac8-9ad8-5aaf4cb1e993" ClientSideComponentProperties= "{"greenMinLimit":"85","yellowMinLimit":"70& quot;}"
  52. 52. Debugging & Testing Field Customizers
  53. 53. https://localhost Testing Field Customizers – How it Works
  54. 54. Deployment
  55. 55. Demo Creating & Running Your First Field Customizer Project
  56. 56. Command Sets Overview Debugging & Testing Deploying
  57. 57. List View Command Sets
  58. 58. Defining Command Set Buttons // *.manifest.json
  59. 59. Command Set Class // fired when state of list view changes // what happens when button is selected
  60. 60. Debugging & Testing Command Sets
  61. 61. Deployment
  62. 62. Tenant Wide Deployment
  63. 63. List: Tenant Wide Extensions Column Type Description Title string Title of the entry. Can be descriptive entry for the registration. Doesn’t have to match anything, just for your reference Component ID GUID Manifest ID of the component. Has to be in GUID format and component must exists in the app catalog. Component Properties string Optional component properties. Web Template string Can be used to target extension only to specific web template. List Template int List type as a number. Location string Location of the entry. There are different support locations for application customizers and List View Command Sets. Sequence int Sequence of the entry in rendering. Disabled Boolean Enabled state of the deployment.
  64. 64. Demo Creating & Running Your First Command Set Project
  65. 65. What’s Coming in SharePoint Framework 1.10
  66. 66. SharePoint Framework 1.10 release – what’s included?
  67. 67. aka.ms/spdev-docs aka.ms/spdev-videos aka.ms/spdev-issues github.com/sharepoint github.com/pnp
  68. 68. https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions https://docs.microsoft.com/sharepoint/dev/spfx/extensions/basics/tenant-wide-deployment-extensions https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api References
  69. 69. Official Blog dev.office.com/blogs Twitter @OfficeDevPnP Tech Community aka.ms/sppnp- community
  70. 70. Enjoy the Bootcamp
  71. 71. Call to action Join Office 365 developer program https://dev.office.com/devprogram to leverage all resources for Office 365 development learning Build applications on Office 365 platform Attend MVP led local community events to continue learning on Office 365 development Share your feedback on Bootcamp at https://aka.ms/Microsoft365DevBootcampSurvey2019

×