Note: It has come to my attention that I must save the taskpane.html file on my local drive before it opens in an external browser. This detail slipped my notice last week.
I am currently developing a Javascript, or rather Typescript, API add-in for Excel. On my local machine, everything seems to be functioning correctly. However, when I upload the source code to a server and side-load the manifest, clicking the new button to open a task pane results in the html file opening in an external browser instead of the task pane itself.
Here are the steps I followed to reproduce this issue (on my system):
- Follow the instructions provided here to set up your development environment (includes installing Node.js, npm, yeoman, and Visual Studio Code).
- Generate a sample add-in using yeoman as outlined here (use the command "yo office", select Office Add-in Task Pane project, choose Typescript script type, name it Anything, and ensure it supports Excel).
- Publish this add-in following the steps detailed here (run "npm run build", upload the generated dist folder to a server, edit the manifest by replacing localhost:3000 with the URL of the server).
- Side-load the add-in according to the guidelines provided here.
- Attempt to run the add-in and observe the taskpane.html file opening in an external browser.
Additional Note:
Below is the current manifest I am utilizing. (Please note that "MyCompanyName" does not represent the actual URL)
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<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>27a7b548-9df8-4f2c-8554-0f4e9ebe4d6a</Id>
<Version>1.0.0.0</Version>
<ProviderName>Contoso</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue="SIPmath"/>
<Description DefaultValue="A template to get started."/>
<IconUrl DefaultValue="https://MyCompanyName.squarespace.com/s/icon-32.png"/>
<HighResolutionIconUrl DefaultValue="https://MyCompanyName.squarespace.com/s/icon-80.png"/>
<SupportUrl DefaultValue="https://www.contoso.com/help"/>
<AppDomains>
<AppDomain>contoso.com</AppDomain>
</AppDomains>
<Hosts>
<Host Name="Workbook"/>
</Hosts>
<DefaultSettings>
<SourceLocation DefaultValue="https://MyCompanyName.squarespace.com/s/taskpane.html"/>
</DefaultSettings>
<Permissions>ReadWriteDocument</Permissions>
<VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
<Hosts>
<Host xsi:type="Workbook">
<DesktopFormFactor>
<GetStarted>
<Title resid="GetStarted.Title"/>
<Description resid="GetStarted.Description"/>
<LearnMoreUrl resid="GetStarted.LearnMoreUrl"/>
</GetStarted>
<FunctionFile resid="Commands.Url"/>
<ExtensionPoint xsi:type="PrimaryCommandSurface">
<OfficeTab id="TabHome">
<Group id="CommandsGroup">
<Label resid="CommandsGroup.Label"/>
<Icon>
<bt:Image size="16" resid="Icon.16x16"/>
<bt:Image size="32" resid="Icon.32x32"/>
<bt:Image size="80" resid="Icon.80x80"/>
</Icon>
<Control xsi:type="Button" id="TaskpaneButton">
<Label resid="TaskpaneButton.Label"/>
<Supertip>
<Title resid="TaskpaneButton.Label"/>
<Description resid="TaskpaneButton.Tooltip"/>
</Supertip>
<Icon>
<bt:Image size="16" resid="Icon.16x16"/>
<bt:Image size="32" resid="Icon.32x32"/>
<bt:Image size="80" resid="Icon.80x80"/>
</Icon>
<Action xsi:type="ShowTaskpane">
<TaskpaneId>ButtonId1</TaskpaneId>
<SourceLocation resid="Taskpane.Url"/>
</Action>
</Control>
</Group>
</OfficeTab>
</ExtensionPoint>
</DesktopFormFactor>
</Host>
</Hosts>
<Resources>
<bt:Images>
<bt:Image id="Icon.16x16" DefaultValue="https://MyCompanyName.squarespace.com/s/icon-16.png"/>
<bt:Image id="Icon.32x32" DefaultValue="https://MyCompanyName.squarespace.com/s/icon-32.png"/>
<bt:Image id="Icon.80x80" DefaultValue="https://MyCompanyName.squarespace.com/s/icon-80.png"/>
</bt:Images>
<bt:Urls>
<bt:Url id="GetStarted.LearnMoreUrl" DefaultValue="https://go.microsoft.com/fwlink/?LinkId=276812"/>
<bt:Url id="Commands.Url" DefaultValue="https://MyCompanyName.squarespace.com/s/commands.html"/>
<bt:Url id="Taskpane.Url" DefaultValue="https://MyCompanyName.squarespace.com/s/taskpane.html"/>
</bt:Urls>
<bt:ShortStrings>
<bt:String id="GetStarted.Title" DefaultValue="Get started with your sample add-in!"/>
<bt:String id="CommandsGroup.Label" DefaultValue="Commands Group"/>
<bt:String id="TaskpaneButton.Label" DefaultValue="Show Taskpane"/>
</bt:ShortStrings>
<bt:LongStrings>
<bt:String id="GetStarted.Description" DefaultValue="Your sample add-in loaded succesfully. Go to the HOME tab and click the 'Show Taskpane' button to get started."/>
<bt:String id="TaskpaneButton.Tooltip" DefaultValue="Click to Show a Taskpane"/>
</bt:LongStrings>
</Resources>
</VersionOverrides>
</OfficeApp>