Office Command Add-ins – New generation of Add-insDRAGAN PANJKOVCONSULTANT, K2 NE, GERMANYMVP (OFFICE SERVERS AND SERVICES)www.dragan-panjkov.com

AGENDA

Introducing Office add-ins for developersTypes of add-insCommand add-ins development and samples

DRAGAN PANJKOV

Microsoft MVP – Office Servers and ServicesWorking with SharePoint since 2007Speaking at community events since 2008Speaking at conferences since 2009Consultant at K2 NE (www.k2.com)Previously: PlanB.; Microsoft; LanacoWebsite and blog: www.dragan-panjkov.comTwitter: @panjkov

New add-in modelOffice add-ins do not “live” on the Office clientCustom code executes in the browser, cloud, or on-premisesAcquire add-ins via centralized location• Add-in catalog (SharePoint or FileShare)• Public store (via submission process)• APIs for manual deployment

1 Intro to the Office add-ins

Modern add-in development

1 Intro to the Office add-ins

Add-ins

Add-in catalog and store

Vacation request

Event planning

Expense calculator

Learning management

Risk management

Help-desksupport

Products and platforms Services and data

Demo:Adding your first add-in

Enabling development scenariosWeb and cross-device readyIntegrate rich web content in Office contentInclude contextual content within Office add-ins

2 Office add-in samples

Pre-Office 2013Extending Office ribbon

COM add-in

Macro VSTO

Office 2013/2016Extending Office ribbon

COM add-in

Macro VSTO

Office add-ins

Document template

SharePoint add-ins

Office add-in samples

http://dev.office.com/Microsoft Confidential

Anatomy

2 Office add-in samples

Web server

Office Store or SharePoint add-in catalog

2 Office add-in samples

Content add-inAdd-in that runs within a document content with read/write accessExcel, PowerPoint, Access

Contextual mail add-inAdd-in launched contextually from a mail message or appointmentOutlook and Outlook Web Access (OWA)

Add-in commandCommand in the Office UI to launch add-in or perform UI-less operationWord, Excel, PowerPoint,OneNote, Outlook and Outlook Web Access (OWA)

Task pane add-inAdd-in that runs beside a document/mail with read/write accessWord, Excel, PowerPoint, Project, Outlook

2 Office add-in samples

Content add-inAdd-in that runs within a document content with read/write accessExcel, PowerPoint, Access

Contextual mail add-inAdd-in launched contextually from a mail message or appointmentOutlook and Outlook Web Access (OWA)

Add-in commandCommand in the Office UI to launch add-in or perform UI-less operationWord, Excel, PowerPoint,OneNote, Outlook and Outlook Web Access (OWA)

Task pane add-inAdd-in that runs beside a document/mail with read/write accessWord, Excel, PowerPoint, Project, Outlook

2 Office add-in samples

Content add-inAdd-in that runs within a document content with read/write accessExcel, PowerPoint, Access

Contextual mail add-inAdd-in launched contextually from a mail message or appointmentOutlook and Outlook Web Access (OWA)

Add-in commandCommand in the Office UI to launch add-in or perform UI-less operationWord, Excel, PowerPoint,OneNote, Outlook and Outlook Web Access (OWA)

Task pane add-inAdd-in that runs beside a document/mail with read/write accessWord, Excel, PowerPoint, Project, Outlook

2 Office add-in samples

Content add-inAdd-in that runs within a document content with read/write accessExcel, PowerPoint, Access

Contextual mail add-inAdd-in launched contextually from a mail message or appointmentOutlook and Outlook Web Access (OWA)

Add-in commandCommand in the Office UI to launch add-in or perform UI-less operationWord, Excel, PowerPoint,OneNote, Outlook and Outlook Web Access (OWA)

Task pane add-inAdd-in that runs beside a document/mail with read/write accessWord, Excel, PowerPoint, Project, Outlook

Add-in command2 Office add-in samples

What is an Command add-in?Markup segment in XML manifestAvailable in Outlook, Word, Excel, PowerPointCan perform one of operations:• executes a JavaScript function• shows a drop-down menu with one or more

buttons• launches a task pane

Demo:Office add-in command samples

Manifest

VersionOverrides XML<OfficeApp>... <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0"> <Description resid="residDescription" /> <Requirements> <!-- add information on requirements --> </Requirements> <Hosts> <Host xsi:type="MailHost"> <!-- add information on form factors --> </Host> </Hosts> <Resources> <!-- add information on resources --> </Resources></VersionOverrides>...</OfficeApp>

HostDetermines the Office application host for addin• Document (Word)• MailHost (Outlook)• Notebook (OneNote)• Presentation (PowerPoint)• Workbook (Excel)

Host XML...<Hosts> <Host xsi:type="Presentation"> <DesktopFormFactor> <FunctionFile resid="residDesktopFuncUrl" /> <GetStarted> <!-- GetStarted callout --> </GetStarted> <ExtensionPoint xsi:type="PrimaryCommandSurface"> <!-- information on this extension point --> </ExtensionPoint> <!-- possibly more ExtensionPoint elements --> </DesktopFormFactor> </Host></Hosts>...

ExtensionPoint elementDefines where the command will appear• PrimaryCommandSurface – ribbon • ContextMenu – right-clickContains tab/menu definitions, groups, controls, icons• CustomTab• OfficeTab• OfficeMenu

Development options NapaIn-browser web editor for building client-side Office add-insUses Office Online and OneDrive for file storageIntellisense for JavaScript and HTML5Allows for sharing and exportingDoesn’t expose full add-in manifest

3 Getting started

Development optionsVisual StudioFirst-class development experience with templates and debuggingExposes the full add-in manifest and automated deployment commandsAllows for web projects containing both client-side and server-side assets

3 Getting started

Development optionsyo office-Yeoman based generator-Node-Gulp-Visual Studio Code-Office UI Fabric

3 Getting started

Office UI FabricResponsive, mobile-first, front-end framework for developers that delivers instant look and feel of OfficeHandles typography, color, icons, animations, responsive grid layouts, and localization

3 Getting started

Demo: Building your first Office Command add-in

RECAPSurface your business solutions in Office user interfaceLeverage the building blocks of the platformUse the development platform of your choice