You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/develop/development-kit-overview.md
+4-29Lines changed: 4 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,11 +11,7 @@ The Office Add-ins Development Kit helps set up your environment, create Office
11
11
12
12
[!INCLUDE [Information about the preview status of the dev kit.](../includes/dev-kit-preview-note.md)]
13
13
14
-
## Prerequisites
15
-
16
-
- Download and install [Visual Studio Code](https://code.visualstudio.com/).
17
-
- Node.js (the latest LTS version). Visit the [Node.js site](https://nodejs.org/) to download and install the right version for your operating system. To verify if you've already installed these tools, run the commands `node -v` and `npm -v` in your terminal.
18
-
- Office connected to a Microsoft 365 subscription. You might qualify for a Microsoft 365 E5 developer subscription through the [Microsoft 365 Developer Program](https://developer.microsoft.com/microsoft-365/dev-program), see [FAQ](/office/developer-program/microsoft-365-developer-program-faq#who-qualifies-for-a-microsoft-365-e5-developer-subscription-) for details. Alternatively, you can [sign up for a 1-month free trial](https://www.microsoft.com/microsoft-365/try?rtc=1) or [purchase a Microsoft 365 plan](https://www.microsoft.com/microsoft-365/buy/compare-all-microsoft-365-products).
@@ -67,29 +63,8 @@ To understand how the add-in will work in an Office application, use the Office
67
63
> [!NOTE]
68
64
> These steps are the same as the ones listed in Visual Studio Code by the extension when you create a new project.
69
65
70
-
1. Open the extension by selecting the Office Add-ins Development Kit icon in the **Activity Bar**.
71
-
1. Select **Preview Your Office Add-in (F5)**
72
-
1. In the Quick Pick menu, select the option **{Office Host} Desktop (Edge Chromium)**. This will launch the add-in and debug the code.
73
-
74
-
The development kit checks that the prerequisites are met before debugging starts. Check the terminal for detailed information if there are issues with your environment. After this process, the Office desktop application launches and sideloads the add-in. Please note that the first time you run a project, it may make take a few minutes to install the dependencies. You will need to install the certificate when prompted.
75
-
76
-
## Stop testing your Office Add-in
77
-
78
-
Once you are finished testing and debugging the add-in, close the add-in by following these steps.
79
-
80
-
1. Open the extension by selecting the Office Add-ins Development Kit icon in the **Activity Bar**.
81
-
1. Select **Stop Previewing Your Office Add-in**. This closes the web server and removes the add-in from the registry and cache.
82
-
1. Close the Office application window at your convenience.
83
-
84
-
## Troubleshooting
85
-
86
-
If you have problems running the add-in, take these steps.
87
-
88
-
- Close any open instances of Office.
89
-
- Close the previous web server started for the add-in with the **Stop Previewing Your Office Add-in** Office Add-ins Development Kit extension option.
90
-
91
-
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).
- Download and install [Visual Studio Code](https://code.visualstudio.com/).
4
+
- Node.js (the latest LTS version). Visit the [Node.js site](https://nodejs.org/) to download and install the right version for your operating system. To verify if you've already installed these tools, run the commands `node -v` and `npm -v` in your terminal.
5
+
- Office connected to a Microsoft 365 subscription. You might qualify for a Microsoft 365 E5 developer subscription through the [Microsoft 365 Developer Program](https://developer.microsoft.com/microsoft-365/dev-program), see [FAQ](/office/developer-program/microsoft-365-developer-program-faq#who-qualifies-for-a-microsoft-365-e5-developer-subscription-) for details. Alternatively, you can [sign up for a 1-month free trial](https://www.microsoft.com/microsoft-365/try?rtc=1) or [purchase a Microsoft 365 plan](https://www.microsoft.com/microsoft-365/buy/compare-all-microsoft-365-products).
1. Open the extension by selecting the Office Add-ins Development Kit icon in the **Activity Bar**.
2
+
1. Select **Preview Your Office Add-in (F5)**
3
+
1. In the Quick Pick menu, select the option **{Office Application} Desktop (Edge Chromium)**, where '{Office Application}' is the appropriate application, such as "Excel" or "Word". This will launch the add-in and debug the code.
4
+
5
+
The development kit checks that the prerequisites are met before debugging starts. Check the terminal for detailed information if there are issues with your environment. After this process, the Office desktop application launches and sideloads the add-in. Please note that the first time you run a project, it may make take a few minutes to install the dependencies. You'll need to install the certificate when prompted.
Once you are finished testing and debugging the add-in, *always* close the add-in by following these steps. (Closing the Office application or web server window doesn't reliably deregister the add-in.)
4
+
5
+
1. Open the extension by selecting the Office Add-ins Development Kit icon in the **Activity Bar**.
6
+
1. Select **Stop Previewing Your Office Add-in**. This closes the web server and removes the add-in from the registry and cache.
If you have problems running the add-in, take these steps.
4
+
5
+
- Close any open instances of Office.
6
+
- Close the previous web server started for the add-in with the **Stop Previewing Your Office Add-in** Office Add-ins Development Kit extension option.
7
+
8
+
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.
9
+
10
+
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).
11
+
12
+
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).
The add-in project that you've created with the Office Add-ins Development Kit 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 files listed below. When you're ready to try out your add-in, proceed to the next section.
4
+
5
+
1. The **./manifest.xml** or **./manifest.json** file in the root directory of the project defines the settings and capabilities of the add-in.
6
+
1. The **./src/taskpane/taskpane.html** file contains the HTML markup for the task pane.
7
+
1. The **./src/taskpane/taskpane.css** file contains the CSS that's applied to content in the task pane.
8
+
1. The **./src/taskpane/taskpane.js** file contains the Office JavaScript API code that facilitates interaction between the task pane and the Office client application.
Copy file name to clipboardExpand all lines: docs/overview/set-up-your-dev-environment.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Set up your development environment
3
3
description: Set up your developer environment to build Office Add-ins.
4
-
ms.date: 08/22/2024
4
+
ms.date: 12/12/2024
5
5
ms.topic: install-set-up-deploy
6
6
ms.localizationpriority: medium
7
7
---
@@ -124,7 +124,7 @@ You can create Office add-in projects in Visual Studio Code with either the Team
124
124
125
125
Install [Visual Studio Code](https://code.visualstudio.com/) and then install the latest version of Teams Toolkit as described in [Install Teams Toolkit](/microsoftteams/platform/toolkit/install-teams-toolkit?tabs=vscode).
126
126
127
-
#### Install the Office Add-ins Development Kit extension (preview)
127
+
#### Install the Office Add-ins Development Kit extension
128
128
129
129
The Office Add-ins Development Kit extension for Visual Studio Code lets you create and run new add-ins directly from the IDE. For more information about the extension, see [Create Office Add-in projects using Office Add-ins Development Kit for Visual Studio Code](../develop/development-kit-overview.md).
Copy file name to clipboardExpand all lines: docs/quickstarts/excel-quickstart-jquery.md
+31-2Lines changed: 31 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,44 @@
1
1
---
2
2
title: Build your first Excel task pane add-in
3
3
description: Learn how to build a simple Excel task pane add-in by using the Office JS API and the Yo Office tool.
4
-
ms.date: 08/20/2024
4
+
ms.date: 12/12/2024
5
5
ms.service: excel
6
6
ms.localizationpriority: high
7
7
---
8
8
9
9
# Build an Excel task pane add-in
10
10
11
-
In this article, you'll walk through the process of building an Excel task pane add-in with Yo Office.
11
+
In this article, you'll walk through the process of building an Excel task pane add-in. You'll use either the Office Add-ins Development Kit or the Yeoman generator to create your Office Add-in. Select the tab for the one you'd like to use and then follow the instructions to create your add-in and test it locally. If you'd like to create the add-in project within Visual Studio Code, we recommend the Office Add-ins Development Kit.
Click the following button to create an add-in project using the Office Add-ins Development Kit for Visual Studio Code. You'll be prompted to install the extension if don't already have it. A page that contains the project description will open in Visual Studio Code.
20
+
21
+
> [!div class="nextstepaction"]
22
+
> [Create an add-in in Visual Studio Code](vscode://msoffice.microsoft-office-add-in-debugger/open-specific-sample?sample-id=excel-get-started-with-dev-kit)
23
+
24
+
In the prompted page, select **Create** to create the add-in project. In the **Workspace folder** dialog that opens, select the folder where you want to create the project.
25
+
26
+
:::image type="content" source="../images/office-add-ins-development-kit-samplepage-excelquickstart.png" alt-text="The Development Kit sample gallery in Visual Studio Code":::
27
+
28
+
The Office Add-ins Development Kit will create the project. It will then open the project in a *second* Visual Studio Code window. Close the original Visual Studio Code window.
29
+
30
+
> [!NOTE]
31
+
> If you use VSCode Insiders, or you have problems opening the project page in VSCode, install the extension manually by following [these steps](../develop/development-kit-overview.md?tabs=vscode), and find the sample in the sample gallery.
0 commit comments