While my dialog opens correctly in the Office web app, it only displays a loading indicator and shows "working on your request" in Office 2016. I've attempted to add a task pane, which successfully works and allows me to accept the HTTPS certificate override first, but still, no luck. There are no attempts for the dialog box to appear and I only see an inline indicator.
Unfortunately, there doesn't seem to be an Office developer console that I can access to aid in debugging what might be going wrong.
The functions HTML file is structured like this:
function showSmsModal() {
Office.context.ui
.displayDialogAsync("https://localhost:3000/send-sms", { height: 30, width: 20 });
}
(() => {
// The initialize function must be run each time a new page is loaded
Office.initialize = () => {
console.log("inited");
};
// Add any UI-less functions here
})();
Meanwhile, the index file that contains the dialog's HTML is plain HTML with a React root, and the accompanying JavaScript file appears as follows:
import * as React from 'react'
import * as ReactDOM from 'react-dom'
if (!!Office) {
Office.initialize = async () => {
ReactDOM.render(<div>test</div>, document.getElementById('root'))
}
}
Lastly, let's take a look at the relevant manifest XML:
<Control xsi:type="Button" id="msgReadOpenPaneButton">
<Label resid="paneReadButtonLabel" />
<Supertip>
<Title resid="paneReadSuperTipTitle" />
<Description resid="paneReadSuperTipDescription" />
</Supertip>
<Icon>
<bt:Image size="16" resid="icon16" />
<bt:Image size="32" resid="icon32" />
<bt:Image size="80" resid="icon80" />
</Icon>
<!-- <Action xsi:type="ShowTaskpane">
<SourceLocation resid="messageReadTaskPaneUrl" />
</Action> -->
<Action xsi:type="ExecuteFunction">
<FunctionName>showSmsModal</FunctionName>
</Action>
</Control>