Office.context.ui undefiend for Outlook Web App wi

Question

I need outlook web add-in supported for Exchange 2013 accounts. So after adding manifest file for Outlook web app The add-in is loading nicely.

I am using Dialog API popup for Sign In functionality. So when customer is clicking on sign in button it shows Cannot read property 'displayDialogAsync' of undefined

while debugging I came to know that Office.context does not contain ui property.

Can anyone guide where I am going wrong ? Or Is this Dialog API supported for Outlook web app containing exchange accounts.

My add-in is working nicely for Outlook Desktop, Outlook Web and mobile as well

if (window.hasOwnProperty('Office')) {
      Office.context.ui.displayDialogAsync(
        `${window.location.origin}/#/signin/` + Office.context.mailbox.userProfile.emailAddress,
        {
          height: 60,
          width: 20
        },
        (result) => {
          const dialog = result.value;
          dialog.addEventHandler(
            Office.EventType.DialogMessageReceived,
            (e: { type: string, message: string }) => {
              if (e.message === 'true') {
                this.oAuthService.initImplicitFlow();
              }
              dialog.close();
            });
        }
      );
      }

Answer 1

You need to check the requirements set.

Requirement sets are named groups of API members. Office Add-ins use requirement sets specified in the manifest or uses a runtime check to determine whether an Office host supports APIs that an add-in needs. For more information, see Office versions and requirement sets. The displayDialogAsync method is available in the DialogApi requirement set for Word, Excel, or PowerPoint add-ins, and in the Mailbox requirement set 1.4 for Outlook.

See Dialog API requirement sets for more information about requirements for the Dialog API.

Error handling

Your callback needs to check result.error.code and result.error.message. Once you know what the error is, you can start troubleshooting. For example.

var dialog;
Office.context.ui.displayDialogAsync('https://myDomain/myDialog.html',
   function (asyncResult) {
       if (asyncResult.status === Office.AsyncResultStatus.Failed) {
            showNotification(asyncResult.error.code = ": " + asyncResult.error.message);
       } else {
            dialog = asyncResult.value;
            dialog.addEventHandler(Office.EventType.DialogMessageReceived, processMessage);
      }
});