Download to read offline
Uploaded byMostafa
Patterns and Practices in Building Office Add-ins
This document discusses Office Add-ins, which allow users to extend Office applications like Word, Excel, PowerPoint and Outlook using web technologies. Office Add-ins can be embedded inline within documents or as a task pane. They are defined using an XML manifest and include HTML, CSS and JavaScript. The document outlines how to design, develop and deploy effective Office Add-ins.
More Related Content
Similar to Patterns and Practices in Building Office Add-ins
Patterns and Practices in Building Office Add-ins
- 1.
- 3. A Webpage 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-Inscome in three different shapes/types Task Pane Add-In Content Add-In Outlook Add-In
- 5. Web ExtensibilityFramework (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 OfficeAdd-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 canuse two types of UI elements in your Office Add-ins: Add-in commands Insertable Task Panes Using Office UI Fabric
- 10. Help userscomplete tasks quickly & efficiently. Enable new scenarios within Office. Embed complementary services within office. Create an effective Office Store listing.
- 11. Easy on-boardingprocess. 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 meaningfulicons. 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 thatthe 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 foraccessibility. 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 timeshould 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 youradd-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 isa 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 newOffice 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 forOffice 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.
- 27. App Manifest -XML View
- 29.
Editor's Notes
- #4 An App for Office can be seen as a Web page loaded inside an Office Application. In some cases it will appear embedded inline within the document. In other cases it might appear as a task pane or within a message in Outlook. Note that the architecture for Apps for Office has been designed to work in both Office Applications and Office Web Applications. WEF and Apps for Office allow Office applications to be extended in such as way so that they can leverage Web technologies such as HTML 5 and CSS for rendering user interface as well as JavaScript and jQuery to add behavior. When you write the JavaScript code for an App for Office, you can call REST APIs such as those added to SharePoint 2013 to retrieve and update data from across network.
- #5 When you begin to design an add-in, you must pick one of the three different shapes. You can create a document-based add-in as either a Task Pane add-in or a Content add-in. Alternatively, you can create a Outlook Add-In that targets Outlook and Outlook OWA. Requirements for running Office Add-Ins: https://msdn.microsoft.com/EN-US/library/office/dn833104.aspx Add-In host availability: http://dev.office.com/add-in-availability
- #6 The Web Extensibility Framework (WEF) is a new development platform used to extend Office applications. This platform allows Web page content to render inside Office Application and to interact with Office documents such as Word document and Excel workbooks and Exchange items such as messages and appointments. The WEF development platform is used to develop Office Add-Ins. Office Add-Ins provide basis for a component architecture which allows developers to build apps which target Office application and Office Web applications such as Excel services and Outlook Web Access. WEF and the Office Add-Ins development model provide foundation for distribution of apps using an app directory such as the Office Store and the App Corporate Catalog used to deploy apps in private networks.
- #7 Every Office Add-In must be distributed with an XML-based manifest which contains information about the app itself. For example, the app manifest contains an address to a Web page on the Internet which is used to load the app. The app manifest also includes information which indicates which Office applications it supports. The app manifest also defines the required capabilities which represent the set of permissions that the app needs in order to run and complete its work.
- #8 Ref.: https://dev.office.com/docs/add-ins/overview/office-add-ins
- #9 Ref.: https://dev.office.com/docs/add-ins/overview/office-add-ins
- #10 Ref.: https://dev.office.com/docs/add-ins/overview/add-in-development-best-practices
- #12 Ref.: https://dev.office.com/docs/add-ins/design/add-in-development-best-practices
- #14 Add-in command design best practices Use commands to represent a specific action with a clear and specific outcome for users. Do not combine multiple actions in a single button. Provide granular actions that make common tasks within your add-in more efficient to perform. Minimize the number of steps an action takes to complete. Provide meaningful icons and labels for buttons that clearly identify the action the user is taking. For all icons: Use PNG format with a transparent background. Include all eight supported sizes. This creates the best experience for all supported resolutions. Match the Office visual style. For example: Keep your shapes simple and avoid multiple colors. Complex graphics are difficult to see at smaller sizes and resolutions. Don't reuse visual metaphors for dissimilar commands. The same icon used for different actions will cause confusion. Make your button labels clear and succinct. Use a combination of visual and textual information to convey meaning. Test your icons in light and dark Office themes and high contrast settings. Note that icons might be difficult to see on dark backgrounds or in high contrast mode. Use consistent icon sizes and positions to help with visual alignment on the ribbon.
- #15 Ref.: https://msdn.microsoft.com/EN-US/library/office/mt590883.aspx#bk_firstrun
- #17 Office UI fabric is available on NuGet, bower, and npm Ref.: http://dev.office.com/fabric/get-started
- #18 Office UI Fabric is a responsive, mobile-first, front-end framework that you can use to apply the Office Design Language to your web experiences. Whether you’re creating a new app or add-in or updating an existing one, Fabric makes it easy to get up and running. Office UI Fabric: https://github.com/OfficeDev/Office-UI-Fabric#get-started
- #19 Table with details for lower and upper limits for interactivity duration: https://dev.office.com/docs/add-ins/design/add-in-development-best-practices
- #21 Ref.: https://dev.office.com/docs/add-ins/publish/publish Office Store: In the Office Store, developers around the world can publish and sell their custom Office solutions, and then end users and IT professionals can download them for personal or corporate use. When a developer uploads an add-in to the Office Store, Microsoft validates the code. For example, it verifies that the add-in manifest markup is valid and complete. If the code is valid, Microsoft digitally signs the add-in package. The Office Store then takes care of the consumer download experience from discovery to purchase, upgrades, and updates. Office Add-Ins catalog on SP: This new catalog and development platform enables IT departments to use a streamlined method to distribute Office and SharePoint Add-ins to managed users from a central location. Add-in catalogs are available to all SharePoint 2013 customers (including Office 365 and SharePoint on-premise). An add-in catalog enables publishing and management of both internally created add-ins as well as add-ins that are available in the Office Store and licensed for corporate use. Exchange catalog: It enables publishing and management of corporate Outlook add-ins, including internally created add-ins as well as add-ins that are available in the Office Store and licensed for corporate use. Network shared folder add-in catalog: IT departments and developers can also deploy task pane and content add-ins to a central network shared folder, where the manifest files will be stored and managed. Users can then acquire add-ins by specifying this shared folder as a trusted catalog, or IT departments can configure this shared folder as a trusted catalog by using a registry setting.
- #22 Reference: http://yeoman.io/ Creating add-ins using yeoman tool: https://code.visualstudio.com/Docs/runtimes/office
- #26 The slide shows the initial structure of a task pane app created with the Visual Studio 2012.
- #27 This slide shows the Visual Studio designer for an app manifest in a task pane app. It will look different for other types of Apps for Office.
- #28 There are times when it is also useful or necessary to examine or update the manifest in XML view. You can enter XML view by clicking the XML file in the Solution Explorer.