Office Dialog API not working on Outlook Client from Outlook AddIn

[abhsha]

Pop-Up opened with office dialog API not getting closed in Outlook Client. It is working for OWA. We are trying to open dialog using Outlook -AddIn.

Expected Behavior

Pop-Up should close on every environment.

Current Behavior

Pop-Up not getting close in Outlook Client from Outlook Add-In.

Steps to Reproduce, or Live Example

Template used for Outlook AddIn :Office Add-in Task Pane project using React framework

Context

Using Dialog API to open Authentication form but normal dialog also without any authentication flow is not getting closed.

Your Environment

• Platform [PC desktop, Mac, iOS, Office on the web]: PC Desktop
• Host [Excel, Word, PowerPoint, etc.]: Outlook Client
• Office version number: 2002
• Operating System: Windows 10/ Windows Server 2016
• Browser (if using Office on the web):NA

Useful logs

Below are the sample snippet to open and close the dialog.

Open Dialog using Dialog API Office.context.ui.displayDialogAsync( "https://localhost:3000/login/login.html", { height: 40, width: 30, promptBeforeOpen: false, displayInIframe: false }, (result) => { if (result.status === Office.AsyncResultStatus.Failed) { } else { loginDialog = result.value; loginDialog.addEventHandler(Office.EventType.DialogMessageReceived, processLoginMessage); // this callback method is used to close the Pop-Up loginDialog.addEventHandler(Office.EventType.DialogEventReceived, processLoginDialogEvent);

        }
    }
);

Send message from Dialog to closure Office.initialize = () => { Office.context.ui.messageParent(JSON.stringify({ status: 'success'})); }; “

[exextoc]

Depending on your system configuration, outlook may be using IE to run add-ins. Some of the JS features you're using (e.g. the => construct) are not supported in IE. Please refer to this article on information regarding browser usage by Office Add-ins.

One way to confirm this theory is to try your code in IE OWA - it will likely not work there either (but will work in Edge, Chrome, etc).

To solve this, you could change your code to use function callback declaration instead of "=>", like so:

Office.context.ui.displayDialogAsync( "https://dev.digitallecom.unicredit.com/OutlookAddIn/login/login.html", { height: 40, width: 30, promptBeforeOpen: false, displayInIframe: false }, function (result) { if (result.status === Office.AsyncResultStatus.Failed) { } ...

Hope this helps. Cheers!

[abhsha]

I tried with the updated change. But, issue is still not resolved.

[exextoc]

Please make sure to replace all occurrences of => in your code (I see at least 2 in provided snippets). Also, it's possible old script is cached in the browser. Also, have you checked if your code works in OWA in Internet Explorer?

[ghost]

This issue has been automatically marked as stale because it is marked as needing author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your interest in Office Add-ins!

[abhsha]

I have changed the declaration as suggested. It is not working for OWA in Internet Explorer

I have verified on other machine also where this sample is working on Outlook Client(Windows 10). The code not works on IE in that machine also.

The behavior is strange.

This is the build version of Outlook Client where this code is not working - Dialog is not getting closed Version 2002 Build 12527.20278

This is the build version of Outlook Client where code is working - Dialog is getting closed Version 2007 Build 13029.20308

[abhsha]

https://github.com/abhsha/OutlookAddInIssue/tree/master/SampleAddInPoC

Added sample code link for more clarity

[exextoc]

Thanks for including the sample. Did you check if the message is actually received by the taskpane code? I do not have a repro so far, and want to see if we can identify whether the issue is in messageParent or dialog.close(). I suggest trying to add additional console.log or attach a debugger https://docs.microsoft.com/en-us/office/dev/add-ins/testing/test-debug-office-add-ins

Another question that could help witht he repro environment is to confirm the Windows build version. Different browser control (Edge or IE) is used depending on the Windows 10 build. More info here: https://developer.microsoft.com/en-us/office/blogs/microsoft-edge-webview-for-office-add-ins/

[abhsha]

I checked the versions for machines where the scenario is not working with Outlook client is either Windows 10 build < 1903 or Windows Server 2016 OS. The dialog is getting closed with message return to task pane in Outlook Client for machine with Windows 10 build 1903 .

Regarding Internet Explorer, the issue exists in all machines. With the current sample, I tried to check the issue. The code always comes back to below condition with no message returned from dialog. if (result.status === Office.AsyncResultStatus.Succeeded) { console.log('received success'); } It even return to this condition if I removed the messageParent function.

Probably, there may be some different way to call this for IE. Also , below event handler also not getting triggered to handle the callback. loginDialog.addEventHandler(Office.EventType.DialogMessageReceived, processLoginMessage); loginDialog.addEventHandler(Office.EventType.DialogEventReceived, processLoginDialogEvent);

[exextoc]

Thanks for checking the Windows version. We found the issue. In IE's implementation of displayDialogAsync, callback for displayDialogAsync is invoked synchronously. In your sample code, processLoginMessage and processLoginDialogEvent are assigned after. As a result, addEventHandler is actually invoked with an undefined callback. To work around this, please move const processLoginMessage/processLoginDialogEvent assignment before making displayDialogAsync call.

We are also looking at updating documentation and ways to surface the error better.

[abhsha]

Thanks Team. I will verify this solution.

[ghost]

This issue has been automatically marked as stale because it is marked as needing author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your interest in Office Add-ins!

[abhsha]

I verified the solution. The changes works for IE.

Thanks for all the help.