Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .markdownlint.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"MD013": false,
"MD025": false,
"MD033": {
"allowed_elements": ["kbd"]
Expand Down
16 changes: 16 additions & 0 deletions .openpublishing.redirection.json
Original file line number Diff line number Diff line change
Expand Up @@ -1369,6 +1369,22 @@
{
"source_path": "docs/outlook/turn-exchange-tokens-on-off.md",
"redirect_url": "/office/dev/add-ins/develop/faq-legacy-exchange-tokens"
},
{
"source_path": "docs/develop/support-ie-11.md",
"redirect_url": "/office/dev/add-ins/concepts/browsers-used-by-office-web-add-ins"
},
{
"source_path": "docs/testing/debug-add-ins-using-devtools-edge-legacy.md",
"redirect_url": "/office/dev/add-ins/testing/debug-add-ins-overview"
},
{
"source_path": "docs/testing/debug-add-ins-using-f12-tools-ie.md",
"redirect_url": "/office/dev/add-ins/testing/debug-add-ins-overview"
},
{
"source_path": "docs/testing/ie-11-testing.md",
"redirect_url": "/office/dev/add-ins/concepts/browsers-used-by-office-web-add-ins"
}
]
}
6 changes: 1 addition & 5 deletions docs/concepts/add-in-development-best-practices.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Best practices for developing Office Add-ins
description: Apply the best practices when developing Office Add-ins.
ms.topic: best-practice
ms.date: 07/28/2025
ms.date: 11/06/2025
ms.localizationpriority: medium
---

Expand Down Expand Up @@ -153,10 +153,6 @@ Ready to share your add-in with the world? Here's how to get started.
> [!IMPORTANT]
> [!INCLUDE [Microsoft Marketplace enterprise info](../includes/appsource-enterprise.md)]

## Support older Microsoft webviews and Office versions (recommended but not required)

See [Support older Microsoft webviews and Office versions](../develop/support-ie-11.md).

## See also

- [Office Add-ins platform overview](../overview/office-add-ins.md)
Expand Down
125 changes: 11 additions & 114 deletions docs/concepts/browsers-used-by-office-web-add-ins.md

Large diffs are not rendered by default.

12 changes: 3 additions & 9 deletions docs/concepts/requirements-for-running-office-add-ins.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Requirements for running Office Add-ins
description: Learn about the client and server requirements that an end user needs to run Office Add-ins.
ms.date: 08/13/2025
ms.date: 11/06/2025
ms.localizationpriority: medium
---

Expand Down Expand Up @@ -47,13 +47,7 @@ The following software is required for developing an Office Add-in for the suppo
If you have a valid Microsoft 365 subscription and you don't have access to the Office client, you can [download and install the latest version of Office](https://support.microsoft.com/office/4414eaaf-0478-48be-9c42-23adc4716658).

- Microsoft Edge must be installed, but doesn't have to be the default browser. To support Office Add-ins, the Office client that acts as host uses webview components that are part of Microsoft Edge.

> [!NOTE]
>
> - Strictly speaking, it's possible to develop add-ins on a machine that has Internet Explorer 11 (IE11) installed, but not Microsoft Edge. However, IE11 is used to run add-ins only on certain older combinations of Windows and Office versions. See [Browsers and webview controls used by Office Add-ins](browsers-used-by-office-web-add-ins.md) for more details. We don't recommend using such old environments as your primary add-in development environment. However, if you're likely to have customers of your add-in that are working in these older combinations, we recommend that you support the Trident webview that's provided by Internet Explorer. For more information, see [Support older Microsoft webviews and Office versions](../develop/support-ie-11.md).
> - Internet Explorer's Enhanced Security Configuration (ESC) must be turned off for Office Web Add-ins to work. If you are using a Windows Server computer as your client when developing add-ins, note that ESC is turned on by default in Windows Server.

