Develop, Build, Package and Deploy Office Add-ins with Visual Studio - ESPC 2015

Develop, Build, Package and Deploy Office Add-ins with Visual Studio

Jeremy Thake (Microsoft) Bram de Jager (Macaw)

Developer visionDATAUSERS

HTML

Change is coming…

Apps for Office =

Office Add-ins

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

INTRO TO OFFICE ADD-INSDevelop, Build, Package and Deploy Office Add-ins with Visual Studio

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

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

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

Word 2013,Excel 2013,Excel Online,PowerPoint 2013,PowerPoint Online,Project 2013

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

AccessExcel 2013Excel OnlinePowerPoint 2013,PowerPoint Online,Text/Pic

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

Outlook 2013Outlook Web AppOWA for Devices

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

Outlook 2013Outlook Web AppOWA for Devices

Win32 Online iPad iPhone Mac Android UWA

Read

Compose

APIs

View

Edit

Add-in Roadmap

Today

Backlog

Next

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

““

DEMO How does a Content Add-in look in Excel

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

DEVELOP AND BUILD OFFICE ADD-INSDevelop, Build, Package and Deploy Office Add-ins with Visual Studio

Anatomy of an app for OfficeHTML5, CSS, JavaScript (in all its glory!)

2Web applications hosted by any HTTP delivery mechanism

3Document-based manifest driven applications.

1

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

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

Office Add-in rich client runtime

Office Add-in web clients

““

DEMO Build a Wikipedia Task Pane add-in in Word

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

PACKAGE AND DEPLOY ADD-INSDevelop, Build, Package and Deploy Office Add-ins with Visual Studio

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

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.

What goes where?

Visual Studio 2013MS Build

WebDeploy package

XML Manifest

Office Client

File ShareCorporate Catalog

IIS WebserverAzure Website

Office Store

““

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

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

Catalog

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_USER\Software\Microsoft\Office\16.0\WEF\TrustedCatalogs

WRAP-UPDevelop, Build, Package and Deploy Office Add-ins with Visual Studio

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…

Write once, run everywhere

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

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

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

Questions & answers Thank you!

@bramdejagerhttp://www.linkedin.com/in/bramdejager http://bramdejager.wordpress.com http://spcb.codeplex.com