CODEWITHSUNDEEP
office-jsoffice-addins
MAOg0espr0
MAOg0espr0

Reputation: 25

Office-js Open a New Window from the Ribbon/FunctionFile.js

I am having trouble opening a window from the ribbon. I declared my button, which onclick triggers a function declared in the function-file.js. Works all fine. However, it won't exectute window.open. I can understand there might be some CORS-Problems. So I tested several things. First I declared the Websites URL in the

<AppDomains><AppDomain>Website-URL</AppDomain></AppDomains>

Didn't change anything. So I tried to debug localy. And it seems to work when I run the Add-in on localhost and call the Website that is hosted on the webserver (where CORS problems might occure, so this doesn't seem to be the problem). So I did the following:

var winHandle = window.open("https://website");
if (winHandle == null) {
    console.log('Window was blocked');
    Office.context.ui.displayDialogAsync('https://website/openWebsite.html');
}

The above code uses the displayDialog-api in case it can't open the window, which opens a site that then provides a button to trigger window.open. Because if I just set the new location it will give me a pop-up warning. And trying this with the VS-Debug functionality is working. It is not opening the window, but it opens the dialog and so I can finally open the window from the dialog. However, when the Manifest.xml is sideloaded it does not work.

Any suggestions to get window.open working from the function-file or at least the displayDialog?

EDITED: As the second answer says: it is correct, the first page must indeed be in the same origin. However, what I encountered was a subdomain call, which the sideloaded Add-In could not perform. While in Visual Studios debug mode he only gave me a CORS warning and loaded it anyway.

Original Oh and btw the dialog-api documentation says that displayDialog should not leave the domain in the first call. But it seems to be no problem when i directly call

Office.context.ui.displayDialogAsync('https://someOtherDomain/website');

I guess you just need to specify the domain in the AppDomains.

Thanks for your help.

Upvotes: 0

Views: 1140

Answers (2)

lgaud
lgaud

Reputation: 2479

Per the dialog API docs, the first page you open in the dialog must be in the same domain. The same paragraph of docs also explicitly mentions calling from a function file.

  • The URL uses the HTTPS protocol. This is mandatory for all pages loaded in a dialog box, not just the first page loaded.
  • The domain is the same as the domain of the host page, which can be the page in a task pane or the function file of an add-in command. This is required: the page, controller method, or other resource that is passed to the displayDialogAsync method must be in the same domain as the host page.

After the first page (or other resource) is loaded, a user can go to any website (or other resource) that uses HTTPS. You can also design the first page to immediately redirect to another site.

I had really wonky results trying to load a dialog from a function until I loaded Office.js and called Initialize in the dialog page (this is documented as giving you the ability to send messages back to the parent, but is not mentioned as required).

Upvotes: 1

Marc LaFleur
Marc LaFleur

Reputation: 33114

Functions are intended to operate without a UI. If you need to display information or interact with the user, you'll want to use a ShowTaskpane action. You can point this action to any page in your app. Typically for this scenario we would create a page that executes the on load and then displays the results.

Upvotes: 1

Related Questions