Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Patterns and Practices in Building Office Add-ins


Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Patterns and Practices in Building Office Add-ins

  1. 1.
  2. 2.  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
  3. 3.  Office Add-Ins come in three different shapes/types  Task Pane Add-In  Content Add-In  Outlook Add-In
  4. 4.  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
  5. 5.  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
  6. 6.  You can use two types of UI elements in your Office Add-ins:  Add-in commands  Insertable Task Panes  Using Office UI Fabric
  7. 7.  Help users complete tasks quickly & efficiently.  Enable new scenarios within Office.  Embed complementary services within office.  Create an effective Office Store listing.
  8. 8.  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.
  9. 9.  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)
  10. 10.  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.
  11. 11.  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:
  12. 12.  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.
  13. 13.  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.
  14. 14. Office Store—This is a public marketplace that Microsoft hosts and regulates on 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
  15. 15. 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!
  16. 16.  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
  17. 17. App Manifest Designer
  18. 18. App Manifest - XML View
  19. 19.