This document provides an overview of developing Office 365 add-ins. It discusses why developers would build add-ins for Office 365, the different types of add-ins, and the structure of an add-in including the manifest and web application code. It also covers development options like using Visual Studio, Office UI Fabric, and deployment methods like the Office Store.

1. GETTING STARTED WITH OFFICE 365 ADD-INS
DEVELOPMENT
Nilesh Shah
Tech Lead, RN Design Ltd.
@NileshR_Shah www.nilesh.live
C# CORNER – TORONTO
CHAPTER
WEBIN
AR

2.  Nilesh Shah
 Tech Lead – MS .NET / C# / Azure / Office 365
 Chapter Lead – C# Corner Toronto Chapter
 Microsoft MVP
 C# Corner MVP
2

3.  Why develop for Office 365?
 Office 365 Add-ins development
 Overview
 Types of O365 add-ins
 Structure of an Office 365 add-in
 Office UI Fabric
 Development Options
 Demo
3

4. 4

5. 5

6.  Add-ins run inside an Office application
 Interact with the contents of the Office document
 Provide extra functionality
 It’s a web app integrated in Office application
 Use rich JavaScript API
 No separate installation needed
 Consists of manifest and web app code
6

7.  Extend Office functionality
 Provide productivity enhancements
 Maps, charts, and interactive visualizations, etc.
 Integrate widely used third party functionality
 Salesforce, MS Dynamics, QuickBooks
 Bring external data into Office
 Connect to MS Graph API/Other third party APIs
 Sell your add-in on most widely used platform
 Must meet Office Store validation policies
 Or host on your own
7

8.  Pre-Office 2013
 Office 365/2013/2016
8
Macro
Extending
Ribbon
Add-in
(COM/VSTO)
Macro
Extending
Ribbon
Add-in
(COM/VSTO)
Office 365
Add-in
SharePoint
Add-in
Document
template

9.  Unified development
 Same code can run in Office 2013/2016(Desktop App), Mobile app
or Office 365 (Online)
 Choice of platform – JS, Angular, React, VueJS, ..
 Ready building blocks
 Visual Studio project templates
 Office project generator (Yeoman)
 Office UI framework
9

10.  Manifest: defines the metadata about an add-in
 Name Description Version
 Publisher Permissions etc.
 Web app:
 consists of actual code (Web page + JS)
10

11. 11

12.  Task Pane Add-ins
 e.g. Word / Excel / PowerPoint add-ins that extend functionality
 Content Add-ins
 e.g. Word / Excel / PowerPoint add-ins that work on contents
 Outlook Add-ins
 Add-ins which work on mail items, calendar items
 Add-in commands
 UI less actions
12

13.  VSTO Add-in
 Apps for Office
13

14. 14

15. 15

16.  Official UX design framework for Office Add-ins
 Designed explicitly for Office development
 Based on Office best practices
 Responsive, Mobile first
 Seamless UX design & integration
 Same look and feel as Office clients
 Suitable for all platforms
 Offers a variety of UI elements
 Icons Fonts UI Components like buttons
 Available as:
 Fabric JS, Fabric React, Fabric AngularJS
16

17.  Test run:
 From VS *
 Side loading *
 Internal to your organization:
 Centralized deployment (O365 admin center)
 SharePoint Add-in catalog
 Exchange server (for Outlook add-ins only)
 Network share *
 Public/Commercial:
 AppSource (Office Store)
 Must conform to MS Office validation policies
17

18.  https://developer.microsoft.com/en-us/store/register
18

19.  Visual Studio 2015
 Apps for Office
 Visual Studio 2017
 O365 Add-in (not the VSTO add-in)
 Yeoman Office Project generator
 Generates Office Add-in skeleton
 Use any editor of your choice
 Visual Studio Code
19

20.  VS 2015
 VSTO Add-in
 Apps for Office
 VS 2017
 Office 365 Add-in
 Yeoman Office Add-in Project Generator
 YO OFFICE
20

21. 21
https://developer.microsoft.com/en-us/office/dev-program

22.  https://dev.office.com/
 Office 365 Dev center on GitHub
 https://github.com/officedev
 YO Office
 https://github.com/officedev/generator-office
 Office 365 for Developers Courses
 https://mva.microsoft.com/product-training/office-development
 Office 365 Developer program
 https://dev.office.com/devprogram
 My blogs:
 https://nilesh.live/blogs/office365/
22

23.  Newcome IT Professionals Meetup
 12th May, 11.30 am – 12.30 pm
 Vaughan Public Library, Islington & Rutherford
 Office 365 Add-ins and Azure IoT Hub
 31st May 6 – 8 pm @ Microsoft Mississauga
23

24. 24
@NileshR_Shah
/nileshshah9
www.nilesh.live
Questions?
Sharing is Caring!