Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Office Development Topics

11 views

Published on

Introduction to Office Development Topics as part of the Global Office 365 Developer Bootcamp event

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Introduction to Office Development Topics

  1. 1. • You will need a email account with Microsoft Passport supported • Create a new Office 365 Tenant • https://developer.microsoft.com/en-us/office/dev-program
  2. 2. DEMONTRATION • You will need a email account with Microsoft Passport supported • Create the tenant • Create AppCatalog https://developer.microsoft.com/en-us/office/dev-program
  3. 3. Windows PowerShell
  4. 4. Windows PowerShell
  5. 5. Demo Create project folder structure
  6. 6. Office 365 Management Shell
  7. 7. Office 365 Management Shell https://ps54us.sharepoint.com/sites/portal
  8. 8. Demo • https://www.microsoft.com/en- us/download/details.aspx?id=35588
  9. 9. SharePoint PnP PowerShell Online • PowerShell commands that allows you to perform complex provisioning and artifact management actions towards SharePoint. The commands use a combination of CSOM and REST behind the scenes, and can work against both SharePoint Online as SharePoint On-Premises.
  10. 10. SharePoint PnP PowerShell Online • Commands to remember • Set-ExecutionPolicy RemoteSigned • Install-Module SharePointPnPPowerShellOnline • Update-Module SharePointPnPPowerShell* • Get-Module SharePointPnPPowerShell* -ListAvailable | Select-Object Name,Version | Sort-Object Version -Descending • Pre-requisite install Windows Management Framework v4.0 • http://www.microsoft.com/en-us/download/details.aspx?id=40855
  11. 11. Visual Studio Code https://code.visualstudio.com/
  12. 12. Visual Studio Code https://code.visualstudio.com/
  13. 13. Demo Download and install from https://code.visualstudio.com/
  14. 14. GitHub https://github.com/ https://git-scm.com/
  15. 15. GitHub https://github.com/ https://git-scm.com/ Git Command-line tools
  16. 16. Demo Download and install Git command line tools https://git- scm.com/download/w in
  17. 17. • Tools • Node.js • Yeoman • Gulp • Typescript • Visual Studio (Code) • PowerShell • Git • Frameworks • React • Angular.js • Knockout • Etc. Open Source Tooling
  18. 18. Comparing tools with MS IIS Express VS Project  New  <Template> C#
  19. 19. Node.js – Open-source, cross-platform JavaScript runtime environment https://nodejs.org/en/
  20. 20. Node.js – Open-source, cross-platform JavaScript runtime environment https://nodejs.org/en/
  21. 21. Demo • Download and install from https://nodejs.org/downl oad/release/v8.11.3/
  22. 22. npm – Node Package Manager https://www.npmjs.com/
  23. 23. npm – Node Package Manager https://www.npmjs.com/
  24. 24. Yeoman – Project Templates http://yeoman.io
  25. 25. Yeoman – Project Templates http://yeoman.io
  26. 26. Demo Create SharePoint Framework Web Part Create Office Add In
  27. 27. gulp – Build process manager http://gulpjs.com/
  28. 28. gulp – Build process manager http://gulpjs.com/
  29. 29. Typescript is a typed superset of JavaScript that compiles to pure JavaScript Allows enterprise developers to create better JavaScript-intensive applications by introducing variable typing, classes and modules Typescript – Typed JavaScript https://www.typescriptlang.org/
  30. 30. This to remember: Imports class definition Methods Typescript – Typed JavaScript https://www.typescriptlang.org/
  31. 31. Office UI Fabric – UI for SharePoint Office UI Fabric is a responsive, mobile-first, front-end framework for developers, designed to make it simple to quickly create web experiences using the Office Design Language Office IU Fabric is supported in SharePoint http://dev.office.com/fabric
  32. 32. Local development time experience Test your changes immediately even in offline mode SharePoint Workbench
  33. 33. Client-side Web Part Build Flow
  34. 34. Our first SPFx web part
  35. 35. Our first SPFx web part
  36. 36. Our first SPFx web part
  37. 37. Controls supported in the property pane Simple and dynamic property pane fields Lots of controls to simplify data entry For example: Text Boxes Check Boxes Drop Down Toggle
  38. 38. Controls supported in the property pane 1. Import the controls we need MyDemoSPFx.ts 2. Define the data structure of our property pane IMyDemoSPFxWebPartProps.ts 3. Optionally define default data in MyDemoSPFxWebpart.manifest.json
  39. 39. Controls supported in the property pane

×