Skip to content

Latest commit

 

History

History
78 lines (49 loc) · 3.93 KB

excel-quickstart-react.md

File metadata and controls

78 lines (49 loc) · 3.93 KB
Raw
title description ms.date ms.service ms.localizationpriority
Use React to build an Excel task pane add-in
Learn how to build a simple Excel task pane add-in by using the Office JS API and React.
12/11/2023
excel
high

Use React to build an Excel task pane add-in

In this article, you'll walk through the process of building an Excel task pane add-in using React and the Excel JavaScript API.

Prerequisites

[!includeYeoman generator prerequisites]

Create the add-in project

[!includeYeoman generator create project guidance]

  • Choose a project type: Office Add-in Task Pane project using React framework
  • Choose a script type: TypeScript
  • 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 Office Add-in generator command line interface, with project type set to the React framework.

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

[!includeNode.js version 20 warning]

[!includeYeoman generator next steps]

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 key 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.

  • The manifest.xml file in the root directory of the project defines the settings and capabilities of the add-in. To learn more about the manifest.xml file, see Office Add-ins XML manifest.
  • The ./src/taskpane/taskpane.html file defines the HTML framework of the task pane, and the files within the ./src/taskpane/components folder define the various parts of the task pane UI.
  • The ./src/taskpane/taskpane.css file contains the CSS that's applied to content in the task pane.
  • The ./src/taskpane/components/App.tsx file contains the Office JavaScript API code that facilitates interaction between the task pane and Excel.

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.

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

Next steps

Congratulations, you've successfully created an Excel task pane add-in using React! 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.

[!div class="nextstepaction"] Excel add-in tutorial

[!includeThe common troubleshooting section for all quickstarts]

See also