Build an Excel add-in using jQuery

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

Create the web app

1- Create a folder on your local drive and name it my-addin. This is where you'll create the files for your app.

2- Navigate to your app folder.

cd my-addin

3- In your app folder, create a file named Home.html to specify the HTML that will be rendered in the add-in's task pane. Add the following code and save the file.

<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <title>My Excel Add-in</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>

        <link href="Office.css" rel="stylesheet" type="text/css" />
        <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>

        <link href="Common.css" rel="stylesheet" type="text/css" />
        <script src="Notification.js" type="text/javascript"></script>
        <script src="Home.js" type="text/javascript"></script>

        <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
        <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
    </head>
    <body class="ms-font-m">
        <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>
</html>

4- In your app folder, create a file named Home.js to specify the jQuery script for the add-in. Add the following code and save the file.

(function () {
    "use strict";

    Office.initialize = function (reason) {
        $(document).ready(function () {
            $('#set-color').click(setColor);
        });
    };

    function setColor() {
        Excel.run(function (context) {
            var range = context.workbook.getSelectedRange();
            range.format.fill.color = 'green';

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

5- In your app folder, create a file named Common.css to specify the custom styles for the add-in. Add 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;
}

Create the manifest file and sideload the add-in

1- In your app folder, create a file named my-excel-add-in-manifest.xml to define the add-in's settings and capabilities. Add the following XML to the file.

<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp">
    <Id>ab2991e7-fe64-465b-a2f1-c865247ef434</Id>
    <Version>1.0.0.0</Version>
    <ProviderName>Microsoft</ProviderName>
    <DefaultLocale>en-US</DefaultLocale>
    <DisplayName DefaultValue="My Office Add-in" />
    <Description DefaultValue="A task pane add-in for Excel built using jQuery"/>
    <Capabilities>
    <Capability Name="Workbook" />
    </Capabilities>
    <DefaultSettings>
    <SourceLocation DefaultValue="~remoteAppUrl/my-addin/Home.html" />
    </DefaultSettings>
    <Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

2- Generate a GUID using an online generator of your choice. Then, replace the value of the Id element shown in the previous step with that GUID.

3- Save the manifest file.

Deploy the web app and update the manifest

1- Deploy your web app (i.e., the contents of your app folder) to the web server of your choice.

2- In your local app folder, open the manifest file (my-excel-add-in-manifest.xml). Edit the attribute value within the SourceLocation element to specify the location of the Home.html file on the web server and save the file.

Try it out

1- Follow the instructions for the platform you'll use to run your add-in to sideload the add-in within Excel.

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

Excel Add-in

Next steps

Congratulations, you've successfully created an Excel add-in using jQuery! Next, learn more about the core concepts of building Excel add-ins.

Additional resources

">Excel JavaScript API reference