with Visual Studio

Open Visual Studio 2017
New Project, Visual C#, Office/SharePoint, Add-ins
Choose 'Excel Web Add-in'
Change the Name to 'ExcelTaskPaneAddin'
Change the Location to somewhere on your C drive.
Press OK.
The 'Create Office Add-in' dialog box will appear.
Choose 'Add new functionalities to Excel' and press Finish.
SS


Solution Files

The solution will contain 2 projects
ExcelTaskpaneAddin - This is a project that only contains the manifest file.
ExcelTaskpaneAddinWeb - This is a web project that contains all the other code.



The Content folder contains files for offline debugging


ExcelTaskpaneAddin.xml

This is the only file in the ExcelTaskPaneAddin project.
The xml file is responsible for describing the type of add-in, how it will be activated as well as all the necessary resources.
This file can be divided into three sections.
The OfficeApp section contains all the information about

<?xml version="1.0" encoding="UTF-8"?> 
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
           xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides"
           xsi:type="TaskPaneApp">
  <Id>942a39b9-5d1b-423d-9a6f-e4e617991c6c</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>Better Solutions Limited</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="ExcelTaskpaneAddin" />
  <Description DefaultValue="ExcelTaskpaneAddin"/>
  <IconUrl DefaultValue="~remoteAppUrl/Images/Button32x32.png" />
  <SupportUrl DefaultValue="http://www.bettersolutions.com" />
  <AppDomains>
    <AppDomain>AppDomain1</AppDomain>
    <AppDomain>AppDomain2</AppDomain>
    <AppDomain>AppDomain3</AppDomain>
  </AppDomains>
  <Hosts>
    <Host Name="Workbook" />
  </Hosts>
  <DefaultSettings>
    <SourceLocation DefaultValue="~remoteAppUrl/Home.html" />
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>

  <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides"
                    xsi:type="VersionOverridesV1_0">
    <Hosts>
    </Hosts>
    <Resources>
    </Resources>
  </VersionOverrides>
</OfficeApp>

The Hosts section contains all the information about

    <Hosts> 
      <Host xsi:type="Workbook">
        <DesktopFormFactor>
          <GetStarted>
            <Title resid="Better.GetStarted.Title"/>
            <Description resid="Better.GetStarted.Description"/>
            <LearnMoreUrl resid="Better.GetStarted.LearnMoreUrl"/>
          </GetStarted>
          <FunctionFile resid="Better.DesktopFunctionFile.Url" />
          <ExtensionPoint xsi:type="PrimaryCommandSurface">
            <OfficeTab id="TabHome">
              <Group id="Better.Group1">
                <Label resid="Better.Group1Label" />
                <Icon>
                  <bt:Image size="16" resid="Better.tpicon_16x16" />
                  <bt:Image size="32" resid="Better.tpicon_32x32" />
                  <bt:Image size="80" resid="Better.tpicon_80x80" />
                </Icon>
                <Control xsi:type="Button" id="Better.TaskpaneButton">
                  <Label resid="Better.TaskpaneButton.Label" />
                  <Supertip>
                    <Title resid="Better.TaskpaneButton.Label" />
                    <Description resid="Better.TaskpaneButton.Tooltip" />
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Better.tpicon_16x16" />
                    <bt:Image size="32" resid="Better.tpicon_32x32" />
                    <bt:Image size="80" resid="Better.tpicon_80x80" />
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                    <TaskpaneId>ButtonId1</TaskpaneId>
                    <SourceLocation resid="Better.Taskpane.Url" />
                  </Action>
                </Control>
              </Group>
            </OfficeTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>

