diff --git a/.markdownlint.json b/.markdownlint.json index 47a6050709..ac8efbd8e7 100644 --- a/.markdownlint.json +++ b/.markdownlint.json @@ -1,4 +1,5 @@ { + "MD013": false, "MD025": false, "MD033": { "allowed_elements": ["kbd"] diff --git a/.openpublishing.redirection.json b/.openpublishing.redirection.json index 1e81523483..fd61fcdd39 100644 --- a/.openpublishing.redirection.json +++ b/.openpublishing.redirection.json @@ -1369,6 +1369,26 @@ { "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" + }, + { + "source_path": "docs/design/add-in-icons-fresh.md", + "redirect_url": "/office/dev/add-ins/design/add-in-icons" } ] } diff --git a/docs/concepts/add-in-development-best-practices.md b/docs/concepts/add-in-development-best-practices.md index 0674c288e7..4d82fe8d91 100644 --- a/docs/concepts/add-in-development-best-practices.md +++ b/docs/concepts/add-in-development-best-practices.md @@ -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 --- @@ -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) diff --git a/docs/concepts/browsers-used-by-office-web-add-ins.md b/docs/concepts/browsers-used-by-office-web-add-ins.md index 16e6563a6e..3cfede9549 100644 --- a/docs/concepts/browsers-used-by-office-web-add-ins.md +++ b/docs/concepts/browsers-used-by-office-web-add-ins.md @@ -2,138 +2,40 @@ title: Browsers and webview controls used by Office Add-ins description: Specifies how the operating system and Office version determine what webview is used by Office Add-ins. ms.topic: concept-article -ms.date: 10/17/2024 +ms.date: 11/06/2025 ms.localizationpriority: medium --- # Browsers and webview controls used by Office Add-ins -Office Add-ins are web applications that are displayed using iframes when running in Office on the web. In Office for desktop and mobile clients, Office Add-ins use an embedded browser control (also known as a webview). Add-ins also need a JavaScript engine to run the JavaScript. Both the embedded browser and the engine are supplied by a browser installed on the user's computer. In this article, "webview" refers to the combination of a webview control and a JavaScript engine. +Office Add-ins are web applications that are displayed using iframes when running in Office on the web. In Office for desktop and mobile clients, Office Add-ins use an embedded browser control (also known as a webview). Add-ins also need a JavaScript engine to run the JavaScript. Both the embedded browser and the engine are supplied by a browser installed on the user's computer. In this article, "webview" refers to the combination of a webview control and a JavaScript engine. Which webview is used depends on the computer's operating system. -Which webview is used depends on: +## Browsers by platform -- The computer's operating system. -- Whether the add-in is running in Office on the web, in Office downloaded from a Microsoft 365 subscription, or in perpetual Office 2016 or later. -- Within the perpetual versions of Office on Windows, whether the add-in is running in the "retail" or "volume-licensed" variation. - -> [!IMPORTANT] -> **Webviews from Internet Explorer and Microsoft Edge Legacy are still used in Office Add-ins** -> -> Some combinations of platforms and Office versions, including volume-licensed perpetual versions through Office 2019, still use the webview controls that come with Internet Explorer 11 (called "Trident") and Microsoft Edge Legacy (called "EdgeHTML") to host add-ins, as explained in this article. Internet Explorer 11 was disabled in Windows 10 and Windows 11 in February 2023, and the UI for launching it was removed; but it's still installed on those operating systems. So, Trident and other functionality from Internet Explorer can still be called programmatically by Office. -> -> We recommend (but don't require) that you continue to support these combinations, at least in a minimal way, by providing users of your add-in a graceful failure message when your add-in is launched in one of these webviews. Keep these additional points in mind: -> -> - Office on the web no longer opens in Internet Explorer or Microsoft Edge Legacy. Consequently, [Microsoft Marketplace](/partner-center/marketplace-offers/submit-to-appsource-via-partner-center) doesn't test add-ins in Office on these web browsers. -> - Microsoft Marketplace still tests for combinations of platform and Office *desktop* versions that use Trident or EdgeHTML. However, it only issues a warning when the add-in doesn't support these webviews; the add-in isn't rejected by Microsoft Marketplace. -> - The [Script Lab tool](../overview/explore-with-script-lab.md) no longer supports Trident. -> -> For more information about supporting Trident or EdgeHTML, including configuring a graceful failure message on your add-in, see [Support older Microsoft webviews and Office versions](../develop/support-ie-11.md). - -The following sections specify which browser is used for the various platforms and operating systems. - -## Non-Windows platforms - -For these platforms, the platform alone determines the browser that's used. +The following table specifies which browser is used for the various platforms and operating systems. |OS|Office version|Browser| |:-----|:-----|:-----| -|any|Office on the web|The browser in which Office is opened.
(But note that Office on the web will not open in Internet Explorer.
Attempting to do so opens Office on the web in Edge.) | +|any|Office on the web|The browser in which Office is opened.| +|Windows|any|Microsoft Edge (Chromium-based) with WebView2*| |Mac|any|Safari with WKWebView| |iOS|any|Safari with WKWebView| |Android|any|Chrome| +\* WebView2 is installed with Office by default for [supported versions of Office](https://support.microsoft.com/office/818c68bc-d5e5-47e5-b52f-ddf636cf8e16). + > [!IMPORTANT] > [Conditional Access](/azure/active-directory/conditional-access/overview) isn't supported for Office Add-ins on iOS or Android. Those add-ins use the Safari-based WKWebView or the Android-based WebView, not an Edge-based browser control. -## Windows - -An add-in running on Windows might use any of three different webviews: - -- **WebView2**, which is provided by Microsoft Edge (Chromium-based). -- **EdgeHTML**, which is provided by Microsoft Edge Legacy. -- **Trident+**, which is provided by Internet Explorer 11. The "+" on the end indicates that Office Add-ins use additional functionality from Internet Explorer 11 that isn't built into Trident itself. - -### Perpetual versions of Office on Windows - -For perpetual versions of Office on Windows, the browser that's used is determined by the Office version, whether the license is retail or volume-licensed, and whether the Edge WebView2 (Chromium-based) is installed. The version of Windows doesn't matter, but note that Office Add-ins aren't supported on versions earlier than Windows 7 and Office 2021 and later aren't supported on versions earlier than Windows 10. - -To determine whether Office 2016 or Office 2019 is retail or volume-licensed, use the format of the Office version and build number. (For Office 2021 and later, the distinction between volume-licensed and retail doesn't matter.) - -- **Retail**: For both Office 2016 and 2019, the format is `YYMM (xxxxx.xxxxxx)`, ending with two blocks of five digits; for example, `2206 (Build 15330.20264)`. -- **Volume-licensed**: - - For Office 2016, the format is `16.0.xxxx.xxxxx`, ending with two blocks of *four* digits; for example, `16.0.5197.1000`. - - For Office 2019, the format is `1808 (xxxxx.xxxxxx)`, ending with two blocks of *five* digits; for example, `1808 (Build 10388.20027)`. Note that the year and month is always `1808`. - -| Office version | Retail vs. Volume-licensed | WebView2 installed? | Browser | -|:-----|:-----|:-----|:-----| -| Office 2024 | Doesn't matter | Yes1 | WebView2 (Microsoft Edge2 Chromium-based) | -| Office 2021 | Doesn't matter | Yes1 | WebView2 (Microsoft Edge2 Chromium-based) | -| Office 2019 | Retail | Yes1 | WebView2 (Microsoft Edge2 Chromium-based) | -| Office 2019 | Retail | No | EdgeHTML (Microsoft Edge Legacy)2, 3
If Edge isn't installed, Trident+ (Internet Explorer 11) is used. | -| Office 2019 | Volume-licensed | Doesn't matter | Trident+ (Internet Explorer 11) | -| Office 2016 | Retail | Yes1 | WebView2 (Microsoft Edge2 Chromium-based) | -| Office 2016 | Retail | No | EdgeHTML (Microsoft Edge Legacy)2, 3
If Edge isn't installed, Trident+ (Internet Explorer 11) is used. | -| Office 2016 | Volume-licensed | Doesn't matter | Trident+ (Internet Explorer 11) | - -1 On Windows versions prior to Windows 11, the WebView2 control must be installed so that Office can embed it. It's installed with perpetual Office 2021 or later; but it isn't automatically installed with Microsoft Edge. If you have an earlier version of perpetual Office, use the instructions for installing the control at [Microsoft Edge WebView2 / Embed web content ... with Microsoft Edge WebView2](https://developer.microsoft.com/microsoft-edge/webview2/). - -2 When you use either EdgeHTML or WebView2, the Windows Narrator (sometimes called a "screen reader") reads the `` tag in the page that opens in the task pane. In Trident+, the Narrator reads the title bar of the task pane, which comes from the add-in name that's specified in the add-in's manifest. - -<sup>3</sup> If your add-in uses an add-in only manifest and includes the `<Runtimes>` element in the manifest or it uses the unified manifest and it includes an "extensions.runtimes.lifetime" property, then it won't use EdgeHTML. If the conditions for using WebView2 are met, then the add-in uses WebView2. Otherwise, it uses Trident+. For more information, see [Runtimes](/javascript/api/manifest/runtimes) and [Activate add-ins with events](../develop/event-based-activation.md). - -### Microsoft 365 subscription versions of Office on Windows - -For subscription Office on Windows, the browser that's used is determined by the operating system, the Office version, and whether the WebView2 control is installed. - -|OS|Office version| WebView2 installed?|Browser| -|:-----|:-----|:-----|:-----| -|<ul><li>Windows 11</li><li>Windows 10</li><li>Windows 8.1</li><li>Windows Server 2022</li><li>Windows Server 2019</li><li>Windows Server 2016</li></ul>| Microsoft 365 ver. >= 16.0.13530.20424<sup>1</sup>| Yes<sup>2</sup>| WebView2 (Microsoft Edge<sup>3</sup> Chromium-based) | -|<ul><li>Window 11</li><li>Windows 10 ver. >= 1903</li></ul>| Microsoft 365 ver. >= 16.0.13530.20424<sup>1</sup>| No |EdgeHTML (Microsoft Edge Legacy)<sup>3, 4</sup>| -|<ul><li>Windows 11</li><li>Windows 10 ver. >= 1903</li></ul>| Microsoft 365 ver. >= 16.0.11629 *AND* < 16.0.13530.20424<sup>1</sup>| Doesn't matter|EdgeHTML (Microsoft Edge Legacy)<sup>3, 4</sup>| -|<ul><li>Windows 11</li><li>Windows 10 ver. >= 1903</li></ul>| Microsoft 365 ver. < 16.0.11629<sup>1</sup>| Doesn't matter|Trident+ (Internet Explorer 11)| -|<ul><li>Windows 10 ver. < 1903</li><li>Windows 8.1</li></ul>| Microsoft 365 | No| Trident+ (Internet Explorer 11)| -|<ul><li>Windows 7</li></ul>| Microsoft 365| Doesn't matter | Trident+ (Internet Explorer 11)| - -<sup>1</sup> See the [update history page](/officeupdates/update-history-office365-proplus-by-date) and how to [find your Office client version and update channel](https://support.microsoft.com/office/932788b8-a3ce-44bf-bb09-e334518b8b19) for more details. - -<sup>2</sup> On Windows versions prior to Windows 11, the WebView2 control must be installed so that Office can embed it. It's installed with Microsoft 365, Version 2101 or later, but it isn't automatically installed with Microsoft Edge. If you have an earlier version of Microsoft 365, use the instructions for installing the control at [Microsoft Edge WebView2 / Embed web content ... with Microsoft Edge WebView2](https://developer.microsoft.com/microsoft-edge/webview2/). On Microsoft 365 builds before 16.0.14326.xxxxx, you must also create the registry key **HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\WEF\Win32WebView2** and set its value to `dword:00000001`. - -<sup>3</sup> When you use either EdgeHTML or WebView2, the Windows Narrator (sometimes called a "screen reader") reads the `<title>` tag in the page that opens in the task pane. In Trident+, the Narrator reads the title bar of the task pane, which comes from the add-in name that's specified in the add-in's manifest. - -<sup>4</sup> If your add-in uses an add-in only manifest and includes the `<Runtimes>` element in the manifest or it uses the unified manifest and it includes an "extensions.runtimes.lifetime" property, then it won't use EdgeHTML. If the conditions for using WebView2 are met, then the add-in uses WebView2. Otherwise, it uses Trident+. For more information, see [Runtimes](/javascript/api/manifest/runtimes) and [Activate add-ins with events](../develop/event-based-activation.md). - -## Working with Trident+ (Internet Explorer 11) - -Trident+ doesn't support JavaScript versions later than ES5. If any of your add-in's users have platforms that use Trident+, then to use the syntax and features of ECMAScript 2015 or later, you have two options. - -- Write your code in ECMAScript 2015 (also called ES6) or later JavaScript, or in TypeScript, and then compile your code to ES5 JavaScript using a compiler such as [babel](https://babeljs.io/) or [tsc](https://www.typescriptlang.org/index.html). -- Write in ECMAScript 2015 or later JavaScript, but also load a [polyfill](https://en.wikipedia.org/wiki/Polyfill_(programming)) library such as [core-js](https://github.com/zloirock/core-js) that enables IE to run your code. - -For more information about these options, see [Support older Microsoft webviews and Office versions](../develop/support-ie-11.md). - -Also, Trident+ doesn't support some HTML5 features such as media, recording, and location. To learn more, see [Determine the webview the add-in is running in at runtime](../develop/support-ie-11.md#determine-the-webview-the-add-in-is-running-in-at-runtime). - -## Troubleshoot EdgeHTML and WebView2 (Microsoft Edge) issues - -### Service Workers aren't working - -Office Add-ins don't support Service Workers when EdgeHTML is used. They're supported with WebView2. +## Troubleshoot WebView2 issues ### Scroll bar doesn't appear in task pane -By default, scroll bars in EdgeHTML and WebView2 are hidden until hovered over. To ensure that the scroll bar is always visible, the CSS styling that applies to the `<body>` element of the pages in the task pane should include the [-ms-overflow-style](https://devdoc.net/web/developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style.html) property and it should be set to `scrollbar`. - -### When debugging with the Microsoft Edge DevTools, the add-in crashes or reloads - -Setting breakpoints in the [Microsoft Edge DevTools](https://apps.microsoft.com/detail/9mzbfrmz0mnj) for EdgeHTML can cause Office to think that the add-in is hung. It will automatically reload the add-in when this happens. To prevent this, add the following Registry key and value to the development computer: `[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Office\16.0\Wef]"AlertInterval"=dword:00000000`. - -### When the add-in tries to open, get "ADD-IN ERROR We can't open this add-in from the localhost" error - -One known cause is that EdgeHTML requires that localhost be given a loopback exemption on the development computer. Follow the instructions at [Cannot open add-in from localhost](/office/troubleshoot/error-messages/cannot-open-add-in-from-localhost). +By default, scroll bars in WebView2 are hidden until hovered over. To ensure that the scroll bar is always visible, the CSS styling that applies to the `<body>` element of the pages in the task pane should include the [-ms-overflow-style](https://devdoc.net/web/developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style.html) property and it should be set to `scrollbar`. ### Get errors trying to download a PDF file -Directly downloading blobs as PDF files in an add-in isn't supported with EdgeHTML or WebView2. The workaround is to create a simple web application that downloads blobs as PDF files. In your add-in, call the `Office.context.ui.openBrowserWindow(url)` method and pass the URL of the web application. This will open the web application in a browser window outside of Office. +Directly downloading blobs as PDF files in an add-in isn't supported with WebView2. The workaround is to create a simple web application that downloads blobs as PDF files. In your add-in, call the `Office.context.ui.openBrowserWindow(url)` method and pass the URL of the web application. This will open the web application in a browser window outside of Office. ## WIP-protected documents @@ -146,8 +48,6 @@ There's an extra step needed for Add-ins to run in a document with [WIP (Windows - **Min Version**: * - **Max Version**: * -If the WIP policy hasn't been added, the add-in defaults to an older runtime. In the sections [Perpetual versions of Office on Windows](#perpetual-versions-of-office-on-windows) and [Microsoft 365 subscription versions of Office on Windows](#microsoft-365-subscription-versions-of-office-on-windows) earlier in this article, substitute **EdgeHTML (Microsoft Edge Legacy)** for **WebView2 (Microsoft Edge Chromium-based)** wherever the latter appears. - To determine if a document is WIP-protected, follow these steps. 1. Open the file. @@ -155,9 +55,6 @@ To determine if a document is WIP-protected, follow these steps. 1. Select **Info**. 1. In the upper section of the **Info** page, just below the file name, a WIP-enabled document will have a briefcase icon followed by **Managed by Work (...)**. -> [!NOTE] -> Support for WebView2 in WIP-enabled documents was added with build 16.0.16626.20132. If you're on an older build, your runtime defaults to **EdgeHTML (Microsoft Edge Legacy)**, regardless of policy. - ## See also - [Requirements for Running Office Add-ins](requirements-for-running-office-add-ins.md) diff --git a/docs/concepts/requirements-for-running-office-add-ins.md b/docs/concepts/requirements-for-running-office-add-ins.md index 29e361c8d3..27614a2141 100644 --- a/docs/concepts/requirements-for-running-office-add-ins.md +++ b/docs/concepts/requirements-for-running-office-add-ins.md @@ -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 --- @@ -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 @@ -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 diff --git a/docs/design/add-in-commands.md b/docs/design/add-in-commands.md index 54bf73fca6..72ce257d6d 100644 --- a/docs/design/add-in-commands.md +++ b/docs/design/add-in-commands.md @@ -128,9 +128,9 @@ You can specify a custom contextual tab; that is, a tab that is only visible on Add-in commands are currently supported on the following platforms, except for limitations specified in the subsections of [Command capabilities](#command-capabilities) earlier. - 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 +- Office on Windows connected to a Microsoft 365 subscription +- Office on Mac connected to a Microsoft 365 subscription +- 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). diff --git a/docs/design/add-in-icons-fresh.md b/docs/design/add-in-icons-fresh.md deleted file mode 100644 index b8a7236be6..0000000000 --- a/docs/design/add-in-icons-fresh.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -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.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). - -## Office Fresh visual style - -The Fresh icons include only essential communicative elements. Non-essential elements including perspective, gradients, and light source are removed. The simplified icons support faster parsing of commands and controls. Follow this style to best fit with Office perpetual clients. - -## Best practices - -Follow these guidelines when you create your icons. - -|Do|Don't| -|:---|:---| -|Keep visuals simple and clear, focusing on the key elements of the communication.| Don't use artifacts that make your icon look messy.| -|Use the Office icon language to represent behaviors or concepts.|Don't repurpose Fabric Core glyphs for add-in commands in the Office app ribbon or contextual menus. Fabric Core icons are stylistically different and won't match.| -|Reuse common Office visual metaphors such as paintbrush for format or magnifying glass for find.|Don't reuse visual metaphors for different commands. Using the same icon for different behaviors and concepts can cause confusion. | -|Redraw your icons to make them small or larger. Take the time to redraw cutouts, corners, and rounded edges to maximize line clarity. |Don't resize your icons by shrinking or enlarging in size. This can lead to poor visual quality and unclear actions. Complex icons created at a larger size may lose clarity if resized to be smaller without redraw. | -|Use a white fill for accessibility. Most objects in your icons will require a white background to be legible across Office UI themes and in high-contrast modes. |Avoid relying on your logo or brand to communicate what an add-in command does. Brand marks aren't always recognizable at smaller icon sizes and when modifiers are applied. Brand marks often conflict with Office app ribbon icon styles, and can compete for user attention in a saturated environment. | -|Use the PNG format with a transparent background. |*None*| -|Avoid localizable content in your icons, including typographic characters, indications of paragraph rags, and question marks. |*None*| - -## Icon size recommendations and requirements - -Office desktop icons are bitmap images. Different sizes will render depending on the user's DPI setting and touch mode. Include all eight supported sizes to create the best experience in all supported resolutions and contexts. The following are the supported sizes - three are required. - -- 16 px (Required) -- 20 px -- 24 px -- 32 px (Required) -- 40 px -- 48 px -- 64 px (Recommended, best for Mac) -- 80 px (Required) - -> [!IMPORTANT] -> For an image that is your add-in's representative icon, see [Create effective listings in Microsoft Marketplace and within Office](/partner-center/marketplace-offers/create-effective-office-store-listings#create-an-icon-for-your-add-in) for size and other requirements. - -Make sure to redraw your icons for each size rather than shrink them to fit. - -![Illustration of the recommendation to redraw icons per size rather than shrink icons. For example, you may need to use fewer elements in a small icon rather than just scaling down a bigger image.](../images/icon-resizing.png) - -## Icon anatomy and layout - -Office icons are typically comprised of a base element with action and conceptual modifiers overlaid. Action modifiers represent concepts such as add, open, new, or close. Conceptual modifiers represent status, alteration, or a description of the icon. - -To create commands that align with the Office UI, follow layout guidelines for the base element and modifiers. This ensures that your commands look professional and that your customers will trust your add-in. If you make exceptions to these guidelines, do so intentionally. - -The following image shows the layout of base elements and modifiers in an Office icon. - -![An icon base element in the center with a modifier on the lower right and an action modifier on the upper left.](../images/icon-layouts.png) - -- Center base elements in the pixel frame with empty padding all around. -- Place action modifiers on the top left. -- Place conceptual modifiers on the bottom right. -- Limit the number of elements in your icons. At 32 px, limit the number of modifiers to a maximum of two. At 16 px, limit the number of modifiers to one. - -### Base element padding - -Place base elements consistently across sizes. If base elements can't be centered in the frame, align them to the top left, leaving the extra pixels on the bottom right. For best results, apply the padding guidelines listed in the table in the following section. - -### Modifiers - -All modifiers should have a 1 px transparent cutout between each element, including the background. Elements shouldn't directly overlap. Create whitespace between rules and edges. Modifiers can vary slightly in size, but use these dimensions as a starting point. - -|Icon size|Padding around base element|Modifier size| -|:---|:---|:---| -|16 px|0|9 px| -|20 px|1px|10 px| -|24 px|1px|12 px| -|32 px|2px|14 px| -|40 px|2px|20 px| -|48 px|3px|22 px| -|64 px|5px|29 px| -|80 px|5px|38 px| - -## Icon colors - -> [!NOTE] -> These color guidelines are for ribbon icons used in [Add-in commands](add-in-commands.md). These icons aren't rendered with Fluent UI. - -Office icons have a limited color palette. Use the colors listed in the following table to guarantee seamless integration with the Office UI. Apply the following guidelines to the use of color. - -- Use color to communicate meaning rather than for embellishment. It should highlight or emphasize an action, status, or an element that explicitly differentiates the mark. -- If possible, use only one additional color beyond gray. Limit additional colors to two at the most. -- Colors should have a consistent appearance in all icon sizes. Office icons have slightly different color palettes for different icon sizes. 16 px and smaller icons are slightly darker and more vibrant than 32 px and larger icons. Without these subtle adjustments, colors appear to vary across sizes. - -|Color name|RGB|Hex|Color|Category| -|:---|:---|:---|:---|:---| -|Text Gray (80)|80, 80, 80|#505050| ![Gray 80 color for text.](../images/color-text-gray-80.png) |Text| -|Text Gray (95)|95, 95, 95|#5F5F5F| ![Gray 95 color for text.](../images/color-text-gray-95.png) |Text| -|Text Gray (105)|105, 105, 105|#696969| ![Gray 105 color for text.](../images/color-text-gray-105.png) |Text| -|Dark Gray 32|128, 128, 128|#808080| ![Dark gray color for 32 px and larger.](../images/color-dark-gray-32.png) |32 px and above| -|Medium Gray 32|158, 158, 158|#9E9E9E| ![Medium gray color for 32 px and larger.](../images/color-medium-gray-32.png) |32 px and above| -|Light Gray ALL|179, 179, 179|#B3B3B3| ![Light gray color for all image sizes.](../images/color-light-gray-all.png) |All sizes| -|Dark Gray 16|114, 114, 114|#727272| ![Dark gray color for 16 px and smaller.](../images/color-dark-gray-16.png) |16 px and below| -|Medium Gray 16|144, 144, 144|#909090| ![Medium gray color for 16 px and smaller.](../images/color-medium-gray-16.png) |16 and below| -|Blue 32|77, 130, 184|#4d82B8| ![Blue color for 32 px and larger.](../images/color-blue-32.png) |32 px and above| -|Blue 16|74, 125, 177|#4A7DB1| ![Blue color for 16 px and smaller.](../images/color-blue-16.png) |16 px and below| -|Yellow ALL|234, 194, 130|#EAC282| ![Yellow color for all image sizes.](../images/color-yellow-all.png) |All sizes| -|Orange 32|231, 142, 70|#E78E46| ![Orange color for 32 px and larger.](../images/color-orange-32.png) |32 px and above| -|Orange 16|227, 142, 70|#E3751C| ![Orange color for 16 px and smaller.](../images/color-orange-16.png) |16 px and below| -|Pink ALL|230, 132, 151|#E68497| ![Pink color for all image sizes.](../images/color-pink-all.png) |All sizes| -|Green 32|118, 167, 151|#76A797| ![Green color for 32 px and larger.](../images/color-green-32.png) |32 px and above| -|Green 16|104, 164, 144|#68A490| ![Green color for 16 px and smaller.](../images/color-green-16.png) |16 px and below| -|Red 32|216, 99, 68|#D86344| ![Red color for 32 px and larger.](../images/color-red-32.png) |32 px and above| -|Red 16|214, 85, 50|#D65532| ![Red color for 16 px and smaller.](../images/color-red-16.png) |16 px and below| -|Purple 32|152, 104, 185|#9868B9| ![Purple color for 32 px and larger.](../images/color-purple-32.png) |32 px and above| -|Purple 16|137, 89, 171|#8959AB| ![Purple color for 16 px and smaller.](../images/color-purple-16.png) |16 px and below| - -## Icons in high contrast modes - -Office icons are designed to render well in high contrast modes. Foreground elements are well differentiated from backgrounds to maximize legibility and enable recoloring. In high contrast modes, Office will recolor any pixel of your icon with a red, green, or blue value less than 190 to full black. All other pixels will be white. In other words, each RGB channel is assessed where 0-189 values are black and 190-255 values are white. Other high-contrast themes recolor using the same 190 value threshold but with different rules. For example, the high-contrast white theme will recolor all pixels greater than 190 opaque but all other pixels as transparent. Apply the following guidelines to maximize legibility in high-contrast settings. - -- Aim to differentiate foreground and background elements along the 190 value threshold. -- Follow Office icon visual styles. -- Use colors from our icon palette. -- Avoid the use of gradients. -- Avoid large blocks of color with similar values. - -## See also - -### Unified manifest reference - -- [`"extensions.ribbons"` array](/microsoft-365/extensibility/schema/extension-ribbons-array) - -### Add-in only manifest reference - -- [Icon manifest element](/javascript/api/manifest/icon) -- [IconUrl manifest element](/javascript/api/manifest/iconurl) -- [HighResolutionIconUrl manifest element](/javascript/api/manifest/highresolutioniconurl) -- [Create an icon for your add-in](/partner-center/marketplace-offers/create-effective-office-store-listings#create-an-icon-for-your-add-in) diff --git a/docs/design/add-in-icons-monoline.md b/docs/design/add-in-icons-monoline.md index 586ed85f6a..0699128a74 100644 --- a/docs/design/add-in-icons-monoline.md +++ b/docs/design/add-in-icons-monoline.md @@ -1,50 +1,46 @@ --- 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). - -## Office Monoline visual style - The goal of the Monoline style to have consistent, clear, and accessible iconography to communicate action and features with simple visuals, ensure the icons are accessible to all users, and have a style that is consistent with those used elsewhere in Windows. The following guidelines are for 3rd party developers who want to create icons for features that will be consistent with the icons already present Office products. -### Design principles +## Design principles - Simple, clean, clear. - Contain only necessary elements. - Inspired by Windows icon style. - Accessible to all users. -#### Convey meaning +### Convey meaning - Use descriptive elements such as a page to represent a document or an envelope to represent mail. - Use the same element to represent the same concept. For example, mail is always represented by an envelope, not a stamp. - Use a core metaphor during concept development. -#### Reduction of elements +### Reduction of elements - Reduce the icon to its core meaning, using only elements that are essential to the metaphor. - Limit the number of elements in an icon to two, regardless of icon size. -#### Consistency +### Consistency Sizes, arrangement, and color of icons should be consistent. -#### Styling +### Styling -##### Perspective +#### Perspective Monoline icons are forward-facing by default. Certain elements that require perspective and/or rotation, such as a cube, are allowed, but exceptions should be kept to a minimum. -##### Embellishment +#### Embellishment Monoline is a clean minimal style. Everything uses flat color, which means there are no gradients, textures, or light sources. diff --git a/docs/design/add-in-icons.md b/docs/design/add-in-icons.md index af103752dc..6efe938849 100644 --- a/docs/design/add-in-icons.md +++ b/docs/design/add-in-icons.md @@ -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 --- @@ -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. @@ -19,13 +19,7 @@ Many HTML containers contain controls with iconography. Use Fabric Core’s cust ## Design icons for add-in commands -[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. +[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. See [Monoline style icon guidelines for Office Add-ins](add-in-icons-monoline.md). ## See also diff --git a/docs/design/task-pane-add-ins.md b/docs/design/task-pane-add-ins.md index 43daf005c4..3965550532 100644 --- a/docs/design/task-pane-add-ins.md +++ b/docs/design/task-pane-add-ins.md @@ -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 --- @@ -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) @@ -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) diff --git a/docs/develop/add-ins-with-angular2.md b/docs/develop/add-ins-with-angular2.md index 5b375ea4ed..1781a2d73f 100644 --- a/docs/develop/add-ins-with-angular2.md +++ b/docs/develop/add-ins-with-angular2.md @@ -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 --- @@ -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. diff --git a/docs/develop/agents-toolkit-overview.md b/docs/develop/agents-toolkit-overview.md index f81271229a..1d268de557 100644 --- a/docs/develop/agents-toolkit-overview.md +++ b/docs/develop/agents-toolkit-overview.md @@ -50,7 +50,7 @@ Install the latest version of Agents Toolkit into Visual Studio Code as describe ### Sideload in Excel, PowerPoint, or Word > [!NOTE] -> This section only applies if you are developing the add-in on a *Windows* computer. +> This section only applies if you are developing the add-in on a *Windows* computer. 1. Select **View** | **Run** in Visual Studio Code. In the **RUN AND DEBUG** dropdown menu, select one of these options: diff --git a/docs/develop/configure-your-add-in-to-use-a-shared-runtime.md b/docs/develop/configure-your-add-in-to-use-a-shared-runtime.md index aed58bb40f..2f035b0b34 100644 --- a/docs/develop/configure-your-add-in-to-use-a-shared-runtime.md +++ b/docs/develop/configure-your-add-in-to-use-a-shared-runtime.md @@ -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 --- @@ -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> @@ -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) diff --git a/docs/develop/create-sso-office-add-ins-aspnet.md b/docs/develop/create-sso-office-add-ins-aspnet.md index 430ab01237..2ad103192e 100644 --- a/docs/develop/create-sso-office-add-ins-aspnet.md +++ b/docs/develop/create-sso-office-add-ins-aspnet.md @@ -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 --- @@ -56,14 +56,14 @@ Use the following values for placeholders for the subsequent app registration st ```xml <WebApplicationInfo> - <Id>Enter_client_ID_here</Id> - <Resource>api://localhost:44355/Enter_client_ID_here</Resource> - <Scopes> + <Id>Enter_client_ID_here</Id> + <Resource>api://localhost:44355/Enter_client_ID_here</Resource> + <Scopes> <Scope>Files.Read</Scope> - <Scope>profile</Scope> + <Scope>profile</Scope> <Scope>openid</Scope> - </Scopes> - </WebApplicationInfo> + </Scopes> + </WebApplicationInfo> ``` 1. Replace the placeholder "Enter_client_ID_here" _in both places_ in the markup with the **Application ID** that you copied when you created the **Office-Add-in-ASPNET-SSO** app registration. This is the same ID you used for the application ID in the appsettings.json file. @@ -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 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: diff --git a/docs/develop/create-sso-office-add-ins-nodejs.md b/docs/develop/create-sso-office-add-ins-nodejs.md index a7e5ef528e..9c4b372cbd 100644 --- a/docs/develop/create-sso-office-add-ins-nodejs.md +++ b/docs/develop/create-sso-office-add-ins-nodejs.md @@ -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 --- @@ -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 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: diff --git a/docs/develop/debug-office-add-ins-in-visual-studio.md b/docs/develop/debug-office-add-ins-in-visual-studio.md index a9a31e258f..17ec25ceb6 100644 --- a/docs/develop/debug-office-add-ins-in-visual-studio.md +++ b/docs/develop/debug-office-add-ins-in-visual-studio.md @@ -1,7 +1,7 @@ --- title: Debug Office Add-ins in Visual Studio description: Use Visual Studio to debug Office Add-ins in the Office desktop client on Windows. -ms.date: 02/19/2025 +ms.date: 11/06/2025 ms.localizationpriority: medium --- @@ -81,12 +81,6 @@ When Visual Studio builds the project, it performs the following tasks: 1. If this is the first add-in project that you have deployed to the local IIS web server, you may be prompted to install a Self-Signed Certificate to the current user's Trusted Root Certificate store. This is required for IIS Express to display the content of your add-in correctly. -> [!NOTE] -> If Office uses the Edge Legacy webview control (EdgeHTML) to run add-ins on your Windows computer, Visual Studio may prompt you to add a local network loopback exemption. This is required for the webview control to be able to access the website deployed to the local IIS web server. You can also change this setting anytime in Visual Studio under **Tools** > **Options** > **Office Tools (Web)** > **Web Add-In Debugging**. To find out what webview control is used on your Windows computer, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). - -> [!TIP] -> [!INCLUDE[Identify the webview through the add-in UI](../includes/identify-webview-in-ui.md)] - Next, Visual Studio does the following: 1. Modifies the [SourceLocation](/javascript/api/manifest/sourcelocation) element of the add-in only manifest file (that was copied to the `_ProjectName_\bin\Debug\OfficeAppManifests` directory) by replacing the `~remoteAppUrl` token with the fully qualified address of the start page (for example, `https://localhost:44302/Home.html`). @@ -102,11 +96,6 @@ Next, Visual Studio does the following: ### Debug the add-in -The best method for debugging an add-in in Visual Studio 2022 depends on whether the add-in is running in WebView2, which is the webview control that is associated with Microsoft Edge (Chromium), or an older webview control. If your computer is using WebView2, see [Use the built-in Visual Studio debugger to debug on the desktop](#use-the-built-in-visual-studio-debugger-to-debug-on-the-desktop). For any other webview control, see [Use the browser developer tools to debug on the desktop](#use-the-browser-developer-tools-to-debug-on-the-desktop). To determine which webview control is being used, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). - -> [!TIP] -> [!INCLUDE[Identify the webview through the add-in UI](../includes/identify-webview-in-ui.md)] - #### Use the built-in Visual Studio debugger to debug on the desktop 1. Set breakpoints, as needed, in the source JavaScript or TypeScript files. You can do this either before or after you start the add-in as described in the earlier section [Start the add-in project](#start-the-add-in-project). If setting a breakpoint causes the Internet Information Services (IIS) server to shut down, restart debugging after you have set your breakpoints. @@ -125,11 +114,7 @@ The best method for debugging an add-in in Visual Studio 2022 depends on whether 1. Launch the add-in in the Office application if it isn't already open. For example, if it's a task pane add-in, it'll have added a button (for example, a **Show Taskpane** button) to the **Home** ribbon or to a custom ribbon tab that's installed with the add-in. Select the button on the ribbon. -1. Open the [personality menu](../design/task-pane-add-ins.md#personality-menu) and then choose **Attach a debugger**. This action opens the debugging tools for the webview control that Office is using to run add-ins on your Windows computer. You can set breakpoints and step through code as described in one of the following articles: - - - [Debug add-ins using developer tools for Internet Explorer](../testing/debug-add-ins-using-f12-tools-ie.md) - - [Debug add-ins using developer tools for Edge Legacy](../testing/debug-add-ins-using-devtools-edge-legacy.md) - - [Debug add-ins using developer tools in Microsoft Edge (Chromium-based)](../testing/debug-add-ins-using-devtools-edge-chromium.md) +1. Open the [personality menu](../design/task-pane-add-ins.md#personality-menu) and then choose **Attach a debugger**. This action opens the debugging tools for the webview control that Office is using to run add-ins on your Windows computer. You can set breakpoints and step through code as described in the article [Debug add-ins using developer tools in Microsoft Edge](../testing/debug-add-ins-using-devtools-edge-chromium.md). 1. To make changes to your code, first stop the debugging session in Visual Studio and close the Office application. Make your changes, and start a new debugging session. @@ -189,20 +174,15 @@ Next, Visual Studio does the following: ### Debug the add-in on the web -The best method for debugging an add-in in Visual Studio 2022 depends on whether the add-in is running in WebView2, which is the webview control that is associated with Microsoft Edge (Chromium), or an older webview control. If your computer is using WebView2, see [Use the built-in Visual Studio debugger to debug on the web](#use-the-built-in-visual-studio-debugger-to-debug-on-the-web). For any other webview control, see [Use the browser developer tools to debug on the web](#use-the-browser-developer-tools-to-debug-on-the-web). To determine which webview control is being used, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). - -> [!TIP] -> [!INCLUDE[Identify the webview through the add-in UI](../includes/identify-webview-in-ui.md)] - #### Use the built-in Visual Studio debugger to debug on the web 1. Set breakpoints, as needed, in the source JavaScript or TypeScript files. You can do this either before or after you start the add-in as described in the earlier section [Start the add-in project on the web](#start-the-add-in-project-on-the-web). -1. When the add-in is running, use the add-in's UI to run the code that contains your breakpoints. +1. When the add-in is running, use the add-in's UI to run the code that contains your breakpoints. > [!TIP] > -> - Sometimes in Outlook on the web, the Visual Studio debugger doesn't attach. If you get errors by the breakpoints that indicate they won't be hit, use the browser developer tools to attach to the Visual Studio debugger: After you have pressed F5 to start debugging and Outlook on the web has opened, follow the first four steps in the [Use the browser developer tools to debug on the web](#use-the-browser-developer-tools-to-debug-on-the-web). (Use the instructions for Microsoft Edge (Chromium-based).) After you set a breakpoint in the browser tools and it's hit, execution pauses on the breakpoint in *both* the browser tools *and* in Visual Studio. This indicates that the Visual Studio debugger is attached. At this point, you can close the browser tools and add breakpoints in Visual Studio as you normally would. +> - Sometimes in Outlook on the web, the Visual Studio debugger doesn't attach. If you get errors by the breakpoints that indicate they won't be hit, use the browser developer tools to attach to the Visual Studio debugger: After you have pressed <kbd>F5</kbd> to start debugging and Outlook on the web has opened, follow the first four steps in [Use the browser developer tools to debug on the web](#use-the-browser-developer-tools-to-debug-on-the-web). After you set a breakpoint in the browser tools and it's hit, execution pauses on the breakpoint in *both* the browser tools *and* in Visual Studio. This indicates that the Visual Studio debugger is attached. At this point, you can close the browser tools and add breakpoints in Visual Studio as you normally would. > - If you encounter any problems, there's more information at [Debug a JavaScript or TypeScript app in Visual Studio](/visualstudio/javascript/debug-nodejs?view=vs-2022&preserve-view=true). #### Use the browser developer tools to debug on the web @@ -215,10 +195,7 @@ The best method for debugging an add-in in Visual Studio 2022 depends on whether ![The More apps button and the callout that it opens with the add-in's name and icon visible along with other app icons.](../images/outlook-more-apps-button.png) -1. Use the instructions in one of the following articles to set breakpoints and step through code. They each have a link to more detailed guidance. - - - [Debug add-ins using developer tools for Edge Legacy](../testing/debug-add-ins-using-devtools-edge-legacy.md) - - [Debug add-ins using developer tools in Microsoft Edge (Chromium-based)](../testing/debug-add-ins-using-devtools-edge-chromium.md) +1. Set breakpoints and step through code by following the instructions in the article [Debug add-ins using developer tools in Microsoft Edge](../testing/debug-add-ins-using-devtools-edge-chromium.md). > [!TIP] > To debug code that runs in the `Office.initialize` function or an `Office.onReady` function that runs when the add-in opens, set your breakpoints, and then close and reopen the add-in. For more information about these functions, see [Initialize your Office Add-in](../develop/initialize-add-in.md). diff --git a/docs/develop/dialog-handle-errors-events.md b/docs/develop/dialog-handle-errors-events.md index f1a1be4b77..b3fbc44a09 100644 --- a/docs/develop/dialog-handle-errors-events.md +++ b/docs/develop/dialog-handle-errors-events.md @@ -30,7 +30,7 @@ In addition to general platform and system errors, four errors are specific to c |12005|The URL passed to `displayDialogAsync` uses the HTTP protocol. HTTPS is required. (In some versions of Office, the error message text returned with 12005 is the same one returned for 12004.)| |<span id="12007">12007</span><!-- The span is needed because office-js-helpers has an error message that links to this table row. -->|A dialog box is already opened from this host window. A host window, such as a task pane, can only have one dialog box open at a time.| |12009|The user chose to ignore the dialog box. This error can occur in Office on the web, where users may choose not to allow an add-in to present a dialog box. For more information, see [Handling pop-up blockers with Office on the web](dialog-best-practices.md#handle-pop-up-blockers-with-office-on-the-web).| -|12011| The add-in is running in Office on the web and the user's browser configuration is blocking popups. This most commonly happens when the browser is Edge Legacy and the domain of the add-in is in different security zone from the domain that the dialog is trying to open. Another scenario which triggers this error is that the browser is Safari and it's configured to block all popups. Consider responding to this error with a prompt to the user to change their browser configuration or use a different browser.| +|12011| The add-in is running in Office on the web and the user's browser configuration is blocking popups. This most commonly happens when the browser is Edge Legacy (an older, unsupported webview) and the domain of the add-in is in different security zone from the domain that the dialog is trying to open. Another scenario which triggers this error is that the browser is Safari and it's configured to block all popups. Consider responding to this error with a prompt to the user to change their browser configuration or use a different browser.| When `displayDialogAsync` is called, it passes an [AsyncResult](/javascript/api/office/office.asyncresult) object to its callback function. When the call is successful, the dialog box is opened, and the `value` property of the `AsyncResult` object is a [Dialog](/javascript/api/office/office.dialog) object. For an example of this, see [Send information from the dialog box to the host page](dialog-api-in-office-add-ins.md#send-information-from-the-dialog-box-to-the-host-page). When the call to `displayDialogAsync` fails, the dialog box isn't created, the `status` property of the `AsyncResult` object is set to `Office.AsyncResultStatus.Failed`, and the `error` property of the object is populated. You should always provide a callback that tests the `status` and responds when it's an error. For an example that reports the error message regardless of its code number, see the following code. (The `showNotification` function, not defined in this article, either displays or logs the error. For an example of how you can implement this function within your add-in, see [Office Add-in Dialog API Example](https://github.com/OfficeDev/Office-Add-in-Dialog-API-Simple-Example).) diff --git a/docs/develop/enable-nested-app-authentication-in-your-add-in.md b/docs/develop/enable-nested-app-authentication-in-your-add-in.md index e675f1ea2f..ad2c77e931 100644 --- a/docs/develop/enable-nested-app-authentication-in-your-add-in.md +++ b/docs/develop/enable-nested-app-authentication-in-your-add-in.md @@ -1,7 +1,7 @@ --- title: Enable single sign-on in an Office Add-in with nested app authentication description: Learn how to enable SSO in an Office Add-in with nested app authentication. -ms.date: 07/14/2025 +ms.date: 11/06/2025 ms.topic: how-to ms.localizationpriority: high --- @@ -242,7 +242,6 @@ Use the following code to check if NAA is supported when your add-in loads. For more information, see the following resources. -- [Outlook sample: How to fall back and support Internet Explorer 11](https://github.com/OfficeDev/Office-Add-in-samples/blob/main/Samples/auth/Outlook-Add-in-SSO-NAA-IE/README.md) - [Authenticate and authorize with the Office dialog API](/office/dev/add-ins/develop/auth-with-office-dialog-api). - [Microsoft identity sample for SPA and JavaScript](https://github.com/Azure-Samples/ms-identity-javascript-tutorial/blob/main/2-Authorization-I/1-call-graph/README.md) - [Microsoft identity samples for various app types and frameworks](/entra/identity-platform/sample-v2-code?tabs=apptype) @@ -295,7 +294,6 @@ If you find a security issue with our libraries or services, report the issue to | [Outlook add-in with SSO using nested app authentication](https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/auth/Outlook-Add-in-SSO-NAA) | Shows how to use NAA in an Outlook Add-in to access Microsoft Graph APIs for the signed-in user. | |[Implement SSO in events in an Outlook add-in using nested app authentication](https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/auth/Outlook-Event-SSO-NAA) |Shows how to use NAA and SSO in Outlook add-in events.| |[Send identity claims to resources using nested app authentication (NAA) and SSO](https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/auth/Outlook-Add-in-SSO-NAA-Identity)|Shows how to send the signed-in user's identity claims (such as name, email, or a unique ID) to a resource such as a database. This sample replaces an obsolete pattern for legacy Exchange Online tokens.| -|[Outlook add-in with SSO using nested app authentication including Internet Explorer fallback](https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/auth/Outlook-Add-in-SSO-NAA-IE)|Shows how to implement a fallback authentication strategy when NAA isn't available and the add-in needs to support [Outlook versions that still use Internet Explorer 11](../concepts/browsers-used-by-office-web-add-ins.md).| ## See also diff --git a/docs/develop/referencing-the-javascript-api-for-office-library-from-its-cdn.md b/docs/develop/referencing-the-javascript-api-for-office-library-from-its-cdn.md index a6a88570fc..f9d604b63a 100644 --- a/docs/develop/referencing-the-javascript-api-for-office-library-from-its-cdn.md +++ b/docs/develop/referencing-the-javascript-api-for-office-library-from-its-cdn.md @@ -23,7 +23,7 @@ This will download and cache the Office JavaScript API files the first time your ## Office.js-specific web API behavior -Office.js replaces the default [Window.history](https://developer.mozilla.org/docs/Web/API/History) methods of `replaceState` and `pushState` with `null`. This is done to [support older Microsoft webviews and Office versions](support-ie-11.md). If your add-in relies on these methods and doesn't need to run on Office versions that use the Internet Explorer 11 browser control, replace the Office.js library reference with the following workaround. +Office.js replaces the default [Window.history](https://developer.mozilla.org/docs/Web/API/History) methods of `replaceState` and `pushState` with `null`. If your add-in relies on these methods, replace the Office.js library reference with the following workaround. ```HTML <script type="text/javascript"> diff --git a/docs/develop/specify-office-hosts-and-api-requirements-unified.md b/docs/develop/specify-office-hosts-and-api-requirements-unified.md index 621437312e..f202ff5abb 100644 --- a/docs/develop/specify-office-hosts-and-api-requirements-unified.md +++ b/docs/develop/specify-office-hosts-and-api-requirements-unified.md @@ -84,7 +84,7 @@ To simplify the process of specifying the APIs that your add-in needs, Office gr Requirement sets are versioned. For example, the APIs that support [Dialog Boxes](../develop/dialog-api-in-office-add-ins.md) are in the requirement set DialogApi 1.1. When additional APIs that enable messaging from a task pane to a dialog were released, they were grouped into DialogApi 1.2, along with all the APIs in DialogApi 1.1. *Each version of a requirement set is a superset of all earlier versions.* -Requirement set support varies by Office application, the version of the Office application, and the platform on which it is running. For example, DialogApi 1.2 isn't supported on volume-licensed perpetual versions of Office before Office 2021, but DialogApi 1.1 is supported on all perpetual versions back to Office 2016. You want your add-in to be installable on every combination of platform and Office version that supports the APIs that it uses, so you should always specify in the manifest the *minimum* version of each requirement set that your add-in requires. Details about how to do this are later in this article. +Requirement set support varies by Office application, the version of the Office application, and the platform on which it is running. For example, ExcelApi 1.17 isn't supported on volume-licensed perpetual versions of Office before Office 2024 but ExcelApi 1.14 is supported back to Office 2021. You want your add-in to be installable on every combination of platform and Office version that supports the APIs that it uses, so you should always specify in the manifest the *minimum* version of each requirement set that your add-in requires. Details about how to do this are later in this article. > [!TIP] > For more information about requirement set versioning, see [Office requirement sets availability](office-versions-and-requirement-sets.md#office-requirement-sets-availability), and for the complete lists of requirement sets and information about the APIs in each, start with [Office Add-in requirement sets](/javascript/api/requirement-sets/common/office-add-in-requirement-sets). The reference topics for most Office.js APIs also specify the requirement set they belong to (if any). diff --git a/docs/develop/specify-office-hosts-and-api-requirements.md b/docs/develop/specify-office-hosts-and-api-requirements.md index e71144ed35..8aea4f3be3 100644 --- a/docs/develop/specify-office-hosts-and-api-requirements.md +++ b/docs/develop/specify-office-hosts-and-api-requirements.md @@ -84,7 +84,7 @@ To simplify the process of specifying the APIs that your add-in needs, Office gr Requirement sets are versioned. For example, the APIs that support [Dialog Boxes](../develop/dialog-api-in-office-add-ins.md) are in the requirement set DialogApi 1.1. When additional APIs that enable messaging from a task pane to a dialog were released, they were grouped into DialogApi 1.2, along with all the APIs in DialogApi 1.1. *Each version of a requirement set is a superset of all earlier versions.* -Requirement set support varies by Office application, the version of the Office application, and the platform on which it is running. For example, DialogApi 1.2 isn't supported on volume-licensed perpetual versions of Office before Office 2021, but DialogApi 1.1 is supported on all perpetual versions back to Office 2016. You want your add-in to be installable on every combination of platform and Office version that supports the APIs that it uses, so you should always specify in the manifest the *minimum* version of each requirement set that your add-in requires. Details about how to do this are later in this article. +Requirement set support varies by Office application, the version of the Office application, and the platform on which it is running. For example, ExcelApi 1.17 isn't supported on volume-licensed perpetual versions of Office before Office 2024 but ExcelApi 1.14 is supported back to Office 2021. You want your add-in to be installable on every combination of platform and Office version that supports the APIs that it uses, so you should always specify in the manifest the *minimum* version of each requirement set that your add-in requires. Details about how to do this are later in this article. > [!TIP] > For more information about requirement set versioning, see [Office requirement sets availability](office-versions-and-requirement-sets.md#office-requirement-sets-availability), and for the complete lists of requirement sets and information about the APIs in each, start with [Office Add-in requirement sets](/javascript/api/requirement-sets/common/office-add-in-requirement-sets). The reference topics for most Office.js APIs also specify the requirement set they belong to (if any). diff --git a/docs/develop/support-ie-11.md b/docs/develop/support-ie-11.md deleted file mode 100644 index fe1f8be134..0000000000 --- a/docs/develop/support-ie-11.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Support older Microsoft webviews and Office versions -description: Learn how to support support older Microsoft webviews and Office versions in your add-in. -ms.date: 01/07/2025 -ms.localizationpriority: medium ---- - -# Support older Microsoft webviews and Office versions - -Office Add-ins are web applications that are displayed inside iframes when running on Office on the web. Office Add-ins are displayed using an embedded browser control (also known as a webview) when running in Office on Windows or Office on the Mac. The embedded browser controls are supplied by the operating system or by a browser installed on the user's computer. - -> [!IMPORTANT] -> **Webviews from Internet Explorer and Microsoft Edge Legacy are still used in Office Add-ins** -> -> Some combinations of platforms and Office versions, including volume-licensed perpetual versions through Office 2019, still use the webview controls that come with Internet Explorer 11 (called "Trident") and Microsoft Edge Legacy (called "EdgeHTML") to host add-ins, as explained in [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). Internet Explorer 11 was disabled in Windows 10 and Windows 11 in February 2023, and the UI for launching it was removed; but it's still installed on with those operating systems. So, Trident and other functionality from Internet Explorer can still be called programmatically by Office. -> -> We recommend (but don't require) that you support these combinations, at least in a minimal way, by providing users of your add-in a graceful failure message when your add-in is launched in these webviews. Keep these additional points in mind: -> -> - Office on the web no longer opens in Internet Explorer or Microsoft Edge Legacy. Consequently, [Microsoft Marketplace](/partner-center/marketplace-offers/submit-to-appsource-via-partner-center) doesn't test add-ins in Office on the web on these browsers. -> - Microsoft Marketplace still tests for combinations of platform and Office *desktop* versions that use Trident or EdgeHTML. However, it only issues a warning when the add-in doesn't support these webviews; the add-in isn't rejected by Microsoft Marketplace. -> - The [Script Lab tool](../overview/explore-with-script-lab.md) no longer supports Trident. - -If you plan to support older versions of Windows and Office, your add-in must work in the embeddable browser controls used by these versions. For example, browser controls based on Internet Explorer 11 (IE11) or Microsoft Edge Legacy (EdgeHTML-based). For information about which combinations of Windows and Office use these browser controls, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). - -## Determine the webview the add-in is running in at runtime - -Your add-in can discover the webview that it's running in by reading the [window.navigator.userAgent](https://developer.mozilla.org/docs/Web/API/Navigator/userAgent) property. This enables the add-in to either provide an alternate experience or gracefully fail. The following is an example that determines whether the add-in is running in Trident or EdgeHTML. - -```javascript -if (navigator.userAgent.indexOf("Trident") !== -1) { - /* - Trident is the webview in use. Do one of the following: - 1. Provide an alternate add-in experience that doesn't use any of the HTML5 - features that aren't supported in Trident (Internet Explorer 11). - 2. Enable the add-in to gracefully fail by adding a message to the UI that - says something similar to: - "This add-in won't run in your version of Office. Please upgrade either to - perpetual Office 2021 (or later) or to a Microsoft 365 account." - */ -} else if (navigator.userAgent.indexOf("Edge") !== -1) { - /* - EdgeHTML is the browser in use. Do one of the following: - 1. Provide an alternate add-in experience that's supported in EdgeHTML (Microsoft Edge Legacy). - 2. Enable the add-in to gracefully fail by adding a message to the UI that - says something similar to: - "This add-in won't run in your version of Office. Please upgrade either to - perpetual Office 2021 (or later) or to a Microsoft 365 account." - */ -} else { - /* - A webview other than Trident or EdgeHTML is in use. - Provide a full-featured version of the add-in here. - */ -} -``` - -> [!NOTE] -> Microsoft Edge (Chromium) returns `edg/` followed by one or more version digits and zero or more `.` separators as the user agent; for example, `edg/76.0.167.1`. **Note that the `e` isn't present at the end of name! It's "edg", not "edge".** - -This JavaScript should be as early in the add-in startup process as possible. The following is an example of an add-in home page that advises users to upgrade Office when Trident is detected. - -```html -<!doctype html> -<html lang="en" data-framework="typescript"> - -<head> - <meta charset="UTF-8" /> - <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>Contoso Task Pane Add-in - - - - - - -
- -
- - - - - - -``` - -> [!IMPORTANT] -> It's not always a good practice to read the `userAgent` property. Be sure you're familiar with the article, [Browser detection using the user agent](https://developer.mozilla.org/docs/Web/HTTP/Browser_detection_using_the_user_agent), including the recommendations and alternatives to reading `userAgent`. In particular, if you're providing an alternate add-in experience to support the use of Trident, consider using feature detection instead of testing for the user agent. But if you're just providing a notification that the add-in doesn't work in Trident, as in this case, using `userAgent` is appropriate. -> -> As of July 24th, 2023, the non-English versions of the article are all out-of-date to varying degrees; some are over 12 years out-of-date. -> -> As of the same date, the text and tables in the section [Which part of the user agent contains the information you are looking for?](https://developer.mozilla.org/docs/Web/HTTP/Browser_detection_using_the_user_agent#which_part_of_the_user_agent_contains_the_information_you_are_looking_for) of the *English* version of the article no longer mention Trident or Internet Explorer 11. In the table for **Browser Name and version**, the row for Internet Explorer 11 was the following: -> -> |Engine|Must contain|Must not contain| -> |:---|:---|:---| -> |Internet Explorer 11|`Trident/7.0; .*rv:xyz`|| -> -> In the table for **Rendering engine**, the row for Trident was the following: -> -> |Engine|Must contain|Comment| -> |:---|:---|:---| -> |Trident|`Trident/xyz`|Internet Explorer places this fragment in the comments section of the User-Agent string.| - -## Review webview and Office version support information - -For more information on how to support specific webviews and Office versions, select the applicable tab. - -# [Trident (Internet Explorer)](#tab/ie) - -The JavaScript engine associated with Trident doesn't support JavaScript versions later than ES5. To use more modern versions of JavaScript or to use TypeScript, see [Support for recent versions of JavaScript](#support-for-recent-versions-of-javascript). - -> [!IMPORTANT] -> Trident doesn't support some HTML5 features such as media, recording, and location. If your add-in must support Trident, then you must either design the add-in to avoid these unsupported features or the add-in must detect when Trident is being used and provide an alternate experience that doesn't use the unsupported features. For more information, see [Determine the webview the add-in is running in at runtime](#determine-the-webview-the-add-in-is-running-in-at-runtime). - -## Test an add-in on Trident (Internet Explorer) - -See [Trident testing](../testing/ie-11-testing.md). - -# [EdgeHTML (Microsoft Edge Legacy)](#tab/edge) - -## Troubleshoot EdgeHTML issues - -If you encounter issues as you develop your add-in to support Microsoft Edge Legacy, see the "EdgeHTML and WebView2 (Microsoft Edge) issues" section of [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md#troubleshoot-edgehtml-and-webview2-microsoft-edge-issues) for guidance. - -## Debug an add-in that supports EdgeHTML (Microsoft Edge Legacy) - -To debug your add-in that supports EdgeHTML, see [Debug add-ins using developer tools in Microsoft Edge Legacy](../testing/debug-add-ins-using-devtools-edge-legacy.md). - ---- - -## Support for recent versions of JavaScript - -If you want to use the syntax and features of a version of JavaScript that is newer than the one supported in the webview or runtime that your code is running in, or you want to use TypeScript, you must use a transpiler or a polyfill or both. For example, a transpiler will convert syntax or operators, such as the `=>` operator, that is unknown in ES5, to ES5. A polyfill replaces methods, types, and classes from a newer version of JavaScript into equivalent functionality in an older version. - -The following subsections assume that the target JavaScript standard is ES5, but the information applies with other targets too. For example, if your target is ECMAScript 2016, just replace "ES5" with "ECMAScript 2016" (and "post-ES5" with "post-ECMAScript 2016") in these subsections. - -### Use a transpiler - -You can write your code in either TypeScript or modern JavaScript and then transpile it at build-time into ES5 JavaScript. The resulting ES5 files are what you upload to your add-in's web application. - -There are two popular transpilers. Both of them can work with source files that are TypeScript or post-ES5 JavaScript. They also work with React files (.jsx and .tsx). - -- [babel](https://babeljs.io/) -- [tsc](https://www.typescriptlang.org/index.html) - -See the documentation for either of them for information about installing and configuring the transpiler in your add-in project. We recommend that you use a task runner, such as [Grunt](https://gruntjs.com/) or [WebPack](https://webpack.js.org/) to automate the transpilation. For a sample add-in that uses tsc, see [Office Add-in Microsoft Graph React](https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/auth/Office-Add-in-Microsoft-Graph-React). For a sample that uses babel, see [Offline Storage Add-in](https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/Excel.OfflineStorageAddin). - -> [!NOTE] -> If you're using Visual Studio (not Visual Studio Code), tsc is probably easiest to use. You can install support for it with a nuget package. For more information, see [JavaScript and TypeScript in Visual Studio](/visualstudio/javascript/javascript-in-visual-studio). To use babel with Visual Studio, create a build script or use the Task Runner Explorer in Visual Studio with tools like the [WebPack Task Runner](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner) or [NPM Task Runner](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner). - -### Use a polyfill - -A [polyfill](https://en.wikipedia.org/wiki/Polyfill_(programming)) is earlier-version JavaScript that duplicates functionality from more recent versions of JavaScript. The polyfill works in webviews that don't support the later JavaScript versions. For example, the string method `startsWith` wasn't part of the ES5 version of JavaScript, and so it won't run in Trident (Internet Explorer 11). There are polyfill libraries, written in ES5, that define and implement a `startsWith` method. We recommend the [core-js](https://github.com/zloirock/core-js) polyfill library. - -To use a polyfill library, load it like any other JavaScript file or module. For example, you can use a ``), or you can use an `import` statement in a JavaScript file (for example, `import 'core-js';`). When the JavaScript engine sees a method like `startsWith`, it will first look to see if there's a method of that name built into the language. If there is, it will call the native method. If, and only if, the method isn't built-in, the engine will look in all loaded files for it. So, the polyfilled version isn't used in browsers that support the native version. - -Importing the entire core-js library will import all core-js features. You can also import only the polyfills that your Office Add-in requires. For instructions about how to do this, see [CommonJS APIs](https://github.com/zloirock/core-js#commonjs-api). The core-js library has most of the polyfills that you need. There are a few exceptions detailed in the [Missing Polyfills](https://github.com/zloirock/core-js#missing-polyfills) section of the core-js documentation. For example, it doesn't support `fetch`, but you can use the [fetch](https://github.com/github/fetch) polyfill. - -For a sample add-in that uses core.js, see [Word Add-in Angular2 StyleChecker](https://github.com/OfficeDev/Word-Add-in-Angular2-StyleChecker). - - -## See also - -- [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md) -- [ECMAScript 6 compatibility table](http://compat-table.github.io/compat-table/es6/) -- [Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/) diff --git a/docs/develop/xml-manifest-overview.md b/docs/develop/xml-manifest-overview.md index acdc9f5baf..6ce9f360ed 100644 --- a/docs/develop/xml-manifest-overview.md +++ b/docs/develop/xml-manifest-overview.md @@ -2,8 +2,8 @@ title: Office Add-ins with the add-in only manifest description: Get an overview of the add-in only manifest for Office add-ins and its uses. ms.topic: overview -ms.date: 06/24/2025 -ms.localizationpriority: high +ms.date: 11/06/2025 +ms.localizationpriority: medium --- # Office Add-ins with the add-in only manifest @@ -144,11 +144,10 @@ To override this (desktop Office) behavior, add each domain you want to open in The following table describes browser behavior when your add-in attempts to navigate to a URL outside of the add-in's default domain. -|Office client|Domain defined in AppDomains?|Browser behavior| -|---|---|---| -|All clients|Yes|Link opens in add-in task pane.| -|Office 2016 on Windows (volume-licensed perpetual)|No|Link opens in Internet Explorer 11.| -|Other clients|No|Link opens in user's default browser.| +|Domain defined in AppDomains?|Browser behavior| +|---|---| +|Yes|Link opens in add-in task pane.| +|No|Link opens in user's default browser.| The following add-in only manifest example hosts its main add-in page in the `https://www.contoso.com` domain as specified in the `` element. It also specifies the `https://www.northwindtraders.com` domain in an [AppDomain](/javascript/api/manifest/appdomain) element within the `` element list. If the add-in goes to a page in the `www.northwindtraders.com` domain, that page opens in the add-in pane, even in Office desktop. diff --git a/docs/develop/yeoman-generator-overview.md b/docs/develop/yeoman-generator-overview.md index 192153ca97..15765c4678 100644 --- a/docs/develop/yeoman-generator-overview.md +++ b/docs/develop/yeoman-generator-overview.md @@ -11,7 +11,7 @@ ms.localizationpriority: high The [Yeoman Generator for Office Add-ins](https://github.com/OfficeDev/generator-office) (also called "Yo Office") is an interactive Node.js-based command line tool that creates Office Add-in development projects. These projects are Node.js-based. When you want the server-side code of the add-in to be in a .NET-based language (such as C# or VB.Net) or you want the add-in hosted in Internet Information Server (IIS), [use Visual Studio to create the add-in](develop-add-ins-visual-studio.md). > [!NOTE] -> Office add-ins can also be created with the [Microsoft 365 Agents Toolkit](agents-toolkit-overview.md) or the [Office Add-in Development Kit](development-kit-overview.md). +> Office add-ins can also be created with the [Microsoft 365 Agents Toolkit](agents-toolkit-overview.md) or the [Office Add-in Development Kit](development-kit-overview.md). The projects that the tool creates have the following characteristics. @@ -22,7 +22,7 @@ The projects that the tool creates have the following characteristics. - By default, all dependencies are installed by the tool, but you can postpone the installation with a command line argument. - They include a complete add-in manifest. - They have a "Hello World"-level add-in that is ready run as soon as the tool has finished. -- They include a polyfill and a transpiler that is configured to transpile TypeScript, and recent versions of JavaScript, to ES5 JavaScript. These features ensure that the add-in is supported in all webview runtimes that Office Add-ins might run in, including Trident (Internet Explorer). +- They include a transpiler to transpile TypeScript to ES5 JavaScript, and a polyfill to enable ES5 JavaScript to use features from later versions of JavaScript. Together, they provide backward compatibility with legacy webviews such as Trident (Internet Explorer), although Microsoft doesn't support development of add-ins for versions of Office that use these old webviews. > [!TIP] > If you want to deviate from these choices significantly, such as using a different task runner or a different server, we recommend that when you run the tool you choose the [Manifest-only option](#manifest-only-option). diff --git a/docs/excel/custom-functions-debugging.md b/docs/excel/custom-functions-debugging.md index 2a54e8f182..e798513ca5 100644 --- a/docs/excel/custom-functions-debugging.md +++ b/docs/excel/custom-functions-debugging.md @@ -1,7 +1,7 @@ --- title: Custom functions debugging in a non-shared runtime description: Debug Excel custom functions that don't use a shared runtime. -ms.date: 10/22/2025 +ms.date: 11/06/2025 ms.topic: troubleshooting ms.localizationpriority: medium --- @@ -17,8 +17,7 @@ This article covers debugging only for custom functions that **don't use a [shar > [!TIP] > The debugging techniques that are described in this article don't work with projects that are created with the **Office Add-in project containing the manifest only** option in the Yeoman generator. The scripts that are referred to later in this article aren't installed with that option. To debug an add-in that is created with this option, see the instructions in one of the following articles, as appropriate. > -> - [Debug add-ins using developer tools in Microsoft Edge (Chromium-based)](../testing/debug-add-ins-using-devtools-edge-chromium.md) -> - [Debug add-ins using developer tools in Internet Explorer](../testing/debug-add-ins-using-f12-tools-ie.md) +> - [Debug add-ins using developer tools in Microsoft Edge](../testing/debug-add-ins-using-devtools-edge-chromium.md) > - [Debug Office Add-ins on a Mac](../testing/debug-office-add-ins-on-ipad-and-mac.md) The process of debugging a custom function for add-ins that don't use a shared runtime varies depending on the target platform (Windows, Mac, or web) and on whether you are using Visual Studio Code or a different IDE. Use the links in the following table to visit sections of this article that are relevant to your debugging scenario. In this table, "CF-NSR" refers to custom functions in a non-shared runtime. diff --git a/docs/images/choose-target-to-debug.png b/docs/images/choose-target-to-debug.png deleted file mode 100644 index 9a6bb2334a..0000000000 Binary files a/docs/images/choose-target-to-debug.png and /dev/null differ diff --git a/docs/images/edge-devtools-with-add-in-and-dialog-processes.png b/docs/images/edge-devtools-with-add-in-and-dialog-processes.png deleted file mode 100644 index 5f5035c6ef..0000000000 Binary files a/docs/images/edge-devtools-with-add-in-and-dialog-processes.png and /dev/null differ diff --git a/docs/images/edge-devtools-with-add-in-process.png b/docs/images/edge-devtools-with-add-in-process.png deleted file mode 100644 index 86fb6de999..0000000000 Binary files a/docs/images/edge-devtools-with-add-in-process.png and /dev/null differ diff --git a/docs/images/open-file-in-edge-devtools.png b/docs/images/open-file-in-edge-devtools.png deleted file mode 100644 index e3fea81f39..0000000000 Binary files a/docs/images/open-file-in-edge-devtools.png and /dev/null differ diff --git a/docs/includes/auto-open-webview2-dev-tools.md b/docs/includes/auto-open-webview2-dev-tools.md index 1a4ff7bd56..98fe81678b 100644 --- a/docs/includes/auto-open-webview2-dev-tools.md +++ b/docs/includes/auto-open-webview2-dev-tools.md @@ -1,10 +1,10 @@ -To debug your add-in’s initialization sequence, configure your environment so that Microsoft WebView2 (Chromium-based) developer tools automatically open when the add-in launches. +To debug your add-in’s initialization sequence, configure your environment so that Microsoft WebView2 developer tools automatically open when the add-in launches. 1. Close the Office application where you plan to debug the add-in. 1. Set the `WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS` environment variable to include the value `--auto-open-devtools-for-tabs`. 1. Open the Office application. 1. Run the add-in. -1. The Microsoft Edge (Chromium-based) developer tools should automatically open. Use the tool the same as you would when debugging a task pane, as specified in [Debug a task pane add-in using Microsoft Edge (Chromium-based) developer tools](../testing/debug-add-ins-using-devtools-edge-chromium.md#debug-a-task-pane-add-in-using-microsoft-edge-chromium-based-developer-tools). +1. The Microsoft Edge developer tools should automatically open. Use the tool the same as you would when debugging a task pane, as specified in [Debug a task pane add-in using Microsoft Edge developer tools](../testing/debug-add-ins-using-devtools-edge-chromium.md#debug-a-task-pane-add-in-using-microsoft-edge-developer-tools). > [!NOTE] - > You may see other instances of the Microsoft Edge (Chromium-based) developer tool auto-opening since this environment variable will affect all WebView2 instances in your system. + > You may see other instances of the Microsoft Edge developer tool auto-opening since this environment variable will affect all WebView2 instances in your system. diff --git a/docs/includes/browser-security-updates.md b/docs/includes/browser-security-updates.md index 1392f7a660..c8f79903a2 100644 --- a/docs/includes/browser-security-updates.md +++ b/docs/includes/browser-security-updates.md @@ -1,5 +1,5 @@ > [!NOTE] > Changes to browser security will affect your strategy for token handling. > -> - If your add-in runs in **Office on the web** in the Microsoft Edge Legacy (non-Chromium) or Safari browser, the dialog and task pane don't share the same [local storage](https://www.w3schools.com/html/html5_webstorage.asp), so it can't be used to communicate between them. +> - If your add-in runs in **Office on the web** in the Safari browser, the dialog and task pane don't share the same [local storage](https://www.w3schools.com/html/html5_webstorage.asp), so it can't be used to communicate between them. > - Starting in Version 115 of Chromium-based browsers, such as Chrome and Edge, [storage partitioning](https://developer.chrome.com/docs/privacy-sandbox/storage-partitioning/) is enabled to prevent specific side-channel cross-site tracking (see also [Microsoft Edge browser policies](/deployedge/microsoft-edge-policies#defaultthirdpartystoragepartitioningsetting)). This means that data stored by storage APIs, such as local storage, are only available to contexts with the same origin and the same top-level site. Where possible, we recommend to pass data between the dialog and task pane using the [messageParent](/javascript/api/office/office.ui#office-office-ui-messageparent-member(1)) and [messageChild](/javascript/api/office/office.dialog#office-office-dialog-messagechild-member(1)) methods as described in [Use the Office dialog API in your Office Add-ins](../develop/dialog-api-in-office-add-ins.md). diff --git a/docs/includes/console-tool-note.md b/docs/includes/console-tool-note.md index 83fd99bc45..1d3f11cd7d 100644 --- a/docs/includes/console-tool-note.md +++ b/docs/includes/console-tool-note.md @@ -1,2 +1,2 @@ > [!NOTE] -> To see the `console.log` output, you'll need a separate set of developer tools for a JavaScript console. To learn more about F12 tools and the Microsoft Edge DevTools, visit [Debug add-ins using developer tools for Internet Explorer](../testing/debug-add-ins-using-f12-tools-ie.md), [Debug add-ins using developer tools for Edge Legacy](../testing/debug-add-ins-using-devtools-edge-legacy.md), or [Debug add-ins using developer tools in Microsoft Edge (Chromium-based)](../testing/debug-add-ins-using-devtools-edge-chromium.md). \ No newline at end of file +> To see the `console.log` output, you'll need a separate set of developer tools for a JavaScript console. To learn more about F12 tools and the Microsoft Edge DevTools, see [Debug add-ins using developer tools in Microsoft Edge](../testing/debug-add-ins-using-devtools-edge-chromium.md). diff --git a/docs/includes/dev-kit-troubleshooting.md b/docs/includes/dev-kit-troubleshooting.md index 5c2a72cf4b..a72ac5ca60 100644 --- a/docs/includes/dev-kit-troubleshooting.md +++ b/docs/includes/dev-kit-troubleshooting.md @@ -8,5 +8,3 @@ If you have problems running the add-in, take these steps. The article [Troubleshoot development errors with Office Add-ins](../testing/troubleshoot-development-errors.md) contains solutions to common problems. If you're still having issues, [create a GitHub issue](https://aka.ms/officedevkitnewissue) and we'll help you. For information on running the add-in on Office on the web, see [Sideload Office Add-ins to Office on the web](../testing/sideload-office-add-ins-for-testing.md). - -For information on debugging on older versions of Office, see [Debug add-ins using developer tools in Microsoft Edge Legacy](../testing/debug-add-ins-using-devtools-edge-legacy.md). \ No newline at end of file diff --git a/docs/includes/excel-api-models.md b/docs/includes/excel-api-models.md index 079c01a938..66847e6208 100644 --- a/docs/includes/excel-api-models.md +++ b/docs/includes/excel-api-models.md @@ -2,4 +2,4 @@ An Excel add-in interacts with objects in Excel by using the [Office JavaScript - **Excel JavaScript API**: Introduced with Office 2016, the [Excel JavaScript API](../reference/overview/excel-add-ins-reference-overview.md) provides strongly-typed Excel objects that you can use to access worksheets, ranges, tables, charts, and more. -- **Common API**: Introduced with Office 2013, the Common API enables you to access features such as UI, dialogs, and client settings that are common across multiple types of Office applications. The limited functionality for Excel interaction in the Common API has been replaced by the Excel JavaScript API. \ No newline at end of file +- **Common API**: Introduced with Office 2013, the Common API enables you to access features such as UI, dialogs, and client settings that are common across multiple types of Office applications. The limited functionality for Excel interaction in the Common API has been replaced by the Excel JavaScript API. diff --git a/docs/includes/excel-custom-functions-note.md b/docs/includes/excel-custom-functions-note.md index fb03d568a0..3699507922 100644 --- a/docs/includes/excel-custom-functions-note.md +++ b/docs/includes/excel-custom-functions-note.md @@ -11,7 +11,7 @@ > Excel custom functions aren't currently supported in the following: > > - Office on iPad -> - volume-licensed perpetual versions of Office 2019 or earlier on Windows +> - volume-licensed perpetual versions of Office 2021 or earlier on Windows > [!NOTE] > The unified manifest for Microsoft 365 doesn't currently support custom functions projects. You must use the add-in only manifest for custom functions projects. For more information, see [Office Add-ins manifest](../develop/add-in-manifests.md). diff --git a/docs/includes/identify-webview-in-ui.md b/docs/includes/identify-webview-in-ui.md deleted file mode 100644 index ba2311f64d..0000000000 --- a/docs/includes/identify-webview-in-ui.md +++ /dev/null @@ -1 +0,0 @@ -In recent versions of Office, one way to identify the webview control that Office is using is through the [personality menu](../design/task-pane-add-ins.md#personality-menu) on any add-in where it's available. (The personality menu isn't supported in Outlook.) Open the menu and select **Security Info**. In the **Security Info** dialog on Windows, the **Runtime** reports **Microsoft Edge**, **Microsoft Edge Legacy**, or **Internet Explorer**. The runtime isn't included on the dialog in older versions of Office. diff --git a/docs/includes/install-office-that-uses-legacy-edge-or-ie.md b/docs/includes/install-office-that-uses-legacy-edge-or-ie.md deleted file mode 100644 index 8e8ba8c93f..0000000000 --- a/docs/includes/install-office-that-uses-legacy-edge-or-ie.md +++ /dev/null @@ -1,44 +0,0 @@ -Use the following procedure to install either a version of Office (downloaded from a Microsoft 365 subscription) that uses the Microsoft Edge Legacy webview (EdgeHTML) to run add-ins or a version that uses Internet Explorer (Trident). - -1. In any Office application, open the **File** tab on the ribbon, and then select **Office Account** or **Account**. Select the **About _host-name_** button (for example, **About Word**). -1. On the dialog that opens, find the full xx.x.xxxxx.xxxxx build number and make a copy of it somewhere. -1. Download the [Office Deployment Tool](https://www.microsoft.com/download/details.aspx?id=49117). -1. Run the downloaded file to extract the tool. You are prompted to choose where to install the tool. -1. In the folder where you installed the tool (where the `setup.exe` file is located), create a text file with the name `config.xml` and add the following contents. - - ```xml - - - - - - - - ``` - -1. Change the `Version` value. - - - To install a version that uses EdgeHTML, change it to `16.0.11929.20946`. - - To install a version that uses Trident, change it to `16.0.10730.20348`. - -1. Optionally, change the value of `OfficeClientEdition` to `"32"` to install 32-bit Office, and change the `Language ID` value as needed to install Office in a different language. -1. Open a command prompt *as an administrator*. -1. Navigate to the folder with the `setup.exe` and `config.xml` files. -1. Run the following command. - - ```command line - setup.exe /configure config.xml - ``` - - This command installs Office. The process may take several minutes. - -1. [Clear the Office cache](../testing/clear-cache.md). - -> [!IMPORTANT] -> After installation, be sure that you turn off automatic updating of Office, so that Office isn't updated to a version that doesn't use webview you want to work with before you've completed using it. **This can happen within minutes of installation.** Follow these steps. -> -> 1. Start any Office application and open a new document. -> 1. Open the **File** tab on the ribbon, and then select **Office Account** or **Account**. -> 1. In the **Product Information** column, select **Update Options**, and then select **Disable Updates**. If that option isn't available, then Office is already configured to not update automatically. - -When you are finished using the old version of Office, reinstall your newer version by editing the `config.xml` file and changing the `Version` to the build number that you copied earlier. Then repeat the `setup.exe /configure config.xml` command in an administrator command prompt. Optionally, re-enable automatic updates. diff --git a/docs/includes/quickstart-troubleshooting-common.md b/docs/includes/quickstart-troubleshooting-common.md index 8685dd5b7a..c5dce15ec9 100644 --- a/docs/includes/quickstart-troubleshooting-common.md +++ b/docs/includes/quickstart-troubleshooting-common.md @@ -1,5 +1,3 @@ ## Troubleshooting - Ensure your environment is ready for Office development by following the instructions in [Set up your development environment](../overview/set-up-your-dev-environment.md). - -- Some of the sample code uses ES6 JavaScript. This isn't compatible with [older versions of Office that use the Trident (Internet Explorer 11) browser engine](/office/dev/add-ins/concepts/browsers-used-by-office-web-add-ins). For information on how to support those platforms in your add-in, see [Support older Microsoft webviews and Office versions](/office/dev/add-ins/develop/support-ie-11). If you don't already have a Microsoft 365 subscription to use for development, you might qualify for a Microsoft 365 E5 developer subscription through the [Microsoft 365 Developer Program](https://aka.ms/m365devprogram); for details, see the [FAQ](/office/developer-program/microsoft-365-developer-program-faq#who-qualifies-for-a-microsoft-365-e5-developer-subscription-). Alternatively, you can [sign up for a 1-month free trial](https://www.microsoft.com/microsoft-365/try) or [purchase a Microsoft 365 plan](https://www.microsoft.com/microsoft-365/business/compare-all-microsoft-365-business-products-g). diff --git a/docs/includes/shared-runtime-note.md b/docs/includes/shared-runtime-note.md index 68920b215f..1e5a72701f 100644 --- a/docs/includes/shared-runtime-note.md +++ b/docs/includes/shared-runtime-note.md @@ -1,2 +1,2 @@ >[!NOTE] -> We recommend using custom functions with a [shared runtime](../testing/runtimes.md#shared-runtime), unless you have a specific reason not to use a shared runtime. Note that using a shared runtime means your add-in will use WebView2 (Microsoft Edge Chromium-based) if conditions are met, and otherwise your add-in will use Trident (Internet Explorer 11) regardless of the Windows or Microsoft 365 version. For a description of the WebView2 conditions, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). For more information about runtimes, see [Runtimes in Office Add-ins](../testing/runtimes.md). \ No newline at end of file +> We recommend using custom functions with a [shared runtime](../testing/runtimes.md#shared-runtime), unless you have a specific reason not to use a shared runtime. For more information about runtimes, see [Runtimes in Office Add-ins](../testing/runtimes.md). diff --git a/docs/includes/use-legacy-edge-or-ie.md b/docs/includes/use-legacy-edge-or-ie.md deleted file mode 100644 index 78123ee7fa..0000000000 --- a/docs/includes/use-legacy-edge-or-ie.md +++ /dev/null @@ -1,38 +0,0 @@ -If your project is Node.js-based (that is, not developed with Visual Studio and Internet Information server (IIS)), you can force Office on Windows to use either the EdgeHTML webview control that is provided by Edge Legacy or the Trident webview control that is provided by Internet Explorer to run add-ins, even if you have a combination of Windows and Office versions that would normally use a more recent webview. For more information about which browsers and webviews are used by various combinations of Windows and Office versions, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). - -> [!NOTE] -> The tool that's used to force the change in webview is supported only in the Beta subscription channel of Microsoft 365. Join the [Microsoft 365 Insider program](https://techcommunity.microsoft.com/blog/microsoft365insiderblog/join-the-microsoft-365-insider-program-on-windows/4206638) and select the **Beta Channel** option to access Office Beta builds. See also [About Office: What version of Office am I using?](https://support.microsoft.com/office/932788b8-a3ce-44bf-bb09-e334518b8b19). -> -> Strictly, it's the `webview` switch of this tool (see **Step 2**) that requires the Beta channel. The tool has other switches that don't have this requirement. - -1. If your project was *not* created with the [Yeoman generator for Office Add-ins](../develop/yeoman-generator-overview.md) tool, you need to install the office-addin-dev-settings tool. Run the following command in a command prompt. - - ```command line - npm install office-addin-dev-settings --save-dev - ``` - - [!INCLUDE[Office settings tool not supported on Mac](../includes/tool-nonsupport-mac-note.md)] - -1. Specify the webview that you want Office to use with the following command in a command prompt in the root of the project. Replace `` with the relative path, which is just the manifest filename if it's in the root of the project. Replace `` with either `ie` or `edge-legacy`. Note that the options are named after the browsers in which the webviews originated. The `ie` option means "Trident" and the `edge-legacy` option means "EdgeHTML". - - ```command line - npx office-addin-dev-settings webview - ``` - - The following are examples. - - ```command line - npx office-addin-dev-settings webview manifest.xml ie - ``` - - ```command line - npx office-addin-dev-settings webview manifest.json edge-legacy - ``` - - You should see a message in the command line that the webview type is now set to IE (or Edge Legacy). - -1. When you're finished, set Office to resume using the default webview for your combination of Windows and Office versions with the following command. - - ```command line - npx office-addin-dev-settings webview default - ``` diff --git a/docs/outlook/debug-ui-less.md b/docs/outlook/debug-ui-less.md index 92a0ffd690..98a08cca60 100644 --- a/docs/outlook/debug-ui-less.md +++ b/docs/outlook/debug-ui-less.md @@ -1,7 +1,7 @@ --- title: Debug function commands in Outlook add-ins description: Learn how to debug function commands in Outlook add-ins. -ms.date: 07/11/2022 +ms.date: 11/06/2025 ms.topic: how-to ms.localizationpriority: medium --- @@ -29,11 +29,7 @@ Otherwise, if you used another tool to create your add-in, perform the following ## Configure and run the debugger -Now that you've enabled debugging on your add-in, you're ready to configure and run the debugger. For instructions on how to do this, select one of the following options that applies to your webview control. For information about how to determine what webview control is used on your development computer, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). - -- If your add-in runs in the embedded webview control from Edge Legacy (EdgeHTML), see [Debug add-ins using developer tools in Microsoft Edge Legacy](../testing/debug-add-ins-using-devtools-edge-legacy.md). - -- If your add-in runs in the embedded webview control from Microsoft Edge Chromium (WebView2), see [Debug add-ins on Windows using Visual Studio Code and Microsoft Edge WebView2 (Chromium-based)](../testing/debug-desktop-using-edge-chromium.md). +Now that you've enabled debugging on your add-in, you're ready to configure and run the debugger. Step-by-step instructions are found in the article [Debug add-ins on Windows using Visual Studio Code and Microsoft Edge WebView2](../testing/debug-desktop-using-edge-chromium.md). ## See also diff --git a/docs/outlook/one-outlook.md b/docs/outlook/one-outlook.md index 426039326e..15f1b83ba4 100644 --- a/docs/outlook/one-outlook.md +++ b/docs/outlook/one-outlook.md @@ -55,7 +55,7 @@ There are various possibilities for extending the Outlook functionality through ## Support for classic Outlook on Windows -Classic Outlook on Windows with a Microsoft 365 subscription or a retail perpetual version of Office 2016 or later will continue to support the development of new and existing Outlook web add-ins. Additionally, it will continue to receive releases of the latest Outlook add-in features. +Classic Outlook on Windows with a Microsoft 365 subscription or a retail perpetual version of Office 2021 or later will continue to support the development of new and existing Outlook web add-ins. Additionally, it will continue to receive releases of the latest Outlook add-in features. ## Test your add-in in the new Outlook on Windows diff --git a/docs/overview/explore-with-script-lab.md b/docs/overview/explore-with-script-lab.md index 0e9573b403..1a8afe6a37 100644 --- a/docs/overview/explore-with-script-lab.md +++ b/docs/overview/explore-with-script-lab.md @@ -1,7 +1,7 @@ --- title: Explore Office JavaScript API using Script Lab description: Use Script Lab to explore the Office JS API and to prototype functionality. -ms.date: 03/21/2025 +ms.date: 11/06/2025 ms.topic: concept-article ms.custom: scenarios:getting-started ms.localizationpriority: high @@ -65,9 +65,6 @@ Script Lab for Outlook is available on the following clients. - Outlook on Windows\* - Outlook on Mac -> [!IMPORTANT] -> \* Script Lab no longer works with combinations of platform and Office version that use the Trident (Internet Explorer) webview to host add-ins. This includes perpetual versions of Office through Office 2019. For more information, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). - ## Limitations Script Lab is designed for you to play with small code samples. Generally, a snippet should be at most a few hundred lines and a few thousand characters. diff --git a/docs/quickstarts/fluent-react-quickstart.md b/docs/quickstarts/fluent-react-quickstart.md index bcb4222402..cd5bb8771c 100644 --- a/docs/quickstarts/fluent-react-quickstart.md +++ b/docs/quickstarts/fluent-react-quickstart.md @@ -1,7 +1,7 @@ --- title: Fluent UI React in Office Add-ins description: Learn how to create an Office Add-in that uses Fluent UI React. -ms.date: 02/12/2025 +ms.date: 11/06/2025 ms.topic: how-to ms.service: microsoft-365 ms.localizationpriority: medium @@ -20,9 +20,6 @@ This article describes how to create an add-in that's built with React and that You'll use the [Yeoman generator for Office Add-ins](../develop/yeoman-generator-overview.md) to create an add-in project that uses React. -> [!NOTE] -> The React-based Add-ins created with the generator use Fluent UI React V9. This version doesn't support the Trident (IE) webview. If your add-in's users have versions of Office that require Trident, use one of the samples in [Office-Add-ins-Fluent-React-version-8](https://github.com/OfficeDev/Office-Add-ins-Fluent-React-version-8) instead of this article. For information about which versions of Office use Trident, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). - ### Install the prerequisites [!INCLUDE [Yeoman generator prerequisites](../includes/quickstart-yo-prerequisites.md)] @@ -42,9 +39,6 @@ The following is an example. After you complete the wizard, the generator creates the project and installs supporting Node components. -> [!NOTE] -> Fluent UI React v9 or later isn't supported with the Trident (IE) or EdgeHTML (Edge Legacy) webview controls. If your version of Office is using either of those, the task pane of the add-in generated by Yo Office simply contains a message to upgrade your version of Office. For more information, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). - ### Explore the project The add-in project that you've created with the Yeoman generator contains sample code for a basic task pane add-in. If you'd like to explore the components of your add-in project, open the project in your code editor and review the following files. The file name extensions depend on which language you choose. TypeScript extensions are in parentheses. When you're ready to try out your add-in, proceed to the next section. diff --git a/docs/quickstarts/word-quickstart-vs.md b/docs/quickstarts/word-quickstart-vs.md index f2bda98b9d..a8cc158dd5 100644 --- a/docs/quickstarts/word-quickstart-vs.md +++ b/docs/quickstarts/word-quickstart-vs.md @@ -1,7 +1,7 @@ --- title: Build your first Word task pane add-in with Visual Studio description: Learn how to build a simple Word task pane add-in by using the Office JavaScript API and a Visual Studio template. -ms.date: 08/20/2024 +ms.date: 11/06/2025 ms.service: word ms.localizationpriority: high --- @@ -202,7 +202,7 @@ In this article, you'll walk through the process of building a Word task pane ad 1. Using Visual Studio, test the newly created Word add-in by pressing F5 or choosing **Debug** > **Start Debugging** to launch Word with the **Show Taskpane** add-in button displayed on the ribbon. The add-in will be hosted locally on IIS. -1. In Word, if the add-in task pane isn't already open, choose the **Home** tab, and then choose the **Show Taskpane** button on the ribbon to open the add-in task pane. (If you're using a volume-licensed perpetual version of Office 2016 or older, then custom buttons aren't supported. Instead, the task pane will open immediately.) +1. In Word, if the add-in task pane isn't already open, choose the **Home** tab, and then choose the **Show Taskpane** button on the ribbon to open the add-in task pane. ![The Word application with the Show Taskpane button highlighted.](../images/word-quickstart-addin-0.png) diff --git a/docs/reference/javascript-api-for-office-error-codes.md b/docs/reference/javascript-api-for-office-error-codes.md index 2614eeb820..e8c00ad17c 100644 --- a/docs/reference/javascript-api-for-office-error-codes.md +++ b/docs/reference/javascript-api-for-office-error-codes.md @@ -89,7 +89,7 @@ The following table lists the error codes, names, and messages displayed, and th |12006|*Not applicable*|*Not applicable*|The dialog box was closed, usually because the user chooses the **X** button. Thrown within the dialog and triggers a `DialogEventReceived` event in the host page.| |12007|*Not applicable*|*Not applicable*|A dialog box is already opened from this host window. A host window, such as a task pane, can only have one dialog box open at a time. Thrown by call of `displayDialogAsync`.| |12009|*Not applicable*|*Not applicable*|The user chose to ignore the dialog box. This error can occur in online versions of Office, where users may choose not to allow an add-in to present a dialog. Thrown by call of `displayDialogAsync`.| -|12011|*Not applicable*|*Not applicable*|The user's browser is configured in a way that blocks popups. This error can occur in Office on the web if the browser is Safari and it's configured to block popups or the browser is Edge Legacy and the add-in domain is in a different security zone from the domain the dialog is trying to open. Thrown by call of `displayDialogAsync`.| +|12011|*Not applicable*|*Not applicable*|The user's browser is configured in a way that blocks popups. This error can occur in Office on the web if the browser is Safari and it's configured to block popups or the browser is Edge Legacy (an older, unsupported version of the current Chromium-based Edge) and the add-in domain is in a different security zone from the domain the dialog is trying to open. Thrown by call of `displayDialogAsync`.| |13nnn|*Not applicable*|*Not applicable*|See [Causes and handling of errors from getAccessToken](../develop/troubleshoot-sso-in-office-add-ins.md#causes-and-handling-of-errors-from-getaccesstoken).| ## Binding creation error conditions diff --git a/docs/reference/window-objects-unsupported-in-add-ins.md b/docs/reference/window-objects-unsupported-in-add-ins.md index 1f093bee6a..4845e6b7bc 100644 --- a/docs/reference/window-objects-unsupported-in-add-ins.md +++ b/docs/reference/window-objects-unsupported-in-add-ins.md @@ -1,13 +1,13 @@ --- title: Window objects that are unsupported in Office Add-ins description: This article specifies some of the window runtime objects that do not work in Office Add-ins. -ms.date: 05/20/2023 +ms.date: 11/06/2025 ms.localizationpriority: medium --- # Window objects that are unsupported in Office Add-ins -For some versions of Windows and Office, add-ins run in a Trident (Internet Explorer 11) webview runtime. (For details, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md).) Some properties or subproperties of the global `window` object are not supported in Trident. These properties are disabled in add-ins to ensure that your add-in provides a consistent experience to all users, regardless of which browser or webview control the add-in is using. This also helps AngularJS load properly. +Historically (through Office 2019), add-ins were supported in environments that used the Trident (Internet Explorer 11) webview runtime. Some properties or subproperties of the global `window` object are not supported in Trident. These properties are disabled in add-ins to ensure that your add-in provides a consistent experience to all users, regardless of which browser or webview control the add-in is using. This also helps AngularJS load properly. The following is a list of the disabled properties. The list is a work in progress. If you discover additional `window` properties that do not work in add-ins, please use the feedback tool below to tell us. diff --git a/docs/resources/resources-glossary.md b/docs/resources/resources-glossary.md index f604a7d7b1..ead81310ae 100644 --- a/docs/resources/resources-glossary.md +++ b/docs/resources/resources-glossary.md @@ -154,7 +154,7 @@ A **ribbon** is a command bar that organizes an application's features into a se ## runtime -A **runtime** is the host environment (including a JavaScript engine and usually also an HTML rendering engine) that the add-in runs in. In Office on Windows and Office on Mac, the runtime is an embedded browser control (or webview) such as Internet Explorer, Edge Legacy, Edge WebView2, or Safari. Different parts of an add-in run in separate runtimes. For example, add-in commands, custom functions, and task pane code typically use separate runtimes unless you configure a [shared runtime](../testing/runtimes.md#shared-runtime). See [Runtimes in Office Add-ins](../testing/runtimes.md) and [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md) for more information. +A **runtime** is the host environment (including a JavaScript engine and usually also an HTML rendering engine) that the add-in runs in. In Office on Windows and Office on Mac, the runtime is an embedded browser control (or webview) such as Edge WebView2 or Safari WKWebView. Different parts of an add-in run in separate runtimes. For example, add-in commands, custom functions, and task pane code typically use separate runtimes unless you configure a [shared runtime](../testing/runtimes.md#shared-runtime). See [Runtimes in Office Add-ins](../testing/runtimes.md) and [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md) for more information. See also: [custom functions runtime](#custom-functions-runtime), [shared runtime](#shared-runtime), [webview](#webview). diff --git a/docs/testing/attach-debugger-from-task-pane.md b/docs/testing/attach-debugger-from-task-pane.md index f4c55a8e90..ea2012ab0d 100644 --- a/docs/testing/attach-debugger-from-task-pane.md +++ b/docs/testing/attach-debugger-from-task-pane.md @@ -1,7 +1,7 @@ --- title: Attach a debugger from the task pane description: Learn how to attach a debugger from the task pane. -ms.date: 05/20/2023 +ms.date: 11/06/2025 ms.localizationpriority: medium --- @@ -9,19 +9,13 @@ ms.localizationpriority: medium In some environments, a debugger can be attached on an Office Add-in that is already running. This can be useful when you want to debug an add-in that is already in staging or production. If you are still developing and testing the add-in, see [Overview of debugging Office Add-ins](debug-add-ins-overview.md). -The technique described in this article can be used only when the following conditions are met. - -- The add-in is running in Office on Windows. -- The computer is using a combination of Windows and Office versions that use the Edge (Chromium-based) webview control, WebView2. To determine which webview you're using, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). - -> [!TIP] -> [!INCLUDE[Identify the webview through the add-in UI](../includes/identify-webview-in-ui.md)] +The technique described in this article can be used only when the add-in is running in Office on Windows. To launch the debugger, choose the top right corner of the task pane to activate the **Personality** menu (as shown in the red circle in the following image). ![The Attach Debugger menu in the add-in task pane.](../images/attach-debugger.png) -Select **Attach Debugger**. This launches the Microsoft Edge (Chromium-based) developer tools. Use the tools as described in [Debug add-ins using developer tools in Microsoft Edge (Chromium-based)](debug-add-ins-using-devtools-edge-chromium.md). +Select **Attach Debugger**. This launches the Microsoft Edge developer tools. Use the tools as described in [Debug add-ins using developer tools in Microsoft Edge](debug-add-ins-using-devtools-edge-chromium.md). ## See also diff --git a/docs/testing/clear-cache.md b/docs/testing/clear-cache.md index 0dcec4317d..02bcde3bf2 100644 --- a/docs/testing/clear-cache.md +++ b/docs/testing/clear-cache.md @@ -168,9 +168,7 @@ To clear the web cache on iOS, call `window.location.reload(true)` from JavaScri ## See also - [Troubleshoot development errors with Office Add-ins](troubleshoot-development-errors.md) -- [Debug add-ins using developer tools for Internet Explorer](debug-add-ins-using-f12-tools-ie.md) -- [Debug add-ins using developer tools for Edge Legacy](debug-add-ins-using-devtools-edge-legacy.md) -- [Debug add-ins using developer tools in Microsoft Edge (Chromium-based)](debug-add-ins-using-devtools-edge-chromium.md) +- [Debug add-ins using developer tools in Microsoft Edge](debug-add-ins-using-devtools-edge-chromium.md) - [Debug your add-in with runtime logging](runtime-logging.md) - [Sideload Office Add-ins for testing](sideload-office-add-ins-for-testing.md) - [Office Add-ins manifest](../develop/add-in-manifests.md) diff --git a/docs/testing/debug-add-ins-in-office-online.md b/docs/testing/debug-add-ins-in-office-online.md index fea399adeb..b31cc44bf1 100644 --- a/docs/testing/debug-add-ins-in-office-online.md +++ b/docs/testing/debug-add-ins-in-office-online.md @@ -24,12 +24,10 @@ To debug your add-in by using Office on the web: - [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/index.html) - [Safari](https://support.apple.com/guide/safari/use-the-developer-tools-in-the-develop-menu-sfri20948/mac) - - [Debug add-ins using developer tools in Microsoft Edge (Chromium-based)](debug-add-ins-using-devtools-edge-chromium.md) - - [Debug add-ins using developer tools for Edge Legacy](debug-add-ins-using-devtools-edge-legacy.md) + - [Debug add-ins using developer tools in Microsoft Edge](debug-add-ins-using-devtools-edge-chromium.md) > [!NOTE] - > - Office on the web won't open in Internet Explorer. - > - The new Outlook on Windows desktop client doesn't support the context menu or the keyboard shortcut to access the Microsoft Edge developer tools. Instead, you must run `olk.exe --devtools` from a command prompt. For more information, see the "Debug your add-in" section of [Develop Outlook add-ins for the new Outlook on Windows](../outlook/one-outlook.md#debug-your-add-in). + > The new Outlook on Windows desktop client doesn't support the context menu or the keyboard shortcut to access the Microsoft Edge developer tools. Instead, you must run `olk.exe --devtools` from a command prompt. For more information, see the "Debug your add-in" section of [Develop Outlook add-ins for the new Outlook on Windows](../outlook/one-outlook.md#debug-your-add-in). ## Potential issues diff --git a/docs/testing/debug-add-ins-overview.md b/docs/testing/debug-add-ins-overview.md index 4c53091a2d..073532ea75 100644 --- a/docs/testing/debug-add-ins-overview.md +++ b/docs/testing/debug-add-ins-overview.md @@ -54,16 +54,7 @@ To find guidance for debugging client-side code, the first variable is the opera The following provides general guidance to debugging on Windows. Debugging on Windows depends on your IDE. - **Visual Studio**: Debug using the browser's F12 tools. See [Debug Office Add-ins in Visual Studio](../develop/debug-office-add-ins-in-visual-studio.md). -- **Any other IDE** (or you don't want to debug inside your IDE): Use the developer tools that are associated with the webview control that add-ins use on your development computer. See one of the following: - - - For the Trident webview: [Debug add-ins using developer tools for Internet Explorer](debug-add-ins-using-f12-tools-ie.md) - - For the EdgeHTML webview: [Debug add-ins using developer tools for Edge Legacy](debug-add-ins-using-devtools-edge-legacy.md) - - For the WebView2 webview: [Debug add-ins using developer tools in Microsoft Edge (Chromium-based)](debug-add-ins-using-devtools-edge-chromium.md) - -For information about which runtime is being used, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md) and [Runtimes in Office Add-ins](runtimes.md). - -> [!TIP] -> [!INCLUDE[Identify the webview through the add-in UI](../includes/identify-webview-in-ui.md)] +- **Any other IDE** (or you don't want to debug inside your IDE): Debug with the Webview2 debugging tools. See [Debug add-ins using developer tools in Microsoft Edge](debug-add-ins-using-devtools-edge-chromium.md) ### Debug on Mac diff --git a/docs/testing/debug-add-ins-using-devtools-edge-chromium.md b/docs/testing/debug-add-ins-using-devtools-edge-chromium.md index 9a2e56ceb0..5f49bafaba 100644 --- a/docs/testing/debug-add-ins-using-devtools-edge-chromium.md +++ b/docs/testing/debug-add-ins-using-devtools-edge-chromium.md @@ -1,36 +1,25 @@ --- title: Debug add-ins using developer tools for Microsoft Edge WebView2 -description: Debug add-ins using the developer tools in Microsoft Edge WebView2 (Chromium-based). +description: Debug add-ins using the developer tools in Microsoft Edge WebView2. ms.date: 09/18/2025 ms.localizationpriority: medium --- -# Debug add-ins using developer tools in Microsoft Edge (Chromium-based) +# Debug add-ins using developer tools in Microsoft Edge -This article shows how to debug the client-side code (JavaScript or TypeScript) of your add-in when the following conditions are met. +This article shows how to debug the client-side code (JavaScript or TypeScript) of your add-in outside of your current IDE. -- You can't, or don't wish to, debug using tools built into your IDE; or you are encountering a problem that only occurs when the add-in is run outside the IDE. -- Your computer is using a combination of Windows and Office versions that use the Edge (Chromium-based) webview control, WebView2. - -> [!TIP] -> For information about debugging with Edge WebView2 (Chromium-based) inside Visual Studio Code, see [Debug add-ins on Windows using Visual Studio Code and Microsoft Edge WebView2 (Chromium-based)](debug-desktop-using-edge-chromium.md). - -To determine which webview you're using, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). - -> [!TIP] -> [!INCLUDE[Identify the webview through the add-in UI](../includes/identify-webview-in-ui.md)] - -## Debug a task pane add-in using Microsoft Edge (Chromium-based) developer tools +## Debug a task pane add-in using Microsoft Edge developer tools > [!NOTE] -> If your add-in has an [add-in command](../design/add-in-commands.md) that executes a function, the function runs in a hidden browser runtime process that the Microsoft Edge (Chromium-based) developer tools can't be launched from, so the technique described in this article can't be used to debug code in the function. +> If your add-in has an [add-in command](../design/add-in-commands.md) that executes a function, the function runs in a hidden browser runtime process that the Microsoft Edge developer tools can't be launched from, so the technique described in this article can't be used to debug code in the function. 1. [Sideload](test-debug-non-local-server.md) and run the add-in. > [!NOTE] > To sideload an add-in in Outlook, see [Sideload Outlook add-ins for testing](../outlook/sideload-outlook-add-ins-for-testing.md). -1. Run the Microsoft Edge (Chromium-based) developer tools by one of these methods: +1. Run the Microsoft Edge developer tools by one of these methods: - Be sure the add-in's task pane has focus and press Ctrl+Shift+I. - Right-click (or select and hold) the task pane to open the context menu and select **Inspect**, or open the [personality menu](../design/task-pane-add-ins.md#personality-menu) and select **Attach Debugger**. (The personality menu isn't supported in Outlook.) @@ -46,7 +35,7 @@ To determine which webview you're using, see [Browsers and webview controls used 1. Select the refresh button. 1. In the search results, select the line to open the code file in the pane above the search results. - :::image type="content" source="../images/open-file-in-edge-chromium-devtools.png" alt-text="Edge Chromium developer tools source tab with 4 parts labelled A through D."::: + :::image type="content" source="../images/open-file-in-edge-chromium-devtools.png" alt-text="Edge developer tools source tab with 4 parts labelled A through D."::: 1. To set a breakpoint, select the line number of the line in the code file. A red dot appears by the line in the code file. In the debugger window to the right, the breakpoint is registered in the **Breakpoints** drop down. 1. Execute functions in the add-in as needed to trigger the breakpoint. @@ -60,15 +49,13 @@ If your add-in uses the Office Dialog API, the dialog runs in a separate process 1. Run the add-in. 1. Open the dialog and be sure it has focus. -1. Open the Microsoft Edge (Chromium-based) developer tools by one of these methods: +1. Open the Microsoft Edge developer tools by one of these methods: - Press Ctrl+Shift+I or F12. - Right-click (or select and hold) the dialog to open the context menu and select **Inspect**. -1. Use the tool the same as you would for code in a task pane. See [Debug a task pane add-in using Microsoft Edge (Chromium-based) developer tools](#debug-a-task-pane-add-in-using-microsoft-edge-chromium-based-developer-tools) earlier in this article. - -## Automatically open the Microsoft Edge (Chromium-based) developer tools to debug initialization - -[!INCLUDE[Automatically open the Microsoft Edge (Chromium-based) developer tools to debug initialization](../includes/auto-open-webview2-dev-tools.md)] +1. Use the tool the same as you would for code in a task pane. See [Debug a task pane add-in using Microsoft Edge developer tools](#debug-a-task-pane-add-in-using-microsoft-edge-developer-tools) earlier in this article. +## Automatically open the Microsoft Edge developer tools to debug initialization +[!INCLUDE[Automatically open the Microsoft Edge developer tools to debug initialization](../includes/auto-open-webview2-dev-tools.md)] diff --git a/docs/testing/debug-add-ins-using-devtools-edge-legacy.md b/docs/testing/debug-add-ins-using-devtools-edge-legacy.md deleted file mode 100644 index 1e6b4b17e4..0000000000 --- a/docs/testing/debug-add-ins-using-devtools-edge-legacy.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Debug add-ins using developer tools for Microsoft Edge Legacy -description: Debug add-ins using the developer tools in Microsoft Edge Legacy. -ms.date: 06/17/2025 -ms.localizationpriority: medium ---- - -# Debug add-ins using developer tools in Microsoft Edge Legacy - -This article shows how to debug the client-side code (JavaScript or TypeScript) of your add-in when your computer is using a combination of Windows and Office versions that use the original Edge webview control, EdgeHTML. - -To determine which browser or webview you're using, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). - -> [!TIP] -> [!INCLUDE[Identify the webview through the add-in UI](../includes/identify-webview-in-ui.md)] - -> [!NOTE] -> To install a version of Office that uses the Edge legacy webview or to force your current version of Office to use Edge Legacy, see [Switch to the Edge Legacy webview](#switch-to-the-edge-legacy-webview). - -## Debug a task pane add-in using Microsoft Edge DevTools Preview - -1. Install the [Microsoft Edge DevTools Preview](https://apps.microsoft.com/detail/9mzbfrmz0mnj). (The word "Preview" is in the name for historical reasons. There isn't a more recent version.) - - > [!NOTE] - > If your add-in has an [add-in command](../design/add-in-commands.md) that executes a function, the function runs in a hidden browser runtime process that the Microsoft Edge DevTools cannot detect or attach to, so the technique described in this article cannot be used to debug code in the function. - -1. [Sideload](test-debug-non-local-server.md) and run the add-in. -1. Run the Microsoft Edge DevTools. -1. In the tools, open the **Local** tab. Your add-in is listed by its name. (Only processes that are running in EdgeHTML appear on the tab. The tool can't attach to processes that are running in other browsers or webviews, including Microsoft Edge (WebView2) and Internet Explorer (Trident).) - - :::image type="content" source="../images/edge-devtools-with-add-in-process.png" alt-text="Edge DevTools showing a process named legacy-edge-debugging."::: - -1. Select the add-in name to open it in the tools. -1. Open the **Debugger** tab. -1. Open the file that you want to debug with the following steps. - - 1. On the debugger task bar, select **Show find in files**. This action opens a search window. - 1. Enter a line of code from the file you want to debug in the search box. It should be something that's not likely to be in any other file. - 1. Select the refresh button. - 1. In the search results, select the line to open the code file in the pane above the search results. - - :::image type="content" source="../images/open-file-in-edge-devtools.png" alt-text="Edge DevTools debugging tab with 4 parts labelled A through D."::: - -1. To set a breakpoint, select the line in the code file. The breakpoint is registered in the **Call stack** (bottom right) pane. There may also be a red dot by the line in the code file, but this doesn't appear reliably. -1. Execute functions in the add-in as needed to trigger the breakpoint. - -> [!TIP] -> For more information about using the tools, see [Microsoft Edge (EdgeHTML) Developer Tools](/archive/microsoft-edge/legacy/developer/devtools-guide/). - -## Debug a dialog in an add-in - -If your add-in uses the Office Dialog API, the dialog runs in a separate process from the task pane (if any) and the tools must attach to that process. Follow these steps. - -1. Run the add-in and the tools. -1. Open the dialog and then select the **Refresh** button in the tools. The dialog process is shown. Its name comes from the `` element in the HTML file that is open in the dialog. -1. Select the process to open it and debug just as described in the section [Debug a task pane add-in using Microsoft Edge DevTools Preview](#debug-a-task-pane-add-in-using-microsoft-edge-devtools-preview). - - :::image type="content" source="../images/edge-devtools-with-add-in-and-dialog-processes.png" alt-text="Edge DevTools showing a process named My Dialog."::: - -## Switch to the Edge Legacy webview - -There are two ways to switch the Edge Legacy webview. You can run a simple command in a command prompt, or you can install a version of Office that uses Edge Legacy by default. We recommend the first method. But you should use the second in the following scenarios. - -- Your project was developed with Visual Studio and IIS. It isn't Node.js based. -- You want to be absolutely robust in your testing. -- If for any reason the command line tool doesn't work. - -### Switch via the command line - -[!INCLUDE [Steps to switch browsers with the command line tool](../includes/use-legacy-edge-or-ie.md)] - -### Install a version of Office that uses Edge Legacy - -[!INCLUDE [Steps to install Office that uses Edge Legacy or Internet Explorer](../includes/install-office-that-uses-legacy-edge-or-ie.md)] diff --git a/docs/testing/debug-add-ins-using-f12-tools-ie.md b/docs/testing/debug-add-ins-using-f12-tools-ie.md deleted file mode 100644 index 092f4e276b..0000000000 --- a/docs/testing/debug-add-ins-using-f12-tools-ie.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Debug add-ins using developer tools for Internet Explorer -description: Debug add-ins using the developer tools in Internet Explorer. -ms.date: 12/26/2024 -ms.localizationpriority: medium ---- - -# Debug add-ins using developer tools in Internet Explorer - -This article shows how to debug the client-side code (JavaScript or TypeScript) of your add-in when the following conditions are met. - -- You cannot, or don't wish to, debug using tools built into your IDE; or you are encountering a problem that only occurs when the add-in is run outside the IDE. -- Your computer is using a combination of Windows and Office versions that use the Internet Explorer webview control, Trident. - -To determine which browser or webview is being used on your computer, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). - -> [!TIP] -> [!INCLUDE[Identify the webview through the add-in UI](../includes/identify-webview-in-ui.md)] - -> [!NOTE] -> To install a version of Office that uses Trident or to force your current version to use Trident, see [Switch to the Trident webview](#switch-to-the-trident-webview). - -## Debug a task pane add-in using the F12 tools - -Windows 10 and 11 include a web development tool called "F12" because it was originally launched by pressing <kbd>F12</kbd> in Internet Explorer. F12 is now an independent application used to debug your add-in when it is running in the Internet Explorer webview control, Trident. The application is not available in earlier versions of Windows. - -> [!NOTE] -> If your add-in has an [add-in command](../design/add-in-commands.md) that executes a function, the function runs in a hidden browser runtime process that the F12 tools cannot detect or attach to, so the technique described in this article cannot be used to debug code in the function. - -The following steps are the instructions for debugging your add-in. If you just want to test the F12 tools themselves, see [Example add-in to test the F12 tools](#example-add-in-to-test-the-f12-tools). - -1. [Sideload](test-debug-non-local-server.md) and run the add-in. -1. Launch the F12 development tools that corresponds to your version of Office. - - - For the 32-bit version of Office, use C:\Windows\System32\F12\IEChooser.exe - - For the 64-bit version of Office, use C:\Windows\SysWOW64\F12\IEChooser.exe - - IEChooser opens with a window named **Choose target to debug**. Your add-in will appear in the window named by the filename of the add-in's home page. In the following screenshot, it is `Home.html`. Only processes that are running in Internet Explorer, or Trident, appear. The tool cannot attach to processes that are running in other browsers or webviews, including Microsoft Edge. - - :::image type="content" source="../images/choose-target-to-debug.png" alt-text="IEChooser screen, with several Internet Explorer and Trident processes listed. One is named Home.html."::: - -1. Select your add-in's process; that is, its home page file name. This action will attach the F12 tools to the process and open the main F12 user interface. -1. Open the **Debugger** tab. -1. In the upper left of the tab, just below the debugger tool ribbon, there is a small folder icon. Select this to open a drop down list of the files in the add-in. The following is an example. - - :::image type="content" source="../images/f12-file-dropdown.png" alt-text="The upper left corner of debugger tab with a folder drop down open and a list of files."::: - -1. Select the file that you want to debug and it opens in the the **script** (left) pane of the **Debugger** tab. If you're using a transpiler, bundler, or minifier, that changes the name of the file, it will have the final name that is actually loaded, not the original source file name. - -1. Scroll to a line where you want to set a breakpoint and click in the margin to the left of the line number. You'll see a red dot to the left of the line and a corresponding line appears in the **Breakpoints** tab of the bottom right pane. The following screenshot is an example. - - :::image type="content" source="../images/debugger-home-js-02.png" alt-text="Debugger with breakpoint in home.js file."::: - -1. Execute functions in the add-in as needed to trigger the breakpoint. When the breakpoint is hit, a right-pointing arrow appears on the red dot of the breakpoint. The following screenshot is an example. - - :::image type="content" source="../images/debugger-home-js-01.png" alt-text="Debugger with results from the triggered breakpoint."::: - -> [!TIP] -> For more information about using the F12 tools, see [Inspect running JavaScript with the Debugger](/previous-versions/windows/internet-explorer/ie-developer/samples/dn255007(v=vs.85)). - -### Example add-in to test the F12 tools - -This example uses Word and a free add-in from Microsoft Marketplace. - -1. Open Word and choose a blank document. -1. Select **Home** > **Add-ins**, then select **More Add-ins**. -1. In the **Office Add-ins** dialog, select the **STORE** tab. -1. Search for and select the **QR4Office** add-in. It opens in a task pane. -1. Launch the F12 development tools that corresponds to your version of Office as described in the preceding section. -1. In the F12 window, select **Home.html**. -1. In the **Debugger** tab, open the file **Home.js** as described in the preceding section. -1. Set the breakpoints on lines 310 and 312. -1. In the add-in, select the **Insert** button. One or the other breakpoint is hit. - -## Debug a dialog in an add-in - -If your add-in uses the Office Dialog API, the dialog runs in a separate process from the task pane (if any) and the tools must attach to that process. Follow these steps. - -1. Run the add-in and the tools. -1. Open the dialog and then select the **Refresh** button in the tools. The dialog process is shown. Its name is the file name of the file that is open in the dialog. -1. Select the process to open it and debug just as described in the section [Debug a task pane add-in using the F12 tools](#debug-a-task-pane-add-in-using-the-f12-tools). - -## Switch to the Trident webview - -There are two ways to switch the Trident webview. You can run a simple command in a command prompt, or you can install a version of Office that uses Trident by default. We recommend the first method. But you should use the second in the following scenarios. - -- Your project was developed with Visual Studio and IIS. It isn't Node.js based. -- You want to be absolutely robust in your testing. -- If for any reason the command line tool doesn't work. - -### Switch via the command line - -[!INCLUDE [Steps to switch webviews with the command line tool](../includes/use-legacy-edge-or-ie.md)] - -### Install a version of Office that uses Internet Explorer - -[!INCLUDE [Steps to install Office that uses EdgeHTML (Edge Legacy) or Trident (Internet Explorer)](../includes/install-office-that-uses-legacy-edge-or-ie.md)] - -## See also - -- [Inspect running JavaScript with the Debugger](/previous-versions/windows/internet-explorer/ie-developer/samples/dn255007(v=vs.85)) -- [Using the F12 developer tools](/previous-versions/windows/internet-explorer/ie-developer/samples/bg182326(v=vs.85)) diff --git a/docs/testing/debug-desktop-using-edge-chromium.md b/docs/testing/debug-desktop-using-edge-chromium.md index 98df805fc9..eaeed5bc91 100644 --- a/docs/testing/debug-desktop-using-edge-chromium.md +++ b/docs/testing/debug-desktop-using-edge-chromium.md @@ -1,19 +1,16 @@ --- -title: Debug Office Add-ins on Windows using Visual Studio Code and Microsoft Edge WebView2 (Chromium-based) -description: Learn how to debug Office Add-ins that use Microsoft Edge WebView2 (Chromium-based) in VS Code. -ms.date: 04/15/2024 +title: Debug Office Add-ins on Windows using Visual Studio Code and Microsoft Edge +description: Learn how to debug Office Add-ins that use Microsoft Edge in VS Code. +ms.date: 11/06/2025 ms.localizationpriority: high --- -# Debug Office Add-ins on Windows using Visual Studio Code and Microsoft Edge WebView2 (Chromium-based) +# Debug Office Add-ins on Windows using Visual Studio Code and Microsoft Edge WebView2 -Office Add-ins running on Windows can debug against the Edge Chromium WebView2 runtime directly in Visual Studio Code. - -> [!IMPORTANT] -> This article only applies when Office runs add-ins in the Microsoft Edge Chromium WebView2 runtime, as explained in [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). For instructions about debugging in Visual Studio Code against Microsoft Edge Legacy with the original WebView (EdgeHTML) runtime, see [Debug add-ins using developer tools in Microsoft Edge Legacy](debug-add-ins-using-devtools-edge-legacy.md). +Office Add-ins running on Windows can debug against the Edge runtime directly in Visual Studio Code. > [!TIP] -> If you can't, or don't wish to, debug using tools built into Visual Studio Code; or you're encountering a problem that only occurs when the add-in is run outside Visual Studio Code, you can debug Edge Chromium WebView2 runtime by using the Edge (Chromium-based) developer tools as described in [Debug add-ins using developer tools for Microsoft Edge WebView2](debug-add-ins-using-devtools-edge-chromium.md). +> If you can't, or don't wish to, debug using tools built into Visual Studio Code; or you're encountering a problem that only occurs when the add-in is run outside Visual Studio Code, you can debug the Microsoft Edge WebView2 runtime by using the Edge developer tools as described in [Debug add-ins using developer tools for Microsoft Edge WebView2](debug-add-ins-using-devtools-edge-chromium.md). This debugging mode is dynamic, allowing you to set breakpoints while code is running. See changes in your code immediately while the debugger is attached, all without losing your debugging session. Your code changes also persist, so you see the results of multiple changes to your code. The following image shows this extension in action. @@ -24,7 +21,7 @@ This debugging mode is dynamic, allowing you to set breakpoints while code is ru - [Visual Studio Code](https://code.visualstudio.com/) - [Node.js (version 10+)](https://nodejs.org/) - Windows 10, 11 -- A combination of platform and Office application that supports Microsoft Edge with WebView2 (Chromium-based) as explained in [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). If your version of Office from a Microsoft 365 subscription is earlier than Version 2101, you'll need to install WebView2. For instructions to install WebView2, see [Microsoft Edge WebView2 / Embed web content ... with Microsoft Edge WebView2](https://developer.microsoft.com/microsoft-edge/webview2/). +- A combination of platform and Office application that supports Microsoft Edge with WebView2 as explained in [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). If your version of Office from a Microsoft 365 subscription is earlier than Version 2101, you'll need to install WebView2. For instructions to install WebView2, see [Microsoft Edge WebView2 / Embed web content ... with Microsoft Edge WebView2](https://developer.microsoft.com/microsoft-edge/webview2/). ## Debug a project created with Yo Office @@ -39,7 +36,7 @@ These instructions assume you have experience using the command line, understand 1. Choose **View** > **Run** or enter <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd> to switch to debug view. -1. From the **RUN AND DEBUG** options, choose the Edge Chromium option for your host application, such as **Outlook Desktop (Edge Chromium)**. Select <kbd>F5</kbd> or choose **Run** > **Start Debugging** from the menu to begin debugging. This action automatically launches a local server in a Node window to host your add-in and then automatically opens the host application, such as Excel or Word. This may take several seconds. +1. From the **RUN AND DEBUG** options, choose the Microsoft Edge option for your host application, such as **Outlook Desktop (Edge Chromium)**. Select <kbd>F5</kbd> or choose **Run** > **Start Debugging** from the menu to begin debugging. This action automatically launches a local server in a Node window to host your add-in and then automatically opens the host application, such as Excel or Word. This may take several seconds. > [!TIP] > If you aren't using a project created with Yo Office, you may be prompted to adjust a registry key. While in the root folder of your project, run the following in the command line. @@ -174,8 +171,6 @@ You can now debug your project using the VS Code debugger (F5). ## See also - [Test and debug Office Add-ins](test-debug-office-add-ins.md) -- [Debug add-ins using developer tools for Internet Explorer](debug-add-ins-using-f12-tools-ie.md) -- [Debug add-ins using developer tools for Edge Legacy](debug-add-ins-using-devtools-edge-legacy.md) -- [Debug add-ins using developer tools in Microsoft Edge (Chromium-based)](debug-add-ins-using-devtools-edge-chromium.md) +- [Debug add-ins using developer tools in Microsoft Edge](debug-add-ins-using-devtools-edge-chromium.md) - [Attach a debugger from the task pane](attach-debugger-from-task-pane.md) - [Runtimes in Office Add-ins](runtimes.md) diff --git a/docs/testing/debug-initialize-onready.md b/docs/testing/debug-initialize-onready.md index 809a5d543b..1dd4692689 100644 --- a/docs/testing/debug-initialize-onready.md +++ b/docs/testing/debug-initialize-onready.md @@ -1,7 +1,7 @@ --- title: Debug the initialize and onReady functions description: Learn how to debug the Office.initialize and Office.onReady functions. -ms.date: 09/18/2025 +ms.date: 11/06/2025 ms.localizationpriority: medium --- @@ -26,15 +26,9 @@ To debug with Office on the web, use the following steps. > [!TIP] > For more detailed information, see [Debug add-ins in Office on the web](debug-add-ins-in-office-online.md). -## Debug using Office on Windows +## Debug using Office on Windows -> [!NOTE] -> The technique described in this section works only when the add-in using the WebView2 webview control. To determine which webview you're using, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). - -> [!TIP] -> [!INCLUDE[Identify the webview through the add-in UI](../includes/identify-webview-in-ui.md)] - -[!INCLUDE[Automatically open the Microsoft Edge (Chromium-based) developer tools to debug initializatio](../includes/auto-open-webview2-dev-tools.md)] +[!INCLUDE[Automatically open the Microsoft Edge developer tools to debug initialization](../includes/auto-open-webview2-dev-tools.md)] ## See also diff --git a/docs/testing/ie-11-testing.md b/docs/testing/ie-11-testing.md deleted file mode 100644 index 4d4ead293d..0000000000 --- a/docs/testing/ie-11-testing.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Trident testing -description: Test your Office Add-in on the Trident webview associated with Internet Explorer 11. -ms.date: 09/30/2025 -ms.localizationpriority: medium ---- - -# Test your Office Add-in on Trident - -If you plan to support older versions of Windows and Office, your add-in must work in the embeddable browser control called "Trident" that's provided by Internet Explorer 11. You can use a command line to switch from a more modern webview used by add-ins to Trident for this testing. For information about which versions of Windows and Office use the Internet Explorer 11 webview control, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). In this article, "webview" refers to the combination of a webview control and a JavaScript engine. - -> [!IMPORTANT] -> **Webviews from Internet Explorer and Microsoft Edge Legacy are still used in Office Add-ins** -> -> Some combinations of platforms and Office versions, including volume-licensed perpetual versions through Office 2019, still use the webview controls that come with Internet Explorer 11 (called "Trident") and Microsoft Edge Legacy (called "EdgeHTML") to host add-ins, as explained in [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). Internet Explorer 11 was disabled in Windows 10 and Windows 11 in February 2023, and the UI for launching it was removed; but it's still installed on with those operating systems. So, Trident and other functionality from Internet Explorer can still be called programmatically by Office. -> -> We recommend (but don't require) that you support these combinations, at least in a minimal way, by providing users of your add-in a graceful failure message when your add-in is launched in these webviews. - -## Limitations, restrictions, and special considerations when working with Trident - -When deciding whether, and how, to support Trident, keep these additional points in mind: - -- Office on the web no longer opens in Internet Explorer or Microsoft Edge Legacy. Consequently, [Microsoft Marketplace](/partner-center/marketplace-offers/submit-to-appsource-via-partner-center) doesn't test add-ins in Office on the web on these browsers. -- Microsoft Marketplace still tests for combinations of platform and Office *desktop* versions that use Trident or EdgeHTML. However, it only issues a warning when the add-in doesn't support these webviews; the add-in isn't rejected by Microsoft Marketplace. -- The [Script Lab tool](../overview/explore-with-script-lab.md) no longer supports Trident. -- Trident doesn't support JavaScript versions later than ES5. If you want to use the syntax and features of ECMAScript 2015 or later, you have to use a transpiler or polyfill or both. For more information about these options, see [Support older Microsoft webviews and Office versions](../develop/support-ie-11.md). -- Trident doesn't support some HTML5 features such as media, recording, and location. To learn more, see [Determine the webview the add-in is running in at runtime](../develop/support-ie-11.md#determine-the-webview-the-add-in-is-running-in-at-runtime). -- Office on the web can't be opened in Internet Explorer 11, so you can't (and don't need to) test your add-in on Office on the web with Internet Explorer. -- Internet Explorer's Enhanced Security Configuration (ESC) must be turned off for Office Web Add-ins to work. If you're using a Windows Server computer as your client when developing add-ins, note that ESC is turned on by default in Windows Server. - -## Switch to the Trident webview - -> [!TIP] -> [!INCLUDE[Identify the webview through the add-in UI](../includes/identify-webview-in-ui.md)] - -There are two ways to switch the Trident webview. You can run a simple command in a command prompt, or you can install a version of Office that uses Trident by default. We recommend the first method, but you should use the second in the following scenarios. - -- Your project was developed with Visual Studio and IIS. It isn't Node.js based. -- You want to be absolutely robust in your testing. -- You can't use the Beta channel for Microsoft 365 on your development computer. -- You're developing on a Mac. -- If for any reason the command line tool doesn't work. - -### Switch via the command line - -[!INCLUDE [Steps to switch browsers with the command line tool](../includes/use-legacy-edge-or-ie.md)] - -### Install a version of Office that uses Internet Explorer - -[!INCLUDE [Steps to install Office that uses Edge Legacy or Internet Explorer](../includes/install-office-that-uses-legacy-edge-or-ie.md)] - -## See also - -- [Test and debug Office Add-ins](test-debug-office-add-ins.md) -- [Sideload Office Add-ins for testing](test-debug-non-local-server.md) -- [Debug add-ins using developer tools for Internet Explorer](debug-add-ins-using-f12-tools-ie.md) -- [Attach a debugger from the task pane](attach-debugger-from-task-pane.md) -- [Runtimes in Office Add-ins](runtimes.md) diff --git a/docs/testing/runtime-logging.md b/docs/testing/runtime-logging.md index e136b24a88..88c52a946b 100644 --- a/docs/testing/runtime-logging.md +++ b/docs/testing/runtime-logging.md @@ -1,7 +1,7 @@ --- title: Debug your add-in with runtime logging description: Learn how to use runtime logging to debug your add-in. -ms.date: 11/08/2024 +ms.date: 11/06/2025 ms.localizationpriority: medium --- @@ -9,9 +9,6 @@ ms.localizationpriority: medium You can use runtime logging to debug your add-in's manifest as well as several installation errors. This feature can help you identify and fix issues with your manifest that are not detected by XSD schema validation, such as a mismatch between resource IDs. Runtime logging is particularly useful for debugging add-ins that implement add-in commands and Excel custom functions. -> [!NOTE] -> The runtime logging feature is currently available for Office 2016 or later on desktop. - > [!IMPORTANT] > Runtime Logging affects performance. Turn it on only when you need to debug issues with your add-in manifest. @@ -54,8 +51,6 @@ Enabling runtime logging from the command line is the fastest way to use this lo ## Runtime logging on Mac -1. Make sure that you are running Office 2016 desktop build **16.27.19071500** or later. - 1. Open **Terminal** and set a runtime logging preference by using the `defaults` command: ```command line @@ -122,7 +117,5 @@ You might see messages in the log file that are confusing or that are classified - [Validate an Office Add-in's manifest](troubleshoot-manifest.md) - [Clear the Office cache](clear-cache.md) - [Sideload Office Add-ins for testing](sideload-office-add-ins-for-testing.md) -- [Debug add-ins using developer tools for Internet Explorer](debug-add-ins-using-f12-tools-ie.md) -- [Debug add-ins using developer tools for Edge Legacy](debug-add-ins-using-devtools-edge-legacy.md) -- [Debug add-ins using developer tools in Microsoft Edge (Chromium-based)](debug-add-ins-using-devtools-edge-chromium.md) +- [Debug add-ins using developer tools in Microsoft Edge](debug-add-ins-using-devtools-edge-chromium.md) - [Runtimes in Office Add-ins](runtimes.md) \ No newline at end of file diff --git a/docs/testing/runtimes.md b/docs/testing/runtimes.md index f903ceba6f..b6cbb1d142 100644 --- a/docs/testing/runtimes.md +++ b/docs/testing/runtimes.md @@ -2,7 +2,7 @@ title: Runtimes in Office Add-ins description: Learn about the runtimes that are used by Office Add-ins. ms.topic: concept-article -ms.date: 07/03/2025 +ms.date: 11/06/2025 ms.localizationpriority: medium --- @@ -136,9 +136,6 @@ This type of runtime is used in event-based and spam-reporting add-ins in classi A JavaScript-only runtime uses less memory and starts up faster than a browser runtime, but has fewer features. -> [!IMPORTANT] -> In Office for Windows versions before 2403 (Build 16.0.17425.20000) and perpetual license Office through Office 2021, the JavaScript-only runtime directly supports the ECMAScript 2016 standard of JavaScript. However, you can use later versions of JavaScript or TypeScript. For information about how to do this, see [Support for recent versions of JavaScript](../develop/support-ie-11.md#support-for-recent-versions-of-javascript). - ## Browser runtime Office Add-ins use a different browser type runtime depending on the platform in which Office is running (web, Mac, or Windows), and on the version and build of Windows and Office. For example, if the user is running Office on the web in a FireFox browser, then the Firefox runtime is used. If the user is running Office on Mac, then the Safari runtime is used. If the user is running Office on Windows, then either an Edge or Internet Explorer provides the runtime, depending on the version of Windows and Office. Details can be found in [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). @@ -169,4 +166,3 @@ A "shared runtime" isn't a type of runtime. It refers to a [browser-type runtime > > - You can share runtimes only in Excel, PowerPoint, and Word. > - You can't configure a dialog to share a runtime. Each dialog always has its own, except when the dialog is launched in Office on the web with the `displayInIFrame` option set to `true`. -> - A shared runtime never uses the original Microsoft Edge WebView (EdgeHTML) runtime. If the conditions for using Microsoft Edge with WebView2 (Chromium-based) are met (as specified in [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md)), then that runtime is used. Otherwise, the Internet Explorer 11 runtime is used. diff --git a/docs/testing/sideload-office-add-ins-for-testing.md b/docs/testing/sideload-office-add-ins-for-testing.md index 6e5a262f03..806072e7a1 100644 --- a/docs/testing/sideload-office-add-ins-for-testing.md +++ b/docs/testing/sideload-office-add-ins-for-testing.md @@ -1,7 +1,7 @@ --- title: Sideload Office Add-ins to Office on the web description: Test your Office Add-in in Office on the web by sideloading. -ms.date: 07/29/2025 +ms.date: 11/06/2025 ms.localizationpriority: medium --- @@ -84,9 +84,6 @@ This method doesn't use the command line and can be accomplished using commands 1. Verify that your add-in is installed. For example, if it has an add-in command, it should appear on either the ribbon or the context menu. If it's a task pane add-in that has no add-in commands, the task pane should appear. -> [!NOTE] -> To test your Office Add-in with EdgeHTML (Microsoft Edge Legacy), an additional configuration step is required. In a Windows Command Prompt, run the following line: `npx office-addin-dev-settings appcontainer EdgeWebView --loopback --yes`. This isn't required when Office is using the Chromium-based Edge WebView2. For more information, see [Browsers and webview controls used by Office Add-ins](../concepts/browsers-used-by-office-web-add-ins.md). - [!INCLUDE[Office settings tool not supported on Mac](../includes/tool-nonsupport-mac-note.md)] ## Sideload an add-in to Microsoft 365 diff --git a/docs/testing/test-debug-office-add-ins.md b/docs/testing/test-debug-office-add-ins.md index d3010393fd..58e753722e 100644 --- a/docs/testing/test-debug-office-add-ins.md +++ b/docs/testing/test-debug-office-add-ins.md @@ -20,11 +20,7 @@ Office Add-ins run across major platforms, so you need to test an add-in in all Add-ins are tested for Office on the web with all major modern browsers, including Microsoft Edge (Chromium-based WebView2), Chrome, and Safari. Accordingly, you should test on these platforms and browsers before you submit to [Microsoft Marketplace](/partner-center/marketplace-offers/submit-to-appsource-via-partner-center). For more information about validation, see [Commercial marketplace certification policies](/legal/marketplace/certification-policies), especially [section 1120.3](/legal/marketplace/certification-policies#11203-functionality), and the [Office Add-in application and availability page](/javascript/api/requirement-sets). -Office on the web no longer opens in Internet Explorer or Microsoft Edge Legacy (EdgeHTML). Consequently, Microsoft Marketplace doesn't test Office on the web on these browsers. Office still supports these browsers for add-in runtimes, so if you think you've encountered a bug in how add-ins run in them, please create an issue in the [office-js](https://github.com/OfficeDev/office-js/issues) repository. For more information, see [Support older Microsoft webviews and Office versions](../develop/support-ie-11.md) and [Troubleshoot EdgeHTML and WebView2 (Microsoft Edge) issues](../concepts/browsers-used-by-office-web-add-ins.md#troubleshoot-edgehtml-and-webview2-microsoft-edge-issues). - -### Add-ins tested for Office on Windows - -Some Office versions on Windows still use the webview controls that come with Internet Explorer and Microsoft Edge Legacy. Microsoft Marketplace tests whether your add-in supports these browser controls. If your add-in doesn't support these browser controls, Microsoft Marketplace only issues a warning and doesn't reject your add-in. In this instance, we recommend configuring a graceful failure message on your add-in for a smoother user experience. For further guidance, see [Support older Microsoft webviews and Office versions](../develop/support-ie-11.md). +Office on the web no longer opens in Internet Explorer or Microsoft Edge Legacy (EdgeHTML). Consequently, Microsoft Marketplace doesn't test Office on the web on these browsers. ## Sideload an Office Add-in for testing diff --git a/docs/testing/troubleshoot-development-errors.md b/docs/testing/troubleshoot-development-errors.md index c194fd201c..b623738695 100644 --- a/docs/testing/troubleshoot-development-errors.md +++ b/docs/testing/troubleshoot-development-errors.md @@ -90,7 +90,7 @@ The following are some of the causes of this error. If you discover additional c ## Add-in doesn't work on Edge but it works on other browsers -See [Troubleshoot EdgeHTML and WebView2 (Microsoft Edge) issues](../concepts/browsers-used-by-office-web-add-ins.md#troubleshoot-edgehtml-and-webview2-microsoft-edge-issues). +See [Troubleshoot WebView2 issues](../concepts/browsers-used-by-office-web-add-ins.md#troubleshoot-webview2-issues). ## Excel add-in throws errors, but not consistently diff --git a/docs/testing/troubleshoot-manifest.md b/docs/testing/troubleshoot-manifest.md index a8aecd331a..efb4fff384 100644 --- a/docs/testing/troubleshoot-manifest.md +++ b/docs/testing/troubleshoot-manifest.md @@ -63,6 +63,4 @@ If you're working in Agents Toolkit and using the unified manifest, you can use - [Clear the Office cache](clear-cache.md) - [Debug your add-in with runtime logging](runtime-logging.md) - [Sideload Office Add-ins for testing](sideload-office-add-ins-for-testing.md) -- [Debug add-ins using developer tools for Internet Explorer](debug-add-ins-using-f12-tools-ie.md) -- [Debug add-ins using developer tools for Edge Legacy](debug-add-ins-using-devtools-edge-legacy.md) -- [Debug add-ins using developer tools in Microsoft Edge (Chromium-based)](debug-add-ins-using-devtools-edge-chromium.md) +- [Debug add-ins using developer tools in Microsoft Edge](debug-add-ins-using-devtools-edge-chromium.md) diff --git a/docs/toc.yml b/docs/toc.yml index a0c340663f..7d2d559c8b 100644 --- a/docs/toc.yml +++ b/docs/toc.yml @@ -65,8 +65,6 @@ displayName: Excel, Word, OneNote, Project, PowerPoint, Outlook - name: Runtimes in Office Add-ins href: testing/runtimes.md - - name: Support older Microsoft webviews and Office versions - href: develop/support-ie-11.md displayName: Excel, Word, OneNote, Project, PowerPoint, Outlook - name: Manage both a unified manifest and an add-in only manifest version of your add-in href: concepts/duplicate-legacy-metaos-add-ins.md @@ -223,8 +221,6 @@ items: - name: Icon guidelines href: design/add-in-icons.md - - name: Fresh style - href: design/add-in-icons-fresh.md - name: Monoline style href: design/add-in-icons-monoline.md - name: Layout @@ -374,18 +370,12 @@ href: testing/create-a-network-shared-folder-catalog-for-task-pane-and-content-add-ins.md - name: Attach a debugger from the task pane href: testing/attach-debugger-from-task-pane.md - - name: Debug using developer tools for Internet Explorer - href: testing/debug-add-ins-using-f12-tools-ie.md - - name: Debug using developer tools for Edge Legacy - href: testing/debug-add-ins-using-devtools-edge-legacy.md - - name: Debug using developer tools for Edge Chromium WebView2 + - name: Debug using developer tools for Edge href: testing/debug-add-ins-using-devtools-edge-chromium.md - - name: Debug using Visual Studio Code and Edge Chromium WebView2 + - name: Debug using Visual Studio Code and Edge WebView2 href: testing/debug-desktop-using-edge-chromium.md - name: Debug Office Add-ins in Visual Studio href: develop/debug-office-add-ins-in-visual-studio.md - - name: Test with Trident - href: testing/ie-11-testing.md - name: Unsupported window objects href: reference/window-objects-unsupported-in-add-ins.md - name: Web browser diff --git a/docs/tutorials/excel-tutorial.md b/docs/tutorials/excel-tutorial.md index c6ae0c7838..a30a003f46 100644 --- a/docs/tutorials/excel-tutorial.md +++ b/docs/tutorials/excel-tutorial.md @@ -1,7 +1,7 @@ --- title: Excel add-in tutorial description: Build an Excel add-in that creates, populates, filters, and sorts a table, creates a chart, freezes a table header, protects a worksheet, and opens a dialog. -ms.date: 02/12/2025 +ms.date: 11/06/2025 ms.service: excel #Customer intent: As a developer, I want to build a Excel add-in that can interact with content in a Excel document. ms.localizationpriority: high @@ -91,9 +91,6 @@ In this step of the tutorial, you'll programmatically test that your add-in supp - The `tryCatch` function will be used by all the functions interacting with the workbook from the task pane. Catching Office JavaScript errors in this fashion is a convenient way to generically handle any uncaught errors. - > [!NOTE] - > The following code uses ES6 JavaScript, which isn't compatible with [older versions of Office that use the Trident (Internet Explorer 11) browser engine](/office/dev/add-ins/concepts/browsers-used-by-office-web-add-ins). For information on how to support those platforms in production, see [Support older Microsoft webviews and Office versions](/office/dev/add-ins/develop/support-ie-11). You might qualify for a Microsoft 365 E5 developer subscription, which has the latest Office applications, to use for development through the [Microsoft 365 Developer Program](https://aka.ms/m365devprogram); for details, see the [FAQ](/office/developer-program/microsoft-365-developer-program-faq#who-qualifies-for-a-microsoft-365-e5-developer-subscription-). Alternatively, you can [sign up for a 1-month free trial](https://www.microsoft.com/microsoft-365/try) or [purchase a Microsoft 365 plan](https://www.microsoft.com/microsoft-365/business/compare-all-microsoft-365-business-products-g). - ```js async function createTable() { await Excel.run(async (context) => { diff --git a/docs/tutorials/word-tutorial.md b/docs/tutorials/word-tutorial.md index 0ee4ea781e..dca80af7ba 100644 --- a/docs/tutorials/word-tutorial.md +++ b/docs/tutorials/word-tutorial.md @@ -114,7 +114,7 @@ In this step of the tutorial, you'll programmatically test that your add-in supp ```js const docBody = context.document.body; - docBody.insertParagraph("Office has several versions, including Office 2016, Microsoft 365 subscription, and Office on the web.", + docBody.insertParagraph("Office has several versions, including Office 2021, Microsoft 365 subscription, and Office on the web.", Word.InsertLocation.start); ``` @@ -441,7 +441,7 @@ async function insertTextIntoRange() { 1. Within the `insertTextBeforeRange()` function, replace `TODO1` with the following code. Note: - - The function is intended to add a range whose text is "Office 2019, " before the range with text "Microsoft 365". It makes an assumption that the string is present and the user has selected it. + - The function is intended to add a range whose text is "Office 2024, " before the range with text "Microsoft 365". It makes an assumption that the string is present and the user has selected it. - The first parameter of the `Range.insertText` method is the string to add. @@ -450,7 +450,7 @@ async function insertTextIntoRange() { ```js const doc = context.document; const originalRange = doc.getSelection(); - originalRange.insertText("Office 2019, ", Word.InsertLocation.before); + originalRange.insertText("Office 2024, ", Word.InsertLocation.before); ``` 1. Within the `insertTextBeforeRange()` function, replace `TODO2` with the following code. @@ -533,7 +533,7 @@ async function insertTextIntoRange() { 1. Within the document, select the phrase "Microsoft 365". *Be careful not to include the preceding or following space in the selection.* -1. Choose the **Add Version Info** button. Note that "Office 2019, " is inserted between "Office 2016" and "Microsoft 365". Note also that at the bottom of the document a new paragraph is added but it contains only the originally selected text because the new string became a new range rather than being added to the original range. +1. Choose the **Add Version Info** button. Note that "Office 2024, " is inserted between "Office 2021" and "Microsoft 365". Note also that at the bottom of the document a new paragraph is added but it contains only the originally selected text because the new string became a new range rather than being added to the original range. 1. Within the document, select the word "several". *Be careful not to include the preceding or following space in the selection.*