officejs dialog (Office.context.ui.displayDialogAsync) not appearing in browser

135 views Asked by At

I use the following code to reveal the dialog. In MacOS Word 365 desktop, the dialog is revealed and works as documented:

let dialog; 

function openDialog(url, successUrl) {
  Office.onReady((info) => {
    if (info.host === Office.HostType.Word) {
      console.log(info);
      Office.context.ui.displayDialogAsync(
        url,
        { height: 50, width: 30, displayInIframe: false }, // size of the dialog box
        (res) => {
          console.log(JSON.stringify(res));
          if (res.status === Office.AsyncResultStatus.Succeeded) {
            console.log("Display dialog separate window");
            dialog = res.value; // set the dialog variable declared earlier
            dialog.addEventHandler(
              Office.EventType.DialogMessageReceived,
              (arg) => {
                dialog.close();
                const { message } = arg; // we want the string "true"
                if (message === "true") {
                  window.location.replace(successUrl);
                }
              }
            );
          }
        }
      );
    }
  });
}

When using the same code with the same manifest.xml (sideloaded into office for the web for both Chrome and Edge), instead of the prompt (that checks for popup-blockers) appearing in the main window.... it appears in the taskpane:

It seems like the dialog from Office.context.ui.displayDialogAsync is only appearing within the taskpane

And on clicking on allow, a brief dialog box appears but vanishes immediately. The following logs appear in the console (per the code above:

{"value":{},"status":"succeeded"} 
Display dialog separate window

As mentioned, the same code above already works in MacOS 365 but fails in office for the web.

EDIT 1: The dialog properly shows up as a separate window within the Mac Word client and the functions related to the dialog opening and closing work per the documentation.

EDIT 2: Narrowed down the issue to the <script>link-to-office-js</script> within the dialog url causing the vanishing the dialog. See minimal scriptlab implementation and issue raised in Github

0

There are 0 answers