This sample add-in shows how to use shapes to build a dashboard in Excel.

• Use Table and Range APIs to insert sample data.
• Use Shape APIs to insert and format to work as a dashboard.

• Download and install Visual Studio Code.
• Install the latest version of Office Add-ins Development Kit into Visual Studio Code.
• Node.js (the latest LTS version). Visit the Node.js site 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.
• Office connected to a Microsoft 365 subscription. You might qualify for a Microsoft 365 E5 developer subscription through the Microsoft 365 Developer Program, see FAQ for details. Alternatively, you can sign up for a 1-month free trial or purchase a Microsoft 365 plan.

We recommend you try this sample by using the Office Add-ins Development Kit. The Office Add-ins Development Kit is an end-to-end developer tool for building Office add-ins. It helps create, run, and debug an Office Add-in.

1. Download the sample code

   To download this sample code, either:

   • Open the Office Add-ins Development Kit extension and view samples in the Sample gallery. Select the Create button in the top-right corner of the sample page.
   • Clone this repository or download this sample to a folder on your computer. Then, open the folder in Visual Studio Code.

2. Open the Office Add-ins Development Kit

   Select the icon in the Activity Bar to open the extension.

3. Preview Your Office Add-in (F5)

   Select Preview Your Office Add-in(F5) to launch the add-in and debug the code. In the drop down menu, select the option Desktop (Edge Chromium).

   

   The extension then 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 Excel desktop application launches and opens a new workbook with the sample add-in.

4. Stop Previewing Your Office Add-in

   Once you are finished testing and debugging the add-in, select Stop Previewing Your Office Add-in. This closes the web server and removes the add-in from the registry and cache.

1. Click the button "Add Sample data" to import some sample data.
2. Then a new table with content will be inserted into worksheet "Sample"
3. Click the button "Create Empty Dashboard", it will use create some shapes whose content is empty to work as an empty dashboard.
4. Click the button "Add information to Dashboard" to analyze some information from sample data and write them into the shapes.
5. Click the button "Change information Format" to format the content in the shapes.

These are the important files in the sample project.

| .eslintrc.json
| .gitignore
| .vscode/
|   | extensions.json
|   | launch.json               Launch and debug configurations
|   | settings.json             
|   | tasks.json                
| assets/                       Static assets, such as images
| babel.config.json
| manifest.xml                  Manifest file
| package.json                  
| README.md                     
| RUN_WITH_EXTENSION.md         
| src/                          Add-in source code
|   | commands/
|   |   | commands.html        
|   |   | commands.ts
|   | taskpane/
|   |   | taskpane.css          Task pane style
|   |   | taskpane.html         Task pane entry HTML
|   |   | taskpane.ts           Add API calls and logic here
| webpack.config.js             Webpack config

If you have problems running the sample, take these steps.

• Close any open instances of Excel.
• Close the previous web server started for the sample with the Stop Previewing Your Office Add-in Office Add-ins Development Kit extension option.

If you still have problems, see troubleshoot development errors or create a GitHub issue and we'll help you.

For information on running the sample on Excel on the web, see Sideload Office Add-ins to Office on the web.

For information on debugging on older versions of Office, see Debug add-ins using developer tools in Microsoft Edge Legacy.

Once you understand the sample, make it your own! All the information about Office Add-ins is found in our official documentation. You can also explore more samples in the Office Add-ins Development Kit. Select View Samples to see more samples of real-world scenarios.

If you edit the manifest as part of your changes, use the Validate Manifest File option in the Office Add-ins Development Kit. This shows you errors in the manifest syntax.

Did you experience any problems with the sample? Create an issue and we'll help you out.

Want to learn more about new features and best practices for the Office platform? Join the Microsoft Office Add-ins community call.

Copyright (c) 2024 Microsoft Corporation. All rights reserved. This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.