The document discusses an introduction to developing Office 365 add-ins. It covers the types of Office 365 add-ins, the structure of an add-in including the manifest and web app code, development options using Visual Studio or Yeoman, and use of the Office UI Fabric framework. It also provides an overview of the development process and deployment options for testing and releasing add-ins.

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

2.  Introductions
 Office 365 add-ins development session
 Refreshments/Break
 Azure IoT, Stream Analytics, Power BI session
 Networking
2

3.  Nilesh Shah
 Tech Lead – MS .NET / C# / Azure / Office 365
 Chapter Lead – C# Corner Toronto Chapter
 Microsoft MVP
 C# Corner MVP
 Sponsor
 RN Design Ltd.
3

4.  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
4

5. 5

6. 6

7.  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
7

8.  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
8

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

10.  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
10

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

12. 12

13.  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
13

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

15. 15

16. 16

17.  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
17

18.  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
18

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

20.  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
20

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

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

23.  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/
23

24. 24
C# Corner Toronto Chapter
Sponsored By:
• Award winning Architecture / Design firm
• Specializes in serving residential
development industry

25.  Webinar: Office 365 development
 5th May, 9 am – 10.30 am
 https://register.gotowebinar.com/register/3808696574423907331
 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
25

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