Recently, I was asked what is needed in order to create the most basic add-in you can. The least amount of files, work and effort. Technically, you only need two files:
- An HTML file with all your JavaScript inline and all the Office and JQuery libraries being pulled from a CDN.
- An XML Manifest file that defines the add-in.
You publish the HTML file to a web server, get the address to where it is published, update the manifest with that information and then install the XML file as an add-in. The XML file will define the add-in name/description and points to the HTML file for the code. When you launch the add-in, the task pane will open and the HTML page will be loaded in it. From there your JavaScript will execute and your add-in will come alive. It is THAT easy. 2 files.
To demonstrate this, I created a simple Excel add-in. Here is the code for the bare minimum manifest XML:
<?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>5226365f-62d0-435f-a4af-cc6a7bd753b2</Id> <Version>1.0.0.1</Version> <ProviderName>TheOfficeContext.com</ProviderName> <DefaultLocale>en-US</DefaultLocale> <DisplayName DefaultValue="BasicAddin" /> <Description DefaultValue="This is a basic addin."/> <IconUrl DefaultValue="" /> <Hosts> <Host Name="Workbook" /> </Hosts> <DefaultSettings> <SourceLocation DefaultValue="https://basicaddin.azurewebsites.net/home.html" /> </DefaultSettings> <Permissions>ReadWriteDocument</Permissions> </OfficeApp>
<?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>5226365f-62d0-435f-a4af-cc6a7bd753b2</Id> | |
<Version>1.0.0.1</Version> | |
<ProviderName>TheOfficeContext.com</ProviderName> | |
<DefaultLocale>en-US</DefaultLocale> | |
<DisplayName DefaultValue="BasicAddin" /> | |
<Description DefaultValue="This is a basic addin."/> | |
<IconUrl DefaultValue="" /> | |
<Hosts> | |
<Host Name="Workbook" /> | |
</Hosts> | |
<DefaultSettings> | |
<SourceLocation DefaultValue="https://basicaddin.azurewebsites.net/home.html" /> | |
</DefaultSettings> | |
<Permissions>ReadWriteDocument</Permissions> | |
</OfficeApp> |
Here is the HTML file that is quite basic, I am not even using the Microsoft Fabric for the controls. This is a simple HTML page, period:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <title>Excel Basic Add-In</title> <!--using JQuery CDN so we do not need to include--> <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script> <script type="text/javascript"> (function () { "use strict"; // The initialize function must be run each time a new page is loaded. Office.initialize = function (reason) { $(document).ready(function () { // Add a click event handler for the button. $('#simple-button').click(function () { Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, function (result) { if (result.status === Office.AsyncResultStatus.Succeeded) { $("#banner-text").text('The selected text is: "' + result.value + '"'); $("#banner").show(); } else { $("#banner-text").text('Error: ' + result.error.message); $("#banner").show(); } }); }); $("#banner-close").click(function () { $("#banner").hide(); }); $("#banner").hide(); }); } })(); </script> </head> <body> <div id="content-main"> <div class="padding"> <h1>Basic Addin</h1> <div>Select a cell with text and then...</div> <button id="simple-button">Click Here!</button></div> </div> <div id="banner" style="position:absolute;bottom: 0;"> <div id="banner-text"></div> <button id="banner-close"> <i>X</i> </button></div> </body> </html>
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> | |
<title>Excel Basic Add-In</title> | |
<!–using JQuery CDN so we do not need to include–> | |
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> | |
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script> | |
<script type="text/javascript"> | |
(function () { | |
"use strict"; | |
// The initialize function must be run each time a new page is loaded. | |
Office.initialize = function (reason) { | |
$(document).ready(function () { | |
// Add a click event handler for the button. | |
$('#simple-button').click(function () { | |
Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, | |
function (result) { | |
if (result.status === Office.AsyncResultStatus.Succeeded) { | |
$("#banner-text").text('The selected text is: "' + result.value + '"'); | |
$("#banner").show(); | |
} else { | |
$("#banner-text").text('Error: ' + result.error.message); | |
$("#banner").show(); | |
} | |
}); | |
}); | |
$("#banner-close").click(function () { $("#banner").hide(); }); | |
$("#banner").hide(); | |
}); | |
} | |
})(); | |
</script> | |
</head> | |
<body> | |
<div id="content-main"> | |
<div class="padding"> | |
<h1>Basic Addin</h1> | |
<div>Select a cell with text and then…</div> | |
<button id="simple-button">Click Here!</button> | |
</div> | |
</div> | |
<div id="banner" style="position:absolute;bottom: 0;"> | |
<div id="banner-text"></div> | |
<button id="banner-close"> <i>X</i> </button> | |
</div> | |
</body> | |
</html> |
What this add-in does is very simple. It opens the task pane with a single button. Enter some text in a cell in Excel, select that cell, and then click the button. It gets the text and displays it in a popup at the bottom of the pane. I have published this add-in manifest here:
https://basicaddin.azurewebsites.net/basicaddin.xml
You can run it by using these steps:
- Open Excel Online. I first log into https://outlook.office365.com. Then I click on the menu button in the upper left and select Excel.
- I select to create a “New blank workbook.”
- On the Insert tab, I click Add-ins.
- In the upper right, I select “Upload My Add-in”
- I click Browse and in the Filename box, I put https://basicaddin.azurewebsites.net/basicaddin.xml and then click Open. This will download the add-in to the cache on your system and you will get a file name like “basicaddin[1].xml.”
- Click Upload.
- The add-in will load from my Azure site and you will see the button demonstrated above.
Now, to go ahead and answer a question I know are coming. How did I upload this Azure without Visual Studio publishing tools:
- I went to my Azure Protal (portal.azure.com).
- I clicked the +New button on the left side.
- I selected Web + Mobile, then Web App
- I filled in the required information: Name and resource group and clicked Create.
- After it was done, I followed these steps to get to the site via FTP: https://blogs.msdn.microsoft.com/kaushal/2014/08/01/microsoft-azure-web-site-connect-to-your-site-via-ftp-and-uploaddownload-files/
- I uploaded ONLY the HTML file.
- I got the path to the location from the Azure portal:
- Next, I updated the XML manifest to point to https://basicaddin.azurewebsites.net/home.html
- Then I used the steps above to load it into Excel Online.
This is fairly simple from a web developer perspective. Now, if you are not a web developer (but a traditional Office developer), you are probably still on the fence on how/why you would want to go through all of this. Again, the primary thing I am demonstrating here is how you can build an add-in with as few files as possible. But, I want to reiterate how these new add-ins are truly cross-platform. Follow these steps on your iPad and you will know what I mean. It is incredible and this work really is not that difficult to perform. It might just be a tad time consuming in the beginning as you are getting used to the new interfaces.
If you have questions, please feel free to reach out to me.