I am working on a Word Add-in and using the Office Dialog API. A few days ago, everything was working perfectly, but since yesterday, the dialog box is showing a blank screen. I cannot inspect or see the UI.
Here is my dialog.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialog Box</title>
<script>
function showData() {
document.getElementById("data").innerText = "Hello from the Word Add-in!";
}
</script>
</head>
<body onload="showData()">
<h2>Word Add-in Dialog</h2>
<p id="data"></p>
<button onclick="Office.context.ui.messageParent('Dialog closed')">Close</button>
</body>
</html>
And here is my App.jsx:
import React from 'react';
function App() {
function openDialog() {
Office.context.ui.displayDialogAsync("https://localhost:3000/assets/dialog.html", { height: 50, width: 50 }, function (asyncResult) {
let dialog = asyncResult.value;
dialog.addEventHandler(Office.EventType.DialogMessageReceived, function (arg) {
console.log("Message from dialog:", arg);
});
});
}
return (
<div>
<button onClick={openDialog}>Press here</button>
</div>
);
}
export default App;
Note: The path is 100% correct and was working fine before, but now it opens a dialog box that is completely white without any data. Here is a screenshot of the issue: dialoguebox screenshot
Additional Details:
I am using Office.js for the Word Add-in.
The issue started occurring suddenly without any changes to the code.
I have tried clearing the cache and restarting the application, but the issue persists.
Question: Has anyone encountered a similar issue with the Office Dialog API? What could be causing the dialog box to show a blank screen, and how can I resolve it?