Skip to content

Latest commit

 

History

History
102 lines (62 loc) · 5.21 KB

excel-quickstart-jquery.md

File metadata and controls

102 lines (62 loc) · 5.21 KB
title description ms.date ms.service ms.localizationpriority
Build your first Excel task pane add-in
Learn how to build a simple Excel task pane add-in by using the Office JS API and the Yo Office tool.
12/12/2024
excel
high

Build an Excel task pane add-in

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.

Office Add-ins Development Kit

[!includeDev_kit prerequisites]

Create the add-in project

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.

[!div class="nextstepaction"] Create an add-in in Visual Studio Code

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.

:::image type="content" source="../images/office-add-ins-development-kit-samplepage-excelquickstart.png" alt-text="The Development Kit sample gallery in Visual Studio Code":::

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.

Note

If you use VSCode Insiders, or you have problems opening the project page in VSCode, install the extension manually by following these steps, and find the sample in the sample gallery. [!includeDevkit_project_components_taskpane]

Try it out

[!includeDev_kit_start_debugging]

[!includeDev_kit_stop_debugging]

[!includeDev_kit_troubleshooting]

Yeoman generator

Prerequisites

[!includeYeoman generator prerequisites]

Create the add-in project

[!includeYeoman generator create project guidance]

  • Choose a project type: Office Add-in Task Pane project
  • Choose a script type: Javascript
  • What do you want to name your add-in? My Office Add-in
  • Which Office client application would you like to support? Excel

The Yeoman Generator for Office Add-ins command line interface.

After you complete the wizard, the generator creates the project and installs supporting Node components.

Explore the project

[!includeYeoman generator add-in project components]

Try it out

  1. Navigate to the root folder of the project.

    cd "My Office Add-in"

  2. [!includeStart server section]

  3. In Excel, choose the Home tab, and then choose the Show Taskpane button on the ribbon to open the add-in task pane.

    The Excel Home menu, with the Show Taskpane button highlighted.

  4. Select any range of cells in the worksheet.

  5. At the bottom of the task pane, choose the Run link to set the color of the selected range to yellow.

    The add-in task pane open in Excel, with the Run button highlighted in the add-in task pane.

  6. [!includeInstructions to stop web server and uninstall dev add-in]

Next steps

Congratulations, you've successfully created an Excel task pane add-in! Next, learn more about the capabilities of an Excel add-in and build a more complex add-in by following along with the Excel add-in tutorial.

[!includeThe common troubleshooting section for all Yo Office quick starts]

Code samples

See also