SPUnite17 Become a Developer Hero by Building Office Add ins
1 like116 views
1) Office add-ins allow developers to build extensions that integrate with Office applications and can be distributed through the Office Store or deployed within an organization. 2) Developers can use popular web technologies like HTML, CSS, and JavaScript to build add-ins that provide a native experience across Office platforms. 3) The Office UI Fabric framework provides styling and components to help add-ins look and feel consistent with Office applications.
More Related Content
What's hot (20)
Similar to SPUnite17 Become a Developer Hero by Building Office Add ins (20)
More from NCCOMMS (20)
Recently uploaded (20)
SPUnite17 Become a Developer Hero by Building Office Add ins
- 1. Become a Developer Hero by Building Office Add-ins Bill Ayers
- 3. Bill Ayers Flow Simulation Ltd. www.SPDoctor.net [email protected] @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. Office 365 Platform at Ignite 2017 Standalone web, device, and service apps Extensions Embedded canvases 1Microsoft Graph Groups People Conversations Files Insights Office Add-ins
- 8. Reactor
- 9. Extensions for Office VSTOCOM Office Add-ins VBAMacros *all still supported
- 10. Behind the Scenes Hosted Add-In Web Page XML Manifest file in Exchange, catalog or file store
- 11. Could do with something interesting here…
- 12. 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
- 13. Task Pane Add-in
- 14. Content Add-in
- 15. 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
- 16. Win32 Online iPad iPhone Mac Android UWA Read Read Compose Compose Add-in Roadmap https://dev.office.com/add-in-availability
- 17. 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
- 18. JavaScript API for Office
- 19. 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
- 20. 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
- 21. 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…
- 22. 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
- 23. Build Add-in with Visual Studio
- 24. 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. Licensing to Third Parties • Licensing framework allows you to tell if user has a valid licence • You add logic to enforce licencing (e.g. limited functionality without licence) • Only works for add-ins obtained from Office Store or catalog (SharePoint/Exch) • User must be signed in • Store handles payment and tracks licence tokens – web service to verify licence • Token passed as query string parameter • Think about your licensing model
- 34. 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.
- 35. On-premises Add-in Deployment • Deploy Mail Add-ins to local copy of Exchange Server using Exchange Management Console • Deploy other Office Add-ins to SharePoint Add-in Catalog (sits along-side SharePoint Add-in Catalog) • Configure Office client to trust the catalog • Can also deploy Add-in manifest to a file share
- 36. Two Ways to Call Out Web Application (e.g. ASP.NET MVC) User running Office client, Office 365, or mobile Office. Service (e.g. MS Graph) called from Web Application Web Service Called from JS User running Office client, Office 365, or mobile Office. Service (e.g. MS Graph) Static Content Web Application Web Service Called from JS Content
- 37. 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
- 38. 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… });
- 39. New Add-in SSO • https://dev.office.com/docs/add-ins/develop/sso-in-office-add-ins
- 40. What’s new and on the horizon GA Preview Now • Centralized Deployment for Word, Excel and PPT • Auto-open taskpane • Excel 1.5 and 1.6 APIs • Outlook Add-ins in Android • Single Sign-on for Outlook • Excel 1.7 APIs • Outlook 1.5 APIs for Mac Outlook Soon • Single Sign-on for Word, Excel and PPT • Custom Functions in Excel • Centralized Deployment for Outlook Focus Areas • More APIs, particularly for Outlook and Excel • Better, deeper UX integration • Better add-in discovery • Performance
- 41. 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 with Microsoft Graph • Think about how add-ins could help your business
- 42. 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