The Resources section contains all the information about the necessary resources.

    <Resources> 
      <bt:Images>
        <bt:Image id="Better.tpicon_16x16" DefaultValue="~remoteAppUrl/Images/Button16x16.png" />
        <bt:Image id="Better.tpicon_32x32" DefaultValue="~remoteAppUrl/Images/Button32x32.png" />
        <bt:Image id="Better.tpicon_80x80" DefaultValue="~remoteAppUrl/Images/Button80x80.png" />
      </bt:Images>
      <bt:Urls>
        <bt:Url id="Better.DesktopFunctionFile.Url" DefaultValue="~remoteAppUrl/Functions/FunctionFile.html" />
        <bt:Url id="Better.Taskpane.Url" DefaultValue="~remoteAppUrl/Home.html" />
        <bt:Url id="Better.GetStarted.LearnMoreUrl" DefaultValue="https://go.microsoft.com/fwlink/?LinkId=276812" />
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="Better.TaskpaneButton.Label" DefaultValue="Show Taskpane" />
        <bt:String id="Better.Group1Label" DefaultValue="Commands Group" />
        <bt:String id="Better.GetStarted.Title" DefaultValue="Get started with your sample add-in!" />
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="Better.TaskpaneButton.Tooltip" DefaultValue="Click to Show a Taskpane" />
        <bt:String id="Better.GetStarted.Description" DefaultValue="HOME tab, click 'Show Taskpane' button." />
      </bt:LongStrings>
    </Resources>

Home.html

This is the default HTML page that will be displayed in the task pane.

<!DOCTYPE html> 
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Excel Add-In with Commands Sample</title>

    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="Scripts/FabricUI/MessageBanner.js" type="text/javascript"></script>
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>

    <!-- To enable offline debugging using a local reference to Office.js, use: -->
    <!-- <script src="Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
    <!-- <script src="Scripts/Office/1/office.js" type="text/javascript"></script> -->

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

    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">
 </head>
 <body>
    <div id="content-main">
        <div class="padding">
            <br />
            <div class="ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">Sample</div>
            <br /><br />
            <div class="ms-font-xl ms-fontColor-neutralTertiary">Getting Started</div>
            <p class="ms-font-m-plus ms-fontColor-neutralTertiary" id="template-description"></p>
            <div class="ms-font-m">
               <a target="_blank" class="ms-Link ms-Link--hero"
                   href="https://bettersolutions.com">Get More Done.</a>
            </div>
            <br /><br />

            <button class="ms-Button ms-Button--primary" id="highlight-button">
                <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
                <span class="ms-Button-label" id="button-text"></span>
                <span class="ms-Button-description" id="button-desc"></span>
            </button>
        </div>
    </div>
    <div class="footer">
        <div class="ms-Grid ms-bgColor-themeSecondary">
            <div class="ms-Grid-row">
                <div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12">
                   <div class="ms-font-xl ms-fontColor-white">BetterSolutions.com</div>
                </div>
            </div>
        </div>
    </div>

    <!-- FabricUI component used for displaying notifications -->
    <div class="ms-MessageBanner" id="notification-popup">
        <div class="ms-MessageBanner-content">
            <div class="ms-MessageBanner-text">
                <div class="ms-MessageBanner-clipper">
                    <div class="ms-font-m-plus ms-fontWeight-semibold" id="notification-header"></div>
                    <div class="ms-font-m ms-fontWeight-semilight" id="notification-body"></div>
                </div>
            </div>
            <button class="ms-MessageBanner-expand" style="display:none">
                <i class="ms-Icon ms-Icon--chevronsDown"></i>
            </button>
            <div class="ms-MessageBanner-action"></div>
        </div>
        <button class="ms-MessageBanner-close"> <i class="ms-Icon ms-Icon--x"></i> </button>
    </div>
</body>
</html>

Home.js

This is the default JavaScript file behind the Home.html page.

