Dialog boxes when converting JavaScript Office add-ins to installable add-ins

We have a JavaScript Office add-in. We are making an installable and executable add-in on top of it by VSTO and WebView2. Most features work directly without any problem. But it seems that Office dialog API does not work.

For instance, we have the following code in our add-in, which works well in JavaScript Office add-in.

Office.context.ui.displayDialogAsync(
  `https://www.ourfrontend.com/auth/google`,
  { height: 90, width: 60 },
  asyncResult => {
    const dialog = asyncResult.value;
    dialog.addEventHandler(
      Office.EventType.DialogMessageReceived,
      //tslint:disable-next-line:no-any
      async (arg: any) => {
        if (arg.message === 'getUser') {
          const token = await getSignTokenLocal();                  
          resolve(payloadFromToken(token));
        }
        if (arg.message == 'close') {
          dialog.close();
        }
      },
    );
  },
);

However, when converting to VSTO, the same code raises an error: Error: TypeError: Cannot read properties of undefined (reading 'displayDialogAsync').

Dialog boxes or similar controls are important elements in add-ins. What I would like to realize is

1. clicking on a button in the taskpane could launch a window outside the taskpane, and we could navigate to certain pages in the window.
2. After manipulations on the window, it triggers a callback to the taskpane.

Does anyone know how to achieve this when converting a JavaScript Office add-in to installable add-ins?

The displayDialogAsync method is a feature of the Office JavaScript API (OfficeJS) which is absent when you deal with a WebView2 instance isolated.

In case of VSTO add-ins you need to create a dialog box using Windows Forms or WPF technologies and provide callbacks to them to glue the code used in the web view.

If you consider only displaying a dialog box when a web view instance is displayed to a user you may consider using standard JS techniques.

I've noticed the following new questions after answering to the original post:

> clicking on a button in the taskpane could launch a window outside the taskpane, and we could navigate to certain pages in the window.

You need to display a dialog box from your VSTO add-in outside of the WebView2 browser instance in that case. Winforms or WPF can help with such tasks.

> After manipulations on the window, it triggers a callback to the taskpane.

Learn how to communicate with a webview2 browser instance back and forth. That will be the code add-in functionality - implement event handlers in your VSTO add-in for web page events in the WebView2 instance.