Skip to content

Files

Latest commit

 

History

History
170 lines (123 loc) · 6.62 KB

excel-quickstart-vs.md

File metadata and controls

170 lines (123 loc) · 6.62 KB
title description ms.date ms.service ms.localizationpriority
Build your first Excel task pane add-in with Visual Studio
Learn how to build a simple Excel task pane add-in by using the Office JS API and Visual Studio's templates.
08/20/2024
excel
high

Build an Excel task pane add-in with Visual Studio

In this article, you'll walk through the process of building an Excel task pane add-in in Visual Studio.

Prerequisites

[!includeQuick Start prerequisites]

Create the add-in project

  1. In Visual Studio, choose Create a new project.

  2. Using the search box, enter add-in. Choose Excel Web Add-in, then select Next.

  3. Name your project ExcelWebAddIn1 and select Create.

  4. In the Create Office Add-in dialog window, choose Add new functionalities to Excel, and then choose Finish to create the project.

  5. Visual Studio creates a solution and its two projects appear in Solution Explorer. The Home.html file opens in Visual Studio.

Explore the Visual Studio solution

[!includeDescription of Visual Studio projects]

Update the code

  1. Home.html specifies the HTML that will be rendered in the add-in's task pane. In Home.html, replace the <body> element with the following markup and save the file.

    <body class="ms-font-m ms-welcome">
    <div id="content-header">
        <div class="padding">
            <h1>Welcome</h1>
        </div>
    </div>
    <div id="content-main">
        <div class="padding">
            <p>Choose the button below to set the color of the selected range to green.</p>
            <br />
            <h3>Try it out</h3>
            <button class="ms-Button" id="set-color">Set color</button>
        </div>
    </div>
</body>

  2. Open the file Home.js in the root of the web application project. This file specifies the script for the add-in. Replace the entire contents with the following code and save the file.

    'use strict';

(function () {

    Office.onReady(function() {
        // Office is ready.
        $(document).ready(function () {
            // The document is ready.
            $('#set-color').on("click", setColor);
        });
    });

    async function setColor() {
        await Excel.run(async (context) => {
            const range = context.workbook.getSelectedRange();
            range.format.fill.color = 'green';

            await context.sync();
        }).catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }
})();

  3. Open the file Home.css in the root of the web application project. This file specifies the custom styles for the add-in. Replace the entire contents with the following code and save the file.

    #content-header {
    background: #2a8dd4;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    overflow: hidden;
}

#content-main {
    background: #fff;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

.padding {
    padding: 15px;
}

Update the manifest

  1. In Solution Explorer, go to the ExcelWebAddIn1 add-in project and open the ExcelWebAddIn1Manifest directory. This directory contains your manifest file, ExcelWebAddIn1.xml. The manifest file defines the add-in's settings and capabilities. See the preceding section Explore the Visual Studio solution for more information about the two projects created by your Visual Studio solution.

  2. The ProviderName element has a placeholder value. Replace it with your name.

  3. The DefaultValue attribute of the DisplayName element has a placeholder. Replace it with My Office Add-in.

  4. The DefaultValue attribute of the Description element has a placeholder. Replace it with A task pane add-in for Excel.

  5. Save the file.

    ...
<ProviderName>John Doe</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
<DisplayName DefaultValue="My Office Add-in" />
<Description DefaultValue="A task pane add-in for Excel"/>
...

Try it out

  1. Using Visual Studio, test the newly created Excel add-in by pressing F5 or choosing the Start button to launch Excel with the Show Taskpane add-in button displayed on the ribbon. The add-in will be hosted locally on IIS. If you're asked to trust a certificate, do so to allow the add-in to connect to its Office application.

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

  3. Select any range of cells in the worksheet.

  4. In the task pane, choose the Set color button to set the color of the selected range to green.

    The add-in task pane open in Excel.

[!includeConsole tool note]

Next steps

Congratulations, you've successfully created an Excel task pane add-in! Next, learn more about developing Office Add-ins with Visual Studio.

[!includeThe common troubleshooting section for all Visual Studio quick starts]

Code samples

See also