(function () { 
    "use strict";

    var cellToHighlight;
    var messageBanner;

    // The initialize function must be run each time a new page is loaded.
    Office.initialize = function (reason) {
        $(document).ready(function () {
            // Initialize the FabricUI notification mechanism and hide it
            var element = document.querySelector('.ms-MessageBanner');
            messageBanner = new fabric.MessageBanner(element);
            messageBanner.hideBanner();
            
            // If not using Excel 2016, use fallback logic.
            if (!Office.context.requirements.isSetSupported('ExcelApi', '1.1')) {
                $("#template-description").text("This sample will display the value of the cells that you have selected in the spreadsheet.");
                $('#button-text').text("Display!");
                $('#button-desc').text("Display the selection");

                $('#highlight-button').click(displaySelectedCells);
                return;
            }

            $("#template-description").text("This sample highlights the highest value from the cells you have selected in the spreadsheet.");
            $('#button-text').text("Highlight!");
            $('#button-desc').text("Highlights the largest number.");
                
            loadSampleData();

            // Add a click event handler for the highlight button.
            $('#highlight-button').click(hightlightHighestValue);
        });
    };

    function loadSampleData() {
        var values = [
            [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000)],
            [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000)],
            [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000)]
        ];

        // Run a batch operation against the Excel object model
        Excel.run(function (context) {
            // Create a proxy object for the active sheet
            var sheet = context.workbook.worksheets.getActiveWorksheet();
            // Queue a command to write the sample data to the worksheet
            sheet.getRange("B3:D5").values = values;

            // Run the queued-up commands, and return a promise to indicate task completion
            return context.sync();
        })
        .catch(errorHandler);
    }

    function hightlightHighestValue() {
        // Run a batch operation against the Excel object model
        Excel.run(function (context) {
            // Create a proxy object for the selected range and load its properties
            var sourceRange = context.workbook.getSelectedRange().load("values, rowCount, columnCount");

            // Run the queued-up command, and return a promise to indicate task completion
            return context.sync()
                .then(function () {
                    var highestRow = 0;
                    var highestCol = 0;
                    var highestValue = sourceRange.values[0][0];

                    // Find the cell to highlight
                    for (var i = 0; i < sourceRange.rowCount; i++) {
                        for (var j = 0; j < sourceRange.columnCount; j++) {
                            if (!isNaN(sourceRange.values[i][j]) && sourceRange.values[i][j] > highestValue) {
                                highestRow = i;
                                highestCol = j;
                                highestValue = sourceRange.values[i][j];
                            }
                        }
                    }

                    cellToHighlight = sourceRange.getCell(highestRow, highestCol);
                    sourceRange.worksheet.getUsedRange().format.fill.clear();
                    sourceRange.worksheet.getUsedRange().format.font.bold = false;

                    // Highlight the cell
                    cellToHighlight.format.fill.color = "orange";
                    cellToHighlight.format.font.bold = true;
                })
                .then(context.sync);
        })
        .catch(errorHandler);
    }

    function displaySelectedCells() {
        Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,
            function (result) {
                if (result.status === Office.AsyncResultStatus.Succeeded) {
                    showNotification('The selected text is:', '"' + result.value + '"');
                } else {
                    showNotification('Error', result.error.message);
                }
            });
    }

    // Helper function for treating errors
    function errorHandler(error) {
        // Always be sure to catch any accumulated errors that bubble up from the Excel.run execution
        showNotification("Error", error);
        console.log("Error: " + error);
        if (error instanceof OfficeExtension.Error) {
            console.log("Debug info: " + JSON.stringify(error.debugInfo));
        }
    }

    // Helper function for displaying notifications
    function showNotification(header, content) {
        $("#notification-header").text(header);
        $("#notification-body").text(content);
        messageBanner.showBanner();
        messageBanner.toggleExpansion();
    }
})();

Loading the Add-in

Select (Debug > Start Debugging)
Excel will open with a task pane displayed.
A blank workbook will be displayed.
A new command will be added to the Home tab.
A task pane will appear on the right hand side.
There will be some sample data in cells "B3:D5"
SS - cells + task pane



© 2022 Better Solutions Limited. All Rights Reserved. © 2022 Better Solutions Limited TopPrevNext