Overview of Office 365 development Office 365 Add-in development, coding and demo Event: C# Corner Toronto chapter's monthly meetup organized at Microsoft Canada's Toronto downtown office.

1. OFFICE 365 DEVELOPMENT
OVERVIEW
Nilesh Shah
Tech Lead, RN Design Ltd.
@NileshR_Shah www.nilesh.live
C# CORNER – TORONTO CHAPTER

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

3. ▪ Introduction to C# Corner
▪ Introduction of Toronto chapter members
▪ Office 365 development overview session
▪ Refreshments/Break
▪ Power BI session
▪ Networking
3

4. ▪ Online global community for IT professionals and developers
▪ 4+ million monthly users worldwide
▪ Users contribute to articles, forums, blogs, and videos.
4

5. 5

6. ▪ Chapter is a local user group where
members share technical
knowledge by hosting monthly
meetups, workshops and webinars.
▪ 33 chapters worldwide
▪ 2 chapters in Canada
▪ Regina, SK
▪ Toronto
6

7. ▪ Nilesh Shah
▪ Tech Lead, .NET & O365 dev.
▪ TOGAF 9.1 EA, C# Corner MVP
▪ Vivek Patel
▪ Team Lead, Data & Analytics
▪ Microsoft Data Platform MVP
▪ Nik Shahriyar
▪ Sr.Technical Team Lead
▪ Sr. BI Consultant
7

8. ▪ Theme:
▪ Make developers aware of the different Office 365 development
options
▪ Set stage for future deep dive sessions
8

9. ▪ Introduction:
▪ Why,What, How
▪ Office 365 Add-ins development
▪ Office UI Fabric
▪ Microsoft Graph API development
▪ MS Graph Explorer
▪ Office 365 Developer program
▪ Register Office 365 Application
▪ Demo
9

10. 10

11. ▪ Office 365 Add-in development
▪ Word, Excel, PowerPoint, Outlook
▪ MS Graph API
▪ Office 365 APIs
▪ SharePoint Online
▪ Others:
▪ MS Teams
▪ MS Flow
▪ OneNote
▪ Yammer
11

12. ▪ Visual Studio 2015
▪ Apps for Office
▪ Visual Studio 2017
▪ O354 Add-in (not theVSTO add-in)
▪ Yeoman Office Project generator
▪ Generates Office Add-in skeleton
▪ Use any editor of your choice
▪ Visual Studio Code
12

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

14. ▪ 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
14

15. 15

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

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

18. 18

19. ▪ 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
19

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

21. ▪ 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
21

22. ▪ https://developer.microsoft.com/en-us/store/register
22

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

24. ▪ 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/
24

25. 25

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

27. ▪ 5th April
▪ Same venue: Microsoft Canada Toronto Office
▪ Same time: 6:00 PM – 8:00 PM
▪ Topics
▪ What’s new in MS Graph API
▪ Power BI topic
▪ Keep looking meetup.com
▪ https://www.meetup.com/C-Corner-Toronto-Chapter-Meetup/
27