SlideShare a Scribd company logo

Getting started with office 365 add ins development 3 may 2018 - v2

•Download as PPTX, PDF•
•
Nilesh Shah
Nilesh Shah

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.

Related slideshows

Microsoft Teams as a Development Platform
Microsoft Teams as a Development PlatformMicrosoft Teams as a Development Platform
Microsoft Teams as a Development Platform
 
Getting started with Office 365 API's
Getting started with Office 365 API'sGetting started with Office 365 API's
Getting started with Office 365 API's
 
Introducción a las Apps para Office
Introducción a las Apps para OfficeIntroducción a las Apps para Office
Introducción a las Apps para Office
 
1 of 26
GETTING STARTED WITH OFFICE 365 ADD-INS DEVELOPMENT Nilesh Shah Tech Lead, RN Design Ltd. @NileshR_Shah www.nilesh.live C# CORNER – TORONTO CHAPTER
 Introductions  Office 365 add-ins development session  Refreshments/Break  Azure IoT, Stream Analytics, Power BI session  Networking 2
 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
 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
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 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 8
 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
 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
 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
 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
 VSTO Add-in  Apps for Office 14
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 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 18
 https://developer.microsoft.com/en-us/store/register 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 20
 VS 2015  VSTO Add-in  Apps for Office  VS 2017  Office 365 Add-in  Yeoman Office Add-in Project Generator  YO OFFICE 21
22 https://developer.microsoft.com/en-us/office/dev-program
 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 C# Corner Toronto Chapter Sponsored By: • Award winning Architecture / Design firm • Specializes in serving residential development industry
 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 @NileshR_Shah /nileshshah9 www.nilesh.live Questions? Sharing is Caring!

More Related Content

Getting started with office 365 add ins development 3 may 2018 - v2

  • 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
  • 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
  • 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