Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and PowerPoint
1 like1,342 views
The document summarizes a presentation about building add-ins for Microsoft Office applications using SharePoint Framework (SPFx) skills. It covers the background of Office add-ins, different types of add-ins like content and task pane add-ins, tools for building add-ins like Visual Studio and Office UI Fabric, and distributing add-ins through the Office Store or within an organization. The presentation aims to show how developers can leverage their SPFx skills to build add-ins that integrate with Office and reach over a billion users.
Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and PowerPoint
- 1. SharePoint Saturday Belgium 2017 • October 21 • Brussels Track: IT PRO | Level: 000 Yo Office! Use your SPFx Skillz to Build Add-ins for Word, Excel, Outlook and PowerPoint Bill Ayers
- 3. Bill Ayers Flow Simulation Ltd. www.SPDoctor.net BillA@flosim.com @SPDoctor Consultant specialising in SharePoint and Office 365 Development and Architecture for Collaboration and Mobile Development MCM/MCSM Charter SharePoint, MCT, MVP, MCTS, MCITP, MCSD, MCAD, MCSA, MCDBA, MSc, Professional Scrum Master, etc.
- 4. Agenda • Background • Office Add-in Shapes • Building Office Add-ins • Distributing Add-ins • Conclusions • Q & A
- 5. 2-3 hours/day in Office Apps Mobile Devices 1.2B in 2014 1.8B in 2018 1B+ • The de-facto standard for business • Now available on iOS, Android, OS X, Windows Phone and in browsers Office is Everywhere!
- 6. Add-in vision • Native and intuitive feel • Use UI framework of host client (Office UI Fabric) • Write once, run everywhere • Simple point solutions to automate existing manual processes
- 7. Reactor
- 8. Extensions for Office VSTOCOM Office Add-ins VBAMacros *all still supported
- 9. Behind the Scenes Hosted Add-In Web Page XML Manifest file in Exchange, catalog or file store
- 10. Could do with something interesting here…
- 11. Office Add-in Shapes Add-in that runs within a document content with read/write access: Excel, PowerPoint, Access Add-in launched contextually from a mail message or appointment: Outlook and Outlook Web Access (OWA), and could include actionable messages Command in the Office UI to launch add-in or execute JavaScript: Outlook, Outlook Web Access (OWA) Add-in that runs beside a document/mail with read/write access: Word, Excel, PowerPoint, Project, Outlook Module extension for the Outlook navigation bar: Outlook
- 12. Task Pane Add-in
- 13. Content Add-in
- 14. Add-in Command • “1-click” way for users to invoke add-ins • Launch task pane • Execute a JavaScript function without showing UI • Dropdown (menu) with different types of buttons as options • Up to 6 buttons per group • 1 group on default tab, up to 10 groups on custom tab • Commands that don’t launch UI can show status messages on the mail item or appointment • Supported starting with Office Developer Tools for Visual Studio Update 1
- 15. Win32 Online iPad iPhone Mac Android UWA Read Read Compose Compose Add-in Roadmap https://dev.office.com/add-in-availability
- 16. Office.js • Access to body and attachments, content • Launch native forms (e.g. reply, new message, appointment) • Modify fields and add attachments • Set/get custom properties on items • Persist user settings JavaScript API Reference: http://dev.office.com/docs/add-ins/overview/office-add-ins
- 17. JavaScript API for Office
- 18. Building an Office Add-in • Napa in-browser web editor – zero install - https://www.napacloudapp.com/ *retired* • Script Lab add-in • Microsoft Visual Studio • Any Web Editor of you choice (e.g. VS Code) plus Yeoman project generator https://dev.office.com/blogs/creating-office-add-ins- with-any-editor-introducing-yo-office Getting Started at dev.office.com – can use MSDN subscription, sign up for Office Developer Program for free 1 year licence, or get a free 30-day Office 365 trial
- 19. Using Visual Studio 2015 • Make sure Office Add-ins toolset installed (Visual Studio 2015 setup or http://www.visualstudio.com/features/office-tools-vs) • Office Developer Tools for Visual Studio 2015 Update 2 available • Design user interface as a web site • Edit manifest • Implement logic with client-side JavaScript or server-side code • Run or debug – will host Add-in locally • Publish from Visual Studio
- 20. Using Visual Studio 2017 • Visual Studio 2017 (including community edition) – check the installer option • Create new project: Add-in for Office App for Office Web Add-in • Design user interface as a web site, edit manifest, etc…
- 21. Project Structure • First project contains just the XML add-in manifest (VS includes a design wizard) • Second project is the supporting ASP.NET Website with HTML, CSS and JavaScript files (including jQuery library) • Use any other technology, but you will have to provision it yourself • Things like alerts, pop-up browser windows and anything modal will be blocked by the hosting Office app
- 22. Build Add-in with Visual Studio
- 23. More Development Choices… • Use any technology that delivers for the web • Microsoft offering Yeoman generator for skeleton add-in project (similar to SPFx toolchain) • Keep in mind that add-ins need SSL/HTTPS Hosted on GitHub
- 25. yo office! • > npm install -g yo • > npm install -g generator-office • > yo office
- 26. Building an Add-in Using Command-line Tooling and Visual Studio Code Reference: https://code.visualstudio.com/Docs/runtimes/office
- 27. Office UI Fabric • Responsive framework (kind-of) • Office Design Language for web • Designed for Office Add-ins by OneDrive and SharePoint Design Studio • Consistent look-and-feel with Office • About 100k, 200k with components • Available as raw CSS or versions for Angular and React • Dev.office.com/fabric • Open source (github.com/OfficeDev/Office-UI-Fabric)
- 28. Office UI Fabric • Design elements to give add-ins the same look and feel as the rest of the Office suite • Consistent typography, icons and behaviour Link to UI Fabric Stylesheets: <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.2.0/fabric.min.css"> <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.2.0/fabric.components.min.css"> Decorate elements with UI Fabric classes: <button class="ms-Button" id="get-data-from-selection"> <span class="ms-Button-icon"><em class="ms-Icon ms-Icon--plus"></em></span> <span class="ms-Button-label">Get Data from selection</span> <span class="ms-Button-description">Get Data from the document selection</span> </button> http://dev.office.com/fabric Link to UI Fabric JS: <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/js/fabric.min.js"></script>
- 29. Office UI Fabric ReactJS Components • 30 re-useable React components, ready to use • Used by Microsoft to build Office and SharePoint • Angular? See ngOfficeUIFabric import Button from 'office-ui-fabric-react'; Var b = <Button onClick={() => this.getData() } className="ms-Button--primary"> Refresh List</Button> Breadcrumb Button Callout Checkbox ChoiceGroup ColorPicker CommandBar ContextualMenu DatePicker DetailsList Dialog DocumentCard Dropdown Facepile Label Layer Link List MessageBar Nav Overlay Panel Persona Pickers PeoplePicker Pivot ProgressIndicator SearchBox TextField Toggle
- 30. Captain Klepto Office Design Patterns •Apply solutions to common customer scenarios •Apply design best practices •Incorporate Office UI Fabric components and styles •Build add-ins that visually integrate with the default Office UI •“Steal” HTML and CSS from samples on GitHub https://github.com/OfficeDev/Office-Add-in-UX-Design-Patterns-Code
- 31. Distribution through Office Store Great to have a cross-platform model, but how will people find add-ins? Easy access to the Office Store where users can get add-ins * New options for IT management of add-ins now in preview
- 32. How to install an Office add-in? Side-loading • During development of add-in ➢ Upload manifest ➢ For testing Distribute publicly • Office store ➢ Validated against policies ➢ Free or Paid ➢ Not for internal Deploy within Organization • Admin uses ➢ Add-in Catalog ➢ EAC for Outlook ➢ Centralized deployment New PowerShell cmdlets for Centralized Deployment management: New-OrganizationAddIn, etc.
- 33. TASKS manag er member Of FILES MESSAGES workingWit h Shared with me directRepor ts createdB y FILES CONVERSATIONS created By workingWit h EVENTS trendingAroun d GROUPS TASKS NOTES NOTES publ ic modifiedB y USER trendingAroun d Microsoft Graph API • Outlook (Mail) add-ins now support the 400 million users of Outlook.com • This is in addition to the billion users of Outlook client across Windows and iOS and users of Office 365
- 34. Using with Protected Web Services • Use displayDialog to handle auth. flow • Office-js-helpers.js • https://github.com/OfficeDev/office-js-helpers • Use with any OAuth 2.0 service • Supports both Implicit and Authorization Code OAuth 2.0 flows • Connect using Server-side code • Outlook add-in SSO - Exchange generates token - Add-in can validate and map to known user id Office.context.ui.displayDialogAsync(dialogURL, { width:100, height: 100, requireHTTPS: true }, function(result) { // handle the result… });
- 35. New Add-in SSO • https://dev.office.com/docs/add-ins/develop/sso-in-office-add-ins
- 36. Conclusions: • Office Add-ins – potential for huge business benefit for your users with minimal effort • > 1.5bn potential users across multiple platforms • Use same skillset across Office Add-ins, SharePoint, Web, Universal Apps and Mobile Cross-platform Apps • Your choice of developer tooling • Sign up for Office 365 Developer Program to get started – dev.office.com • Platform continuing to get more capabilities and better reach • Think about how add-ins could help your business
- 37. Resources: • Office 365 Dev Center (dev.office.com) • https://dev.office.com/docs/add-ins/overview/office-add-ins • Samples and training content: github.com/OfficeDev • Visit dev.office.com and click the Sign Up button to join the Office 365 Developer Program • Microsoft Virtual Academy course “App Model Deep Dive” with Ted Pattison and Scott Hillier • Get started with Office development: dev.office.com/getting-started • UX Patterns: https://dev.office.com/docs/add-ins/design/ux- design-patterns • https://dev.office.com/fabric
- 38. SharePoint Saturday Belgium 2017 • October 21 • Brussels Thank You!