Office Add-ins have been around for a while as VSTO packages, but things have changed with the introduction of Office 2013. A new App Model for Office provides add-ins who live both in the Office Desktop client and Office Online. Join this session to discover what Office Add-ins are, discover the latest changes and how to create them using standard-based technologies like HTML5, JavaScript and CSS3. The session covers different types of Office Add-ins, like task pane, content add-ins for Word, Excel, PowerPoint and mail add-ins for Outlook. We'll talk about how to develop, build, package and deploy Office Add-ins. Demo's cover creating add-ins with Visual Studio and deploy them for availability in the store.

1. Develop, Build, Package and Deploy
Office Add-ins with Visual Studio
Jeremy Thake (Microsoft)
Bram de Jager (Macaw)

2. Developer vision

3. Change is coming…
Apps for Office
=
Office Add-ins

4. Agenda
• Intro to Office Add-ins
• Develop and Build add-ins
• Package and Deploy add-ins
• Wrap-up

5. INTRO TO OFFICE ADD-INS
Develop, Build, Package and Deploy Office Add-ins with Visual Studio

6. History
• Visual Studio Tools for Office, supports COM and VSTO Add-ins
• VSTO 2003 downloadable for Visual Studio 2003
• VSTO 2005 (SE) downloadable for Visual Studio 2005
• VSTO 3.0 build into Visual Studio 2008
• VSTO 4.0 build into Visual Studio 2010
• Office Developer Tools, supports also Office Add-ins
• Office Developer Tools for Visual Studio 2012
• Office Developer Tools for Visual Studio 2013
• Office Developer Tools for Visual Studio 2015

7. Different Office Add-in types
• Task Pane Add-in
• Content Add-in
• Contextual Mail Add-in
• Add-in Command

8. Task pane Add-in
• Side-by-side
• Shown next to the Office
document
• Supported by Word, Excel,
PowerPoint, and Project
• Contextual information
• Insert content into the document
• Gets content to perform an action
• Can be used for
• Retrieving information from web
service based on the selection of
the user

9. Content Add-in
• Appears in body
• Shown in line of the document
• Integrate
• Integrate rich, web-based data,
visualizations, embedded media,
as well as other external content
• Can be used for
• Display Excel data plotted on top of
geographical maps

10. Contextual Mail Add-in
• Shown in Outlook item
• Requires Outlook 2013 & Exchange
2013
• Seamless integration on desktop,
browser and devices
• Scenarios
• Based on contextual trigger in item
body
• Runs in messages and/or
appointments
• Can be used for
• Shows Bing Maps centered on the
address found in the body of the
email

11. Add-in Command
• Currently shown in Outlook item
• Command in the Office UI to
launch add-in or perform UI-less
operation
• Scenarios
• Open a task pane to perform
advanced operations based on the
emails body
• Can be used for
• Copying the email (with details) to
note taking app

12. Win32 Online iPad iPhone Mac Android UWA
Read
Compose
APIs
View
Edit
Add-in Roadmap

13. Roadmap highlights
• Expanding to more clients
• Support for iPad Office clients
• Support for Outlook.com (consumer market)
• New features
• New Add-in command (ribbon extensibility)
• New Outlook Task Pane add-ins

17. “
“
DEMO
How does a Content Add-in
look in Excel

18. Demo scenario
• Introduction to Content Add-in in Excel
• Use the Bing Maps add-in to visualize geographical dispersed
information
• Show the same Excel sheet in both Excel desktop client and Excel
Online

19. DEVELOP AND BUILD OFFICE ADD-INS
Develop, Build, Package and Deploy Office Add-ins with Visual Studio

20. Anatomy of an app for Office
HTML5, CSS,
JavaScript (in all its
glory!)
2
Web applications
hosted by any HTTP
delivery mechanism
3
Document-based
manifest driven
applications.
1

21. Developer tool sets and APIs
• “Napa” Office 365 Development Tools
• Browser based developer tool, http://dev.office.com
• Start in Napa, continue in Visual Studio
• Office Developer Tools for Visual Studio
• Visual Studio 2012 extension
• Visual Studio 2013 RTM
• Visual Studio 2013 – March 2014 Update
• Support for Office 2013 SP1 (Office.js v1.1)
• Combine with the Office 365 (Unified) APIs

