Office-js: Nothing happens when calling Office.context.ui.displayDialogAsync()

[binarykitchen]

As the title says, when I run this code

Office.context.ui.displayDialogAsync(
  "https://login.microsoftonline.com/common/oauth2/v2.0/authorize?response_type=token&client_id=bcf84a37-9abe-44ab-97db-90635563b938&redirect_uri=https%3A%2F%2Flocalhost%3A3443%2Findex.html&scope=Mail.ReadWrite&state=3175043341&nonce=4000667273&response_mode=fragment",
  { width: 1024, height: 768 }
)

nothing happens, no dialogue shows up.

If there was a problem, an error, I expect it to be seen in the console

Happens on https://outlook.office.com/ when testing a local outlook add-in.

[Rick-Kirkham]

The URL that you pass to displayDialogAsync has to be hosted in the same domain as the add-in. See here for details: https://docs.microsoft.com/en-us/office/dev/add-ins/develop/dialog-api-in-office-add-ins

You can pass the URL of a UI-less page that immediately redirects to login.microsoftonline.com.

[binarykitchen]

@Rick-Kirkham thanks but that URL comes from this endpoint configuration default:

    authenticator
        .authenticate(OfficeHelpers.DefaultEndpoints.Microsoft, true)

What endpoint should I be using then? Using the office helper here.

[binarykitchen]

(and printing a warning would be great, saves time debugging)

[mlafleur]

The first page needs to be a page in your domain:

Office.context.ui.displayDialogAsync(
  "https://mysite/mydialogPage.html",
  { width: 1024, height: 768 }
)

From _that_ page (i.e. https://mysite/mydialogPage.html) you can automatically redirect them to https://login.microsoftonline.com/common/oauth2/v2.0/authorize. You cannot, however, open that URL directly.

[Rick-Kirkham]

@binarykitchen If the Office helpers are passing a URL to displayDialogAsync that is not on the add-in's domain, then that is an issue to raise in the Office Helpers repo: https://github.com/OfficeDev/office-js-helpers

[binarykitchen]

Right @mlafleur @Rick-Kirkham understand. Have raised this on Office Helpers repo.

And yeah, this did cost me lots of hours, a warning would have been very helpful.

[exextoc]

You can direct to different domains, if those domains are in your \ Also the displayDialogAsync function has a callback parameter, that should be called on error, and return you an AsyncResult with more information.

https://dev.office.com/reference/add-ins/shared/officeui.displaydialogasync

[binarykitchen]

Ok I am trying to use displayDialogAsync() directly instead of using Office JS helpers.

Now I can see a dialog coming up very very briefly like for 5ms then it closes asap. Why?

[exextoc]

It shouldn't, unless you call the close() off the dialog that you get in async result. Are you calling this from an ExecuteFunction or a ShowTaskpane add-in? If it is an ExecuteFunction are you calling event.completed(true), and complete the event before the dialog has been interacted with? If so event.completed() should not be called until you are done with everything that your add-in needs to do.

[binarykitchen]

I am calling it right after Office.initialise() whose index.html is loaded upon press of a button.

[exextoc]

In a ShowTaskpane or ExecuteFunction?

[binarykitchen]

ExecuteFunction

[binarykitchen]

and I am not having event.completed() anywhere in my code

[binarykitchen]

i also can see that when using i.E. getCallbackTokenAsync(), the code/html file closes before its callback for processing the token is run

why can't outlook leave it running until it's told to close everything?

[exextoc]

It should leave everything running, until event.completed() is called, so the fact that it isn't would be a bug if we can repro it. I created a small add-in that just pops a dialog to yahoo.com until the user clicks close on it. I've verified that the dialog stays open in both OWA and Desktop Outlook. Can you try it and see if it repros the problem for you? (https://pastebin.com/xbazxpqu). You may need to add www.yahoo.com to your app domains, and also change the name of the function that is called. (I am currently using uiLessFunctionMailRead1() )

[binarykitchen]

Thanks. Tried your example. Same problem here, dialog closes asap. Weird.

[binarykitchen]

Tried to disable all add-ons and incognito mode, yet dialog disappears asap.

[binarykitchen]

I can see for a flicker of a second that it's NOT showing the Yahoo page but an older index.html I used before. Cache issue?

[exextoc]

That sounds like the add-in is not being updated at all. I'm not sure why that would be. Could the manifest be uploaded to the wrong account? Perhaps none of your changes have been going through?

I asked around anyway, and both this issue and your GetToken issue sounds like an Event.completed() is terminating the add-in early. Something you can try is instead of using ExecuteAction, make a ShowTaskpane add-in and do your functions in Office.Initialize there and see if those are working. Then if that is working change it back to ExecuteAction. Note for ExecuteAction I recommend that you do your work in the event function. (My pastebin did NOT do that, as I was trying to emulate what you mentioned).

so your code should look something like:

Office.initialize = function (reason) 
{
    _Om = Office.context.mailbox;
    _Item = _Om.item;
}

function executeAction(event)
{
   globalEvent = event;

    // Do your work here. (For Async calls you need to wait for them to finish)

   globalEvent.completed(true); // As soon as this is called, everything will terminate, even if there are Async Calls still running
}

But a Taskpane instead of ExecuteAction will for certain keep the lifetime of the add-in open while the taskpane is open.

[binarykitchen]

Will try that soon. Meanwhile few more questions on that weird caching issue:

• Do I have to increment version number each time I change the manifest XML?
• Can I somehow open the remote manifest XML to inspect it?
• Is there a trick to clear cache when sideloading? I'm on latest Mac OS using latest Chrome here.

[binarykitchen]

For a flicker of a second I finally was able to see the contents of that weird dialog which should be showing Yahoo instead: it has two buttons [Allow] + [Ignore]. Why asking me for that?

[exextoc]

Sorry I had not realized that you were testing on MacOS Chrome. I will try to repro on a mac machine. On OWA (Outlook on Browsers), displaydialogAsync needs approval from the user to display a pop up. (native clients do not). When you were calling displayDialogAsync before were you not seeing that? If you do not want that permission dialog you need to set displayInIFrame option to be true.

to the caching issue, I am not sure how Mac Chrome caches files. Usually in Windows Chrome. Rebooting Chrome and re-logging in OWA refreshes the add-in. For certain, if you change the GUID or Manifest, then reupload the manifest to the Exchange Server, it should be recognized as a new add-in. You may need to relogin to re fetch apps.

[binarykitchen]

Ok, good, with your above executeAction() suggestion I finally see the yahoo page on a separate window instance without completing too early. I think this should be documented.

From there I could fix my code backwards and have everything work fine, yay! Finally, phew!

Thanks so much for your awesome help!