Getting started with spfx
•Download as PPTX, PDF•
0 likes•112 views
Getting started with spfx in Global Microsoft 365 Developer Bootcamp 2019 Gurgaon
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Getting started with spfx
Similar to Getting started with spfx (20)
More from Jenkins NS
More from Jenkins NS (20)
Recently uploaded
Recently uploaded (20)
Getting started with spfx
- 1. Getting Started with SPFx Jenkins NS @jenkinsns
- 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. 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. 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. 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. 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. SharePoint Framework Extensibility Principles
- 9. Web Parts SharePoint Framework component types Extensions Libraries
- 10. SharePoint Framework Hosted Scenarios Classic Pages Modern Pages Teams TabsLists and Libraries App pages
- 13. Office 365 Developer Tenant Setup Steps
- 14. Join the Office 365 Developer Program! https://aka.ms/IgniteO365DevProgram
- 16. Create App Catalog Site
- 17. https://[tenant]-admin.sharepoint.com Create a new Development Site collection
- 19. Configuring your SPFx Development Environment Tool Comparison: Server-side vs. client-side Node.js NPM, Yeoman, Gulp TypeScript
- 20. 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!
- 21. IIS Express Project Templates Server-side tool comparison MSBuild C#
- 23. https://www.npmjs.com https://www.nuget.org NPM – Node Package Manager https://www.npmjs.com
- 24. Yeoman – Project Scaffolding Generator http://yeoman.io npm install -g yo npm install -g @microsoft/generator-sharepoint
- 25. Gulp – Task Runner http://gulpjs.com npm install -g gulp
- 26. TypeScript – Typed JavaScript https://www.typescriptlang.org
- 27. 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
- 28. Web Parts SharePoint client-side web parts
- 30. Adding SPFx web parts to pages
- 31. Validate local SPFx development configuration yo @microsoft/sharepoint gulp serve
- 32. Demo Creating & Running Your First SPFx Project
- 33. SharePoint Framework SPFx Extensions SPFx Extensions Debugging & Testing Extensions Deploying Extensions Application Customizers
- 37. Command Sets
- 38. .vscode: config: dist: lib: node_modules: sharepoint: src: temp: Project Structure
- 39. https://localhost Debugging & Testing Extensions
- 40. Deployment
- 41. 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
- 43. 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.
- 45. Application Customizers Overview Debugging & Testing Deploying
- 46. Application Customizer - Placeholders
- 47. Application Customer // this is where you do your work
- 48. Demo Creating & Running Your First Application Customizer Project
- 49. Field Customizers Overview Debugging & Testing Deploying
- 50. Field Customizer
- 51. Field Customizer Class // called when rendering the cell
- 52. Deploying Field Customizers as a Site Column ClientSideComponentId="fcedd96a-1c34-4ac8-9ad8-5aaf4cb1e993" ClientSideComponentProperties= "{"greenMinLimit":"85","yellowMinLimit":"70& quot;}"
- 53. Debugging & Testing Field Customizers
- 54. https://localhost Testing Field Customizers – How it Works
- 55. Deployment
- 56. Demo Creating & Running Your First Field Customizer Project
- 57. Command Sets Overview Debugging & Testing Deploying
- 58. List View Command Sets
- 59. Defining Command Set Buttons // *.manifest.json
- 60. Command Set Class // fired when state of list view changes // what happens when button is selected
- 61. Debugging & Testing Command Sets
- 62. Deployment
- 64. 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.
- 65. Demo Creating & Running Your First Command Set Project
- 66. What’s Coming in SharePoint Framework 1.10
- 67. SharePoint Framework 1.10 release – what’s included?
- 68. aka.ms/spdev-docs aka.ms/spdev-videos aka.ms/spdev-issues github.com/sharepoint github.com/pnp
- 72. 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
Editor's Notes
- Tahoe/SPS 2001 – ASP Based, Single Box SP 2003 – Moved to ASP.NET, scale out, enterprise manageability SP 2007 – Added ECM, Publishing, Shared Services SP 2010 – FAST acquisition, search driven portals, scaled up doclibs SP 2013 – Multitenant, base for our cloud based release SP 2016 – First version migrated back from Cloud
- https://www.eliostruyf.com/sharepoint-framework-generator-changelog/
- Over the past several years, with the evolution of Office 365, development of SharePoint solutions has encountered a new set of challenges: while on one hand IT and Tenant administrators require a new set of tools to control how data get accessed and consumed in their tenancies, developers, on the other hand, want to programmatically control the whole lifecycle, experience, and data access capabilities of a Site. Unfortunately, developers today find themselves constraint around building app parts as a result of iFrames, a reduced set of APIs, and no integration with cross Office 365 workloads. This in turn limits their ability to develop powerful portals that extend SharePoint. The client-side development framework will deliver capabilities that will help both first party and third party developers build powerful, rich applications and provide an enjoyable web experience in Office 365 for end users that are both intuitive and simple to consume.
- Built into the SharePoint mobile apps
- Client-side rendered using Open Source web tech CDN deployed web apps with client side interactivity and fast page routing Client-side web parts Client-side and persisted caches Mobile optimized (responsive)
- To build and deploy client-side web parts using the the SharePoint Framework, you will need an Office 365 Tenant.
- Main point: Keep light on vision, more on outline for today and why we are investing in our innovation areas influenced by where we are seeing the most usage (outside circle), consistently influenced by our productivity pillars (inside circle)