UX design patterns for Office Add-ins

This repository provides sample implementations in HTML, CSS, and JavaScript of common UX design patterns for Office Add-ins.

When designing Office Add-ins, the UX design of your add-in should provide compelling experiences that extend Office. For example, your add-in should provide a first-run experience, a first-class UX experience, and smooth transitions between pages, among other things. Providing a clean, modern UX experience increases user retention and adoption of your add-in. This repo has UX resources for developers that implement:

  • Common UX design patterns based on best practices.
  • Office Fabric components and styles.
  • Add-ins that look like a natural extension of the default Office UI.

For overview information and the types of UX design patterns available, see UX design pattern templates for Office Add-ins.

Important: After customizing these design patterns to meet your requirements, be sure to test your add-in on all platforms where your add-in will be available. These UX design patterns were tested using Office 2016 and Windows 10.

Using the UX design patterns

You can use the UX designer specifications as a guide when you create your own UX design, or you can add the source code directly to your project. To add the source code:

  1. Clone this repo.
  2. Copy the assets folder, and the code folder for the individual pattern you choose to your add-in project.
  3. Incorporate the individual pattern into your add-in. For example:
    • Edit the source location or add-in command URL in the manifest.
    • Use the UX design pattern as a template for other pages.
    • Link to or from the UX design pattern.

Known issues

  • Running some code files outside of an add-in project throws a JavaScript error.
    • Resolution: Ensure you add these files to an Office add-in project.
  • After converting these design patterns to a Single Page App (SPA), all sections of the HTML page become top-aligned and overlaps each other.
    • Resolution: When converting from HTML additional wrapper DIVs may be added. Ensure that the height of these additional DIVs are reset properly. For example, if a parent DIV is set to a height of 100%, a child DIV has no height, and a grandchild DIV is set to 100%, you need to set the child DIV to 100% to layout the sections properly.

Additional resources

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Copyright (c) Microsoft Corporation 2016. All rights reserved.