Overview of SharePoint Framework (SPFx)
Download as PPTX, PDF1 like555 views
SPFx allows developers to build client-side SharePoint solutions using open-source tools like Node.js, Gulp and Yeoman. It uses TypeScript to build responsive and mobile-ready solutions that can run on both SharePoint Online and on-premises. Main components include Node.js for dependencies, Npmjs for managing them, Gulp for automating tasks, TypeScript for compiling code, and Yeoman for scaffolding solutions. Developers can use frameworks like React, Angular or Knockout and Microsoft Graph, and solutions are contributed to GitHub.
Overview of SharePoint Framework (SPFx)
- 3. SharePoint Development Farm based Sanboxes SharePoint Add-ins Manual injecting JS file
- 4. What is SharePoint Framework (SPFx)? Client-side SharePoint development Open Source tooling Responsive and mobile-ready Works for SharePoint Online and SharePoint on-premises
- 5. Main Components • build & run the applications NodeJS • manages the dependencies required for the application Npmjs • automate the tasks of building and running the solution Gulp • Build the application and compile into clean, simple JavaScript codeTypeScript • create a solution structure for the application Yeoman
- 6. Extra Components • edit and manage the source code Visual Studio Code • contribute the source GitHub • use any type of JS Framework (React, AngularJS, KnockoutJS etc..)JS Frameworks
- 7. How to start? npm install –g bower npm install –g yo npm install –g tsd npm install –g gulp-cli npm i @microsoft/generator- sharepoint
- 12. DEMO
- 13. Helpful commands yo @microsoft/sharepoint create new project / add new web part gulp bundle build and bundle project gulp serve bundle project and start Workbench gulp package-solution build solution package (.spapp) gulp nuke delete build and intermediate folders gulp test run tests --ship argument to execute a release build
- 14. Property Pane PropertyPaneTextField – get this by default with project PropertyPaneButton PropertyPaneCheckbox PropertyPaneChoiceGroup PropertyPaneCustomField PropertyPaneDropdown PropertyPaneHorizontalRule PropertyPaneLabel PropertyPaneLink PropertyPaneSlider
- 15. Environment import { EnvironmentType } from '@microsoft/sp- client-base'; this.context.environment.type Values: •EnvironmentType.Tests – Tests context •EnvironmentType.Local – SharePoint Workbench •EnvironmentType.SharePoint – Modern SharePoint page •EnvironmentType.ClassicSharePoint – Classic SharePoint Page
- 16. UI Fabric Fonts, icon Colour
- 17. Microsoft Graph
- 18. SPFx is open source https://github.com/OfficeDev/office-ui-fabric-react https://github.com/OfficeDev/generator-office https://github.com/SharePoint/sp-dev-docs
- 19. If you want to know more! Dev Office • https://dev.office.com/sharepoint/docs/spfx/sharepoint- framework-overview Waldek Mastykarz • https://blog.mastykarz.nl/ Andrew Connell • http://www.andrewconnell.com/ SharePoint Saturday • http://www.spsevents.org/ UK Community Days • http://uk.communities.tech/