Before we get into the details, let’s see how it works. I like to see things in action first, then start looking under the hood.

First, let’s install the most recent version of Visual Studio (VS) Community (Visual Studio 2022 Community Edition – Download Latest Free Version (microsoft.com). While you are installing, make sure to choose the Office/SharePoint development option.

Once you are ready with VS, let’s create our first Excel Web add-in. Start VS then choose Create a new project. Type excel in the search box and choose Excel Web Add-in then click next.

Let’s create a sample project “TestTechAddin”. It will ask one more time for “Choose the add-in type”. Select “Add new functionalities to Excel”. It may take some time (1-2 minutes) to finalizing the project creation process.

Once created, it will show some HTML code and others like:

Please don’t be intimidated by the way it looks that is way more complicated than VBA. This actually provides a small sample add-in program by default. Let’s run this and see how it works. Similar to VBA, you can click the start button

on the editor.

This will launch a blank Excel workbook with “Show Taskpane” button in the “Home” tab. Click it and it will display the add-in screen on the right side. If you choose any cell on the spread sheet and click the “Highlight” button, it will highlight the cell with orange color. This is a something that you can definitely do with VBA!

The pane on the right side (TestTechAddin) is actually a web browser. That’s why it is a Web Add-in and also able to run on any platform runs a web browser.

You can stop testing by clicking the stop button on the editor.

If you press the stop button, sometimes it closes the Excel together and sometimes not. So, make sure you close the Excel before your run this again (you don’t need to save the Excel file).

VS creates many files automatically, but your main code is in “Home.js” which is a JavaScript code. You can scroll down the code to find the function “highlightHighestValue”. Actually, this function highlights the highest value among selection but if you only choose one cell, that is the highest value. Let’s forget about the code for now and just focus on the overall process.

It has HTML code (Home.html) to create the button (“Highlight”). So, you are creating a web page with JavaScript that interacts with Excel. Again, the benefit of this is you create once, and it runs on every platform.

If you have prior experience in programming, you may be able to play around changing the codes.

Your next biggest question maybe how I can share my program with others. You cannot save this code with your Excel file and it requires different approach than VBA. It is a long process and will be explained at the end of this series.

Anyways, you have successfully created your first Excel Web Add-in. Congratulations!

Any comments are welcome!