- One of the following as the default browser: Internet Explorer 11, or the latest version of Microsoft Edge, Chrome, Firefox, or Safari (Mac OS).
- One of the following as the default browser: Microsoft Edge, Chrome, Firefox, or Safari (Mac OS).
- An HTML and JavaScript editor such as [Visual Studio Code](https://code.visualstudio.com/), [Visual Studio and the Microsoft Developer Tools](https://www.visualstudio.com/features/office-tools-vs), or non-Microsoft web development tool.

## Client requirements: OS X desktop
Expand All @@ -68,7 +62,7 @@ The following are the minimum client versions of Office on Mac that support Offi

## Client requirements: Browser support for Office web clients and SharePoint

Any browser, except Internet Explorer, that supports ECMAScript 5.1, HTML5, and CSS3, such as Microsoft Edge, Chrome, Firefox, or Safari (Mac OS).
Any browser that supports ECMAScript 5.1, HTML5, and CSS3, such as Microsoft Edge, Chrome, Firefox, or Safari (Mac OS).

## Client requirements: Non-Windows smartphone and tablet

Expand Down
2 changes: 1 addition & 1 deletion docs/design/add-in-commands.md
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ Add-in commands are currently supported on the following platforms, except for l
- Office on the web
- Office on Windows (Version 1604 (Build 6769.2000) or later, connected to a Microsoft 365 subscription)
- Office on Mac (Version 15.33 (17040900) or later, connected to a Microsoft 365 subscription)
- Perpetual Office 2019 or later on Windows or on Mac
- Perpetual Office 2021 or later on Windows or on Mac

> [!NOTE]
> For information about support in Outlook, see [Outlook support notes](../develop/create-addin-commands.md#outlook-support-notes).
Expand Down
4 changes: 2 additions & 2 deletions docs/design/add-in-icons-fresh.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
title: Fresh style icon guidelines for Office Add-ins
description: Guidelines for using Fresh style icons in Office Add-ins.
ms.date: 08/25/2025
ms.date: 11/06/2025
ms.topic: best-practice
ms.localizationpriority: medium
---

# Fresh style icon guidelines for Office Add-ins

Perpetual Office 2016 and later use Microsoft's Fresh style iconography. If you would prefer that your icons match the Monoline style of Microsoft 365, see [Monoline style icon guidelines for Office Add-ins](add-in-icons-monoline.md).
Older Office clients use Microsoft's Fresh style iconography. If you would prefer that your icons match the Monoline style of Microsoft 365, see [Monoline style icon guidelines for Office Add-ins](add-in-icons-monoline.md).

## Office Fresh visual style

Expand Down
4 changes: 2 additions & 2 deletions docs/design/add-in-icons-monoline.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
title: Monoline style icon guidelines for Office Add-ins
description: Guidelines for using Monoline style icons in Office Add-ins.
ms.date: 02/12/2025
ms.date: 11/06/2025
ms.topic: best-practice
ms.localizationpriority: medium
---

# Monoline style icon guidelines for Office Add-ins

Monoline style iconography are used in Office apps. If you'd prefer that your icons match the Fresh style of perpetual Office 2016 and later, see [Fresh style icon guidelines for Office Add-ins](add-in-icons-fresh.md).
Monoline style iconography are used in Office apps. If you'd prefer that your icons match the Fresh style of older Office clients, see [Fresh style icon guidelines for Office Add-ins](add-in-icons-fresh.md).

## Office Monoline visual style

Expand Down
9 changes: 3 additions & 6 deletions docs/design/add-in-icons.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Icon guidelines for Office Add-ins
description: Get an overview of how to design icons and the Fresh and Monoline design styles for add-in commands.
ms.date: 11/03/2025
ms.date: 11/06/2025
ms.topic: overview
ms.localizationpriority: medium
---
Expand All @@ -11,7 +11,7 @@ ms.localizationpriority: medium
Icons are the visual representation of a behavior or concept. They are often used to add meaning to controls and commands. Visuals, either realistic or symbolic, enable the user to navigate the UI the same way signs help users navigate their environment. They should be simple, clear, and contain only the necessary details to enable customers to quickly parse what action will occur when they choose a control.

> [!NOTE]
> This article about designing icons for ribbon buttons. For guidance about icons that represent the add-in in the app acquisition and managment UIs of Microsoft 365 applications, see [Design icons for add-in acquisisiton and management](microsoft-365-extension-management-icons.md).
> This article about designing icons for ribbon buttons. For guidance about icons that represent the add-in in the app acquisition and management UIs of Microsoft 365 applications, see [Design icons for add-in acquisition and management](microsoft-365-extension-management-icons.md).

Office app ribbon interfaces have a standard visual style. This ensures consistency and familiarity across Office apps. The guidelines will help you design a set of PNG assets for your solution that fit in as a natural part of Office.

Expand All @@ -22,10 +22,7 @@ Many HTML containers contain controls with iconography. Use Fabric Core’s cust
[Add-in commands](add-in-commands.md) add buttons, text, and icons to the Office UI. Your add-in command buttons should provide meaningful icons and labels that clearly identify the action the user is taking when they use a command. The following articles provide stylistic and production guidelines to help you design icons that integrate seamlessly with Office.

- For the Monoline style of Microsoft 365, see [Monoline style icon guidelines for Office Add-ins](add-in-icons-monoline.md).
- For the Fresh style of perpetual Office 2016 and later, see [Fresh style icon guidelines for Office Add-ins](add-in-icons-fresh.md).

> [!NOTE]
> You must choose one style or the other and your add-in will use the same icons whether it's running in Microsoft 365 or perpetual Office.
- For the Fresh style of older Office clients, see [Fresh style icon guidelines for Office Add-ins](add-in-icons-fresh.md).

## See also

Expand Down
19 changes: 4 additions & 15 deletions docs/design/task-pane-add-ins.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Task panes in Office Add-ins
description: Task panes give users access to interface controls that run code to modify documents or emails, or display data from a data source.
ms.date: 08/18/2023
ms.date: 11/06/2025
ms.topic: overview
ms.localizationpriority: medium
---
Expand All @@ -28,18 +28,7 @@ Task panes are interface surfaces that typically appear on the right side of the

The following images show the various task pane sizes with the Office app ribbon at a 1366x768 resolution. For Excel, additional vertical space is required to accommodate the formula bar.

*Figure 2. Office 2016 desktop task pane sizes*

![Desktop task pane sizes at 1366x768 resolution.](../images/office-2016-taskpane-sizes.png)

- Excel - 320x455 pixels
- PowerPoint - 320x531 pixels
- Word - 320x531 pixels
- Outlook - 348x535 pixels

<br/>

*Figure 3. Office task pane sizes*
*Figure 2. Office task pane sizes*

![Task pane sizes at 1366x768 resolution.](../images/office-365-taskpane-sizes.png)

Expand All @@ -54,13 +43,13 @@ Personality menus can obstruct navigational and commanding elements located near

For Windows, the personality menu measures 12x32 pixels, as shown.

*Figure 4. Personality menu on Windows*
*Figure 3. Personality menu on Windows*

![The personality menu on Windows desktop.](../images/personality-menu-win.png)

For Mac, the personality menu measures 26x26 pixels, but floats 8 pixels in from the right and 6 pixels from the top, which increases the space to 34x32 pixels, as shown.

*Figure 5. Personality menu on Mac*
*Figure 4. Personality menu on Mac*

![The personality menu on Mac desktop.](../images/personality-menu-mac.png)

Expand Down
16 changes: 1 addition & 15 deletions docs/develop/add-ins-with-angular2.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Develop Office Add-ins with Angular
description: Use Angular to create an Office Add-in as a single page application.
ms.topic: best-practice
ms.date: 08/25/2025
ms.date: 11/06/2025
ms.localizationpriority: medium
---

Expand Down Expand Up @@ -114,17 +114,3 @@ ng serve --aot

> [!NOTE]
> To learn more about the Angular Ahead-of-Time (AOT) compiler, see the [official guide](https://angular.io/guide/aot-compiler).

## Support the Trident webview control

Older Office clients use the Trident webview control provided by Internet Explorer 11, as described in [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). *Angular versions 12 and later are incompatible with the Trident webview, so an add-in based on Angular version 12 or later won't run on older Office clients.*

If you need to support older versions of Office, you must use an Angular version between 2 and 11, such as Angular 10. In addition, there are a couple Angular-specific considerations to make if your add-in needs to support these Office versions.

Angular depends on a few `window.history` APIs. These APIs don't work in the Trident webview. When these APIs don't work, your add-in may not work properly, for example, it may load a blank task pane. To mitigate this, Office.js nullifies those APIs. However, if you're dynamically loading Office.js, AngularJS may load before Office.js. In that case, you should disable the `window.history` APIs by adding the following code to your add-in's **index.html** page.

```js
<script type="text/javascript">window.history.replaceState=null;window.history.pushState=null;</script>
```

If your add-in supports Trident-based browser controls, you'll need to use [hash location strategy](https://angular.io/api/common/HashLocationStrategy) instead of the default [path location strategy](https://angular.io/api/common/PathLocationStrategy). The path location strategy requires HTML5 support which Trident doesn't provide.
7 changes: 2 additions & 5 deletions docs/develop/configure-your-add-in-to-use-a-shared-runtime.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Configure your Office Add-in to use a shared runtime
description: Configure your Office Add-in to use a shared runtime to support additional ribbon, task pane, and custom function features.
ms.topic: how-to
ms.date: 03/12/2025
ms.date: 11/06/2025
ms.localizationpriority: high
---

Expand Down Expand Up @@ -90,9 +90,6 @@ Follow these steps to configure a new or existing project to use a shared runtim

- The `<Runtimes>` section must be entered after the `<Host>` element in the exact order shown in the following XML.

> [!NOTE]
> If your add-in includes the `<Runtimes>` element in the manifest (required for a shared runtime) and the conditions for using WebView2 (Microsoft Edge Chromium-based) are met, it uses that control. If the conditions are not met, then it uses the Trident (Internet Explorer 11) webview control regardless of the Windows or Microsoft 365 version. For more information, see [Runtimes](/javascript/api/manifest/runtimes) and [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md).

```xml
<VersionOverrides ...>
<Hosts>
Expand Down Expand Up @@ -235,7 +232,7 @@ Configuring a shared runtime enables the following scenarios.
- Custom functions will have full CORS support.
- Custom functions can call Office.js APIs to read spreadsheet document data.

For Office on Windows, the shared runtime uses WebView2 (Microsoft Edge Chromium-based) if the conditions for using it are met as explained in [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). Otherwise, it uses Trident (Internet Explorer 11). Additionally, any buttons that your add-in displays on the ribbon will run in the same shared runtime. The following image shows how custom functions, the ribbon UI, and the task pane code will all run in the same runtime.
Additionally, any buttons that your add-in displays on the ribbon will run in the same shared runtime. The following image shows how custom functions, the ribbon UI, and the task pane code will all run in the same runtime.

![Diagram of a custom function, task pane, and ribbon buttons all running in a shared browser runtime in Excel.](../images/custom-functions-in-browser-runtime.png)

Expand Down
7 changes: 2 additions & 5 deletions docs/develop/create-sso-office-add-ins-aspnet.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Create an ASP.NET Office Add-in that uses single sign-on (SSO)
description: A step-by-step guide for how to create (or convert) an Office Add-in with an ASP.NET backend to use single sign-on (SSO).
ms.date: 05/20/2023
ms.date: 11/06/2025
ms.localizationpriority: medium
---

Expand Down Expand Up @@ -88,10 +88,7 @@ Use the following values for placeholders for the subsequent app registration st

### Get the access token and call the application server REST API

1. In the **Office-Add-in-ASPNETCore-WebAPI** project, open the **wwwroot\js\HomeES6.js** file. It already has code that ensures that Promises are supported, even in the Trident (Internet Explorer 11) webview control, and an `Office.onReady` call to assign a handler to the add-in's only button.

> [!NOTE]
> As the name suggests, the HomeES6.js uses JavaScript ES6 syntax because using `async` and `await` best shows the essential simplicity of the SSO API. When the localhost server is started, this file is transpiled to ES5 syntax so that the sample will support Trident.
1. In the **Office-Add-in-ASPNETCore-WebAPI** project, open the **wwwroot\js\HomeES6.js** file. It already has code that ensures that Promises are supported and an `Office.onReady` call to assign a handler to the add-in's only button.

1. In the `getUserFileNames` function, replace `TODO 1` with the following code. About this code, note:

Expand Down
7 changes: 2 additions & 5 deletions docs/develop/create-sso-office-add-ins-nodejs.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Create a Node.js Office Add-in that uses single sign-on
description: Learn how to create a Node.js-based add-in that uses Office Single Sign-on.
ms.date: 05/20/2023
ms.date: 11/06/2025
ms.localizationpriority: medium
---

Expand Down Expand Up @@ -98,10 +98,7 @@ Use the following values for placeholders for the subsequent app registration st

### Call our web server REST API

1. In your code editor, open the file `public\javascripts\ssoAuthES6.js`. It already has code that ensures that Promises are supported, even in the Trident (Internet Explorer 11) webview control, and an `Office.onReady` call to assign a handler to the add-in's only button.

> [!NOTE]
> As the name suggests, the ssoAuthES6.js uses JavaScript ES6 syntax because using `async` and `await` best shows the essential simplicity of the SSO API. When the localhost server is started, this file is transpiled to ES5 syntax so that the sample will support Trident.
1. In your code editor, open the file `public\javascripts\ssoAuthES6.js`. It already has code that ensures that Promises are supported and an `Office.onReady` call to assign a handler to the add-in's only button.

1. In the `getFileNameList` function, replace `TODO 1` with the following code. About this code, note:

Expand Down
Loading