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.

1. Become a Developer Hero by
Building Office Add-ins
Bill Ayers

3. Bill Ayers
Flow Simulation Ltd.
www.SPDoctor.net
BillA@flosim.com
@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

33. Licence Validation Flow
User
Utility.GetAppLicenseInformation

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