22. Office UI Fabric
• Responsive, mobile-first, front-
end framework for developers
that delivers instant look and feel
of Office
• Handles typography, color, icons,
animations, responsive grid
layouts and localization

23. Office Add-in rich client runtime

24. Office Add-in web clients

25. “
“
DEMO
Build a Wikipedia Task
Pane add-in in Word

26. Demo scenario
• Introduction to Office Add-in project template in Visual Studio
• Develop Task Pane add-in using the Wikipedia REST API
• Build and debug experience

27. PACKAGE AND DEPLOY ADD-INS
Develop, Build, Package and Deploy Office Add-ins with Visual Studio

28. Publish Office Add-ins
• Office Store
• Public marketplace that Microsoft will host and regulate on Office.com
• Apps for Office catalog on SharePoint
• For task pane and content add-ins
• Centralized corporate catalog managed by IT
• Exchange catalog
• Private catalog for mail add-ins
• Network shared folder app catalog
• Deploy task pane and content add-ins to a central network shared folder

29. Add-in availability by location
App type
Office Store Corporate catalog Exchange Server Shared folder app
catalog
Task Pane add-in x x x
Content add-in x x x
Mail add-in x x
Same Office-solution
catalog experience that
the Office Store
provides. App Catalog
located in SharePoint.
Add-ins are only shown
in Office clients.
Availability based on
access to file share.

30. What goes where?
Visual Studio 2013
MS Build
WebDeploy package
XML Manifest
Office Client
File ShareCorporate Catalog
IIS Webserver
Azure Website
Office Store

31. “
“
DEMO
Publish the Wikipedia add-in
to Azure and Corporate
Catalog

32. Demo scenario
• Publish WebDeploy package to Azure
• Upload XML manifest to Corporate Catalog
• Configure Word desktop to consume add-ins from the Corporate
Catalog

33. Configure Office client for App Catalog
• Office client configuration
• Open Word
• Open Options » Trust Center » Trust Center Settings
• Select Trusted App Catalogs (on left)
• Add the Corporate Catalog URL (check “Show in menu” box)
• Registry entry
• HKEY_CURRENT_USERSoftwareMicrosoftOffice16.0WEFTrustedCatalogs

34. WRAP-UP
Develop, Build, Package and Deploy Office Add-ins with Visual Studio

35. Scenarios
• Start (review/approval) workflow process from within the Office
clients
• Allowing employees to browse, select and insert (legal) text snippets
into documents, which are managed in a central location
• Pull meeting location from meeting invite and highlight the meeting
room plotted onto the building floor plan
• Recognize the tracking number for package delivery and retrieve real-
time delivery status
• And many more…

36. Write once, run everywhere

37. Key takeaways
• Office Add-ins are the means for enabling contextual experiences
• Office Add-ins boost productivity by integrating services into Office
• Leverage existing investments when building Office Add-ins

38. Further reading…
• Getting Started with Office add-ins
• Office add-in Code Samples
• Office add-in Training videos & hands on labs
• Office add-in Snack videos
• Office add-in documentation
• Use Office UI Fabric in Office Add-ins

39. Related sessions Office Add-ins
• Overview
• This session, Bring Your Business Solutions Into Our Office Clients Using HTML
& JavaScript (level 200), T12, Jeremy Thake, Bram de Jager
• Getting started
• Today 16:45, Develop, Build, Package and Deploy Apps for Office with Visual
Studio (Level 300), T26, Bram de Jager, Jeremy Thake
• Deep Dive
• Thursday 15:15, Deep Dive Into Building Outlook Add-ins (level 300), TH27,
Jeremy Thake
• Today 18:00, LIVE Hackathon at ESPC15 with Jeremy Thake

40. Questions & answers
Thank you!
@bramdejager
http://www.linkedin.com/in/bramdejager
http://bramdejager.wordpress.com
http://spcb.codeplex.com