Office Add-Ins mit Angular

Slides von der BASTA 2019 Spring

Bereits seit der Version 2013 können Sie Microsoft Office durch Add-ins erweitern. Damit sind die Tage von VSTO endlich gezählt. Sie können heute mit modernsten Webtechnologien Erweiterungen für die beliebten Produkte wie Outlook, Excel oder Word erstellen und auf sämtlichen Plattformen bereitstellen. Egal, ob Ihre Anwender Office unter Windows, macOS, Android, iOS oder im Browser verwenden, mit Add-ins können Sie alle Benutzer erreichen. In diesem Vortrag wird Ihnen Thorsten Hans nach einer kurzen theoretischen Einführung zeigen, wie Sie ein neues Add-in für ein Office-Produkt exemplarisch mit dem Single-Page-Application-(SPA-)Framework Angular und TypeScript implementieren und in Office 365 bereitstellen.

Transcript

1. Office Extensibility in 2019 Cross-Plattform Add-ins mit Angular Thorsten Hans @thorstenhans thorsten.hans@gmail.com thorsten-hans.com @thinktecture thorsten.hans@thinktecture.com thinktecture.com Consultant @thinktecture
2. What to expect • Office as Platform • Angular Integration • Using Office APIs • Excel API • PowerPoint API • Sideloading Apps to • Desktop • Mobile • Debugging Experience What not to expect • Angular Introduction • UX / UI Best Practices
3. The guy who’s talkin’ Consultant @ Thinktecture AG thorsten.hans@thinktecture.com thorsten.hans@gmail.com thinktecture.com thorsten-hans.com @ThorstenHans Thorsten Hans
4. Code https://github.com/ThorstenHans/basta-2019-office-dev Slides https://thns.io/slides Code & Slides
5. • Office as an application platform • Office Add-In capabilities • Building an Add-In with Angular • Tips from the field • Recap • Q&A Talking Points
6. Platform offerings • Seamless integration of HTML5 / JavaScript / CSS into • Office fat clients (Office 2013 / 2016 / 2019 & Office 2016 / 2019 for Mac) • Office Online • Office Mobile (Office for iOS / ONLY Outlook for Android) • https://dev.office.com/add-in-availability • Reuse Microsoft’s existing distribution channel • Achieve requirements easier • Don’t build yet another Excel! Use the existing one Office as an application platform
7. Deployment Channels • Deploy to public Office Add-In Store • On-Premise deployments using Exchange Server and SharePoint • Exchange for Outlook Add-Ins • SharePoint for Word, Excel and PowerPoint • Side-Loading for Developers Office as an application platform
8. Increase your reach Office as an application platform > 155 million Office 365 Users
9. One development model, many possibilities • Office manifest defines the shape of the app • Manifest is extensible, we’ll see more shapes in the future • All shapes are well-known UI concepts for Office users • Microsoft uses Add-In shapes to ship new features Office Add-In capabilities
10. DEMO
11. Specify how Office should be extended • Commands (eg Button in the Ribbon) • TaskPane • Modules (full page experience in Outlook) • Custom Functions (currently in preview) • Content Apps Office Add-In Shapes
12. Web is the way to go • HTML5, JavaScript and CSS are the ONLY supported languages in the frontend • Use ANY language for the backend / API • The office.js provides rich APIs for all Office Apps • UI Fabric provides basic styling for Office Add-Ins • https://developer.microsoft.com/en-us/fabric Office Add-In Developer Story
13. Tooling • Visual Studio Integration • Visual Studio Extension available for 2015 and 2017 • Yeoman Generator for all platforms • Yeoman -> http://yeoman.io/ • Generator -> https://github.com/OfficeDev/generator-office • Works on all desktop platforms • No Visual Studio license required Office Developer Story
14. Hello World Office Developer Story
15. Add-In architecture Office Developer Story
16. DEMO
17. Debugging Experience • Debug everywhere • Office 2013 / 2016 / 2019 for Windows • Edge Developer Tools • Office Online • Browser Developer Tools • Office 2016 / 2019 for MacOS • Vorlon.JS • Office for iOS / Android • Vorlon.JS Office Developer Story
18. DEMO
19. • Setup HTTPs locally • Use dedicated manifests for environments / apps • Don’t use yo office for Angular projects • Use office-toolbox • Write guards for Office Apps to prevent users from office-only features Tips from the field
20. • Office as an application platform • Office Add-In capabilities • Demo (Angular SPA as Excel Add-In) • Tips from the field Recap
21. Code https://github.com/ThorstenHans/basta-2019-office-dev Slides https://thns.io/slides Code & Slides
22. Q&A If you’ve further questions later on: shoot me a mail at thorsten.hans@thinktecture.com / thorsten.hans@gmail.com or tweet at @ThorstenHans