Office Add-ins best practices, VS tools, Yeoman tool for scaffolding office addins. VS code.

1. www.MostafaElzoghbi.com

3.  A Web page loaded inside an Office Application
 Office Add-ins enable you to extend Office clients such as Word, Excel,
PowerPoint, and Outlook using web technologies like HTML, CSS and
JavaScript.
 Embedded inline or as task pane within documents, mails or
appointments.
 Works in both Office Apps, Office for Mac, and Office Web Applications
 Office application extensions using Web technologies
 HTML 5 and CSS used to construct user interface
 JavaScript and jQuery used to add executable logic and event handlers
 Add-In can provide code to read/write content to/from Office documents
 Add-In can call web services hosted over Internet or running within local
network

4.  Office Add-Ins come in three different shapes/types
 Task Pane Add-In
 Content Add-In
 Outlook Add-In

5.  Web Extensibility Framework (WEF)
 Allows Web page content to render inside Office Application
 Allows Web page code to run within a set of constraints
 Allows Web page code to interact with Office documents
 Allows Web page code to interact with Exchange items
 WEF provides runtime environment for Office Add-Ins
 Office Add-Ins provide basis for a component architecture
 Office Add-Ins provide Add-Ins ability to publish to Add-In Catalog (SP)
and/or Office Store
 Office Add-Ins can be deployed in private networks

6.  Each Office Add-In is based on XML-based manifest
 Manifest points to a Web page
 Manifest defines the type of the Office Add-In
 Manifest defines which Office applications it supports
 Manifest defines required capabilities
App for Office
Manifest
<XML>
Web
Page
HTML+JS
Office Add-In
Catalog Server Web Server
Office Add-In

7.  You can use two types of UI elements
in your Office Add-ins:
 Add-in commands
 Insertable Task Panes
 Using Office UI Fabric

10.  Help users complete tasks quickly & efficiently.
 Enable new scenarios within Office.
 Embed complementary services within office.
 Create an effective Office Store listing.

11.  Easy on-boarding process.
 Teaching UI to educate users that includes sample data.
 Re-Inforce the VP of your add-in.
 Avoid Pop ups. 
 Make sign up process simple.
 Offer free trials. If your add-in requires a subscription, make some
functionality available without a subscription.

13.  Provide meaningful icons.
 Use supported sizes with transparent background color.
 Clear & simple button labels.
 Group related commands under a menu control.
 Provide a version of your add-in that also works on hosts that do not
support commands. (Office 2013)

16.  Ensure that the look and feel and functionality of your add-in
complements the Office experience.
 Keep users in control, favor content over chrome.
 Avoid scrolling, Optimize for 1366x768.
 Don’t include unlicensed images.

17.  Account for accessibility.
 Make sure that your Add-In UI is responsive for all input platforms
(including mouse/keyboard and touch)
 Optimize for touch. (Context.touchEnabled)
 Test Add-in in different modes (portrait and landscape)
 USE Office UI Fabric: dev.office.com/fabric

18.  Load time should be <= 500ms (Typical)
 All users interactions respond in less than a second. (Important)
 Use CDN for content/assets.
 Use web standards to optimize your web page.

19.  List your add-in with full profile including short descriptions, images,
What it does?
 Convey the VP of your add-in in the title and description.
 Create a website to help users find your add-in
 Publish to Office Store & promote it from your website.

20. Office Store—This is a public marketplace that Microsoft hosts and regulates
on Office.com.
Office Add-ins catalog on SharePoint—For task pane and content add-ins.
Exchange catalog—This is a private catalog for Outlook add-ins that is
available to users of the Exchange server
Network shared folder add-in catalog

23. 1. Create new Office Add-In project
2. Create/design user interface for Web page
3. Enhance Web page with CSS and JavaScript
4. Set project properties in manifest
5. Run!

25.  App for Office solution has two projects
 Top project contains add-In manifest
 Bottom project for remote web
 Remote Web Project is ASP.NET or Node.js Website
 Contains HTML, CSS and JavaScript source files
 Integration with jQuery library already included

26. App Manifest Designer

27. App Manifest - XML View

29. http://dev.office.com/
http://aka.ms/OfficeDevPnP
https://github.com/OfficeDev/PnP-OfficeAddins