1

this is a basic question:

I have an angular 2 app, and I'm trying to use Office's dialog API. Basically, I have a route https://domain/success that I want to open up in the dialog.

More specifically, here is what I'm trying

I am at the route https://domain/splash, which renders the splash component.

In splashComponent.ts, I call this.microsoftService.doStuff

In microsoftService, doStuff method, I call

Office.context.ui.displayDialogAsync('https://domain/success');

This is supposed to render the success component.

However, I see the splash component. The url of the dialog is

https://domain/success?_host_info=blahblah|isDialog|#/splash

Why is this the case? And how do i render the success component?

Asool
  • 13,031
  • 7
  • 35
  • 49
  • The url provided for the displayDialogAsync API will have query parameters appended to it in order to properly load the new window - appropriate dimensions, information to communicate back to the Add-in that opened it, and so on. The ordering of query (?) parameters and fragment (#) parameters in the url you've listed above is correct [according to the URI spec](https://tools.ietf.org/html/std66#section-3). Can you please clarify what is the problem? – Outlook Add-ins Team - MSFT Oct 17 '18 at 00:20
  • I am using Angular 2. In angular 2, I have two routes: https://domain/success (rendering success component) , https://domain/splash (rendering splash component). In my splash component, I have a button x. Clicking x triggers the code: this.microsoftService.doStuff(). In do stuff, I want to open a dialog showing https://domain/success. Office.context.ui.displayDialogAsync(https://domain/success, this.handleDialog); . When I open the dialog, Instead of seeing the success component, I see the splash component, and I see the url being: 'https://domain/success?_host_info=...|isDialog|#/splash' – Asool Oct 17 '18 at 14:30
  • I'm thinking there's an error... because on the console I see outlook-web-16.01.debug.js:4587 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://outlook.office.com') does not match the recipient window's origin ('https://mydomain'). In the manifest, i do hae my dommain under AppDomains – Asool Oct 17 '18 at 15:24
  • I have the same problem now – SerjG Oct 18 '18 at 13:38
  • https://github.com/OfficeDev/Office-Add-in-Auth0/issues/4 – SerjG Oct 18 '18 at 14:03
  • Similar: https://stackoverflow.com/questions/49654404/failed-to-execute-postmessage-on-domwindow-the-target-origin-provided-htt https://stackoverflow.com/questions/45092744/how-to-specify-exact-version-of-office-js-used – SerjG Oct 18 '18 at 14:05
  • @Asool do you have any luck with fixing this issue? – SerjG Oct 19 '18 at 06:54
  • @Sergey no. We ended up using a completely different approach :( – Asool Oct 19 '18 at 19:45
  • @Asool could you please share it with me? I have to open a Dialog in order to run the 3rd party IdentityServer login process (I can't do it in the iFrame because of the CSP). So I have faced this issue which is blocking me from the further implementation – SerjG Oct 20 '18 at 13:47

1 Answers1

0

This is more partial diagnosis than solution, but it's a bit too involved for a comment.

Regardless of whether Outlook adds the query parameter, your router is adding "#/splash" to the end of the URL and that is why it is opening splash. I think the problem is in the routing configuration and routing strategy.

Related to this is the fact that the Office dialog opens in a completely separate browser instance with a completely separate JavaScript engine instance and execution context. So a complete second copy of your web application is opening in the dialog. This means that the root routing is going to be triggered.

If you are determined to use a route in your web app in the dialog, then you need some kind of conditional logic where the app tests whether it is being opened in the dialog and routes accordingly.

That said, I recommend that when using the Office Dialog API in an Angular-based add-in, you deviate from the "single page" principle, and just create a success.html page that you host in your domain. This I much simpler and less error prone.

By the way, you shouldn't need to put your own add-in's domain in the <AppsDomains> in the manifest. The add-in trusts itself and anything in its own domain.

For more information, see Use the Office Dialog API with single-page applications and client-side routing, and the rest of that article too.

Rick Kirkham
  • 9,038
  • 1
  • 14
  • 32
  • Hi Rick, thank you. I followed your method, and I'm getting the issue: ailed to execute 'postMessage' on 'DOMWindow': The target origin provided ('outlook.office.com') does not match the recipient window's origin ('mydomain'). Any ideas on how to solve this problem? – Asool Oct 18 '18 at 20:55
  • @Asool This sounds like a different problem from the original. Please open a separate StackOverflow question (after checking first to see if anyone else has already raised this questions). – Rick Kirkham Oct 18 '18 at 22:53