Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Patterns and Practices in Building Office Add-ins

670 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Patterns and Practices in Building Office Add-ins

  1. 1. www.MostafaElzoghbi.com
  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: dev.office.com/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.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
  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. http://dev.office.com/ http://aka.ms/OfficeDevPnP https://github.com/OfficeDev/PnP-OfficeAddins