Introduction to Office Development Topics
Download as PPTX, PDF0 likes55 views
The document discusses tools for developing SharePoint Framework (SPFx) web parts and Office Add-ins including Node.js, npm, Yeoman, Gulp, TypeScript, Office UI Fabric, and the SharePoint Workbench. It provides links and demonstrations for installing and using these tools to build client-side web parts and add-ins. The document also covers using property pane controls like text boxes, checkboxes, and dropdowns to customize web part properties.
More Related Content
What's hot (20)
Similar to Introduction to Office Development Topics (20)
More from Haaron Gonzalez (20)
Recently uploaded (20)
Introduction to Office Development Topics
- 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
- 3. 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
- 6. Demo Create project folder structure
- 7. Office 365 Management Shell
- 8. Office 365 Management Shell https://ps54us.sharepoint.com/sites/portal
- 9. Demo • https://www.microsoft.com/en- us/download/details.aspx?id=35588
- 10. 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.
- 11. 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
- 14. Demo Download and install from https://code.visualstudio.com/
- 17. Demo Download and install Git command line tools https://git- scm.com/download/w in
- 18. • Tools • Node.js • Yeoman • Gulp • Typescript • Visual Studio (Code) • PowerShell • Git • Frameworks • React • Angular.js • Knockout • Etc. Open Source Tooling
- 19. Comparing tools with MS IIS Express VS Project New <Template> C#
- 20. Node.js – Open-source, cross-platform JavaScript runtime environment https://nodejs.org/en/
- 21. Node.js – Open-source, cross-platform JavaScript runtime environment https://nodejs.org/en/
- 22. Demo • Download and install from https://nodejs.org/downl oad/release/v8.11.3/
- 23. npm – Node Package Manager https://www.npmjs.com/
- 24. npm – Node Package Manager https://www.npmjs.com/
- 25. Yeoman – Project Templates http://yeoman.io
- 26. Yeoman – Project Templates http://yeoman.io
- 27. Demo Create SharePoint Framework Web Part Create Office Add In
- 28. gulp – Build process manager http://gulpjs.com/
- 29. gulp – Build process manager http://gulpjs.com/
- 30. 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/
- 31. This to remember: Imports class definition Methods Typescript – Typed JavaScript https://www.typescriptlang.org/
- 32. 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
- 33. Local development time experience Test your changes immediately even in offline mode SharePoint Workbench
- 34. Client-side Web Part Build Flow
- 35. Our first SPFx web part
- 36. Our first SPFx web part
- 37. Our first SPFx web part
- 39. 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
- 40. 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
- 41. Controls supported in the property pane
Editor's Notes
- #3: Create a new Office 365 Development Tenant 1 year up to 25 users
- #19: SharePoint will also support open source tooling to drive greater efficiencies when developing Parts and Apps. These tools should not be considered a replacement of an organizations traditional tools, but rather an extension of those, providing new opportunities to quickly get up and running with SharePoint development. If you’re familiar with Visual Studio development with SharePoint, this tools carry a lot of similarities with the tools you may already be familiar with for example: Yeoman provides a generator ecosystem. A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts. yo scaffolds out a new application, writing your build configuration (e.g Gruntfile, Gulpfile) and pulling in relevant build tasks and package manager dependencies (Bower, npm) that you might need for your build. This is similar to Project Scaffolding in Visual Studio. Gulp Automation - gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow. Platform-agnostic - Integrations are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms. Strong Ecosystem - Use npm modules to do anything you want + over 2000 curated plugins for streaming file transformations Simple - By providing only a minimal API surface, gulp is easy to learn and simple to use Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world. event driven JavaScript runtime, Node is designed to build scalable network applications similar to VS SharePoint development: Gulp = MSBuild, NodeJS = IIS (Express), YeoMan = project scafolding in VS, TypeScript= typed superset of JavaScript