2

I have an application by mean-stack that hosts a website and an Excel add-in. html5 is enabled, and it has 

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js"></script>

In the Excel add-in, I have a button that opens a page in the website by Dialog API:

$scope.openDialog = function () {
  Office.context.ui.displayDialogAsync("https://localhost:3000/preview/tmp/6wr-4PqdBrYQwjp3AAAD", {}, function () {})   
}

When I click on this button in Excel Online in Chrome, it opens a dialog box with the following url (note that # and several %2F are systematically appended), but it does not prevent from well displaying the page.

https://localhost:3000/preview/tmp/6wr-4PqdBrYQwjp3AAAD?_host_Info=excel|web|16.00|en-us|b6f37f78-e519-7d03-0069-b9c4317a362c|isDialog#%2Fpreview%2Ftmp%2F6wr-4PqdBrYQwjp3AAAD%3F_host_Info=excel%7Cweb%7C16.00%7Cen-us%7Cb6f37f78-e519-7d03-0069-b9c4317a362c%7CisDialog

However, when I click on this button in Excel Online in Firefox, the url changes quickly to the following url, which turns out to display the homepage of the website:

https://localhost:3000/home#%2Fpreview%2Ftmp%2F6wr-4PqdBrYQwjp3AAAD%3F_host_Info=excel%7Cweb%7C16.00%7Cen-gb%7C919fff78-e51f-dc20-0c3c-871b7d0ec25d%7CisDialog

So my questions are:

1) Why does Office.context.ui.displayDialogAsync add systematically # and %2F to the url of my website? Is it possible to prevent this from happening?

2) Is it possible to make a url (regardless of # and %2F) that Firefox accept?

Edit 1: It seems that if I don't use html5-history-api, it will work. So does not know how to disable html5-history-api for that displayDialogAsync? (The reason why I have to use html5-history-api after office.js is here.)

Dirk Vollmar
  • 172,527
  • 53
  • 255
  • 316
SoftTimur
  • 5,630
  • 38
  • 140
  • 292

1 Answers1

4

It is not displayDialogAsync that is doing this. It is a frequent issue with Angular routing and Angular location strategy. Search for "angular app is adding hash to my urls" and you will find a lot of information about it and solutions.

Rick Kirkham
  • 9,038
  • 1
  • 14
  • 32
  • I can open well `https://localhost:3000/preview/tmp/6wr-4PqdBrYQwjp3AAAD` in a browser, it is `displayDialogAsync` that adds hash... – SoftTimur Sep 16 '17 at 02:07
  • I don't agree. This is no code in the Office.js that adds hash values to the URL. But there is in Angular when you are using certain location strategies. Please do the search that I suggested. You will find that it does not happen on every URL. It is a complex phenomenon. – Rick Kirkham Sep 16 '17 at 23:29
  • I edited the OP yesterday... My tests show that if I remove `html5-history-api`, hash will not be added, so there is a conflict between `displayDialogAsync` and `html5-history-api`. But I have to use `html5-history-api` for the whole application because of [this](https://stackoverflow.com/questions/42642863/office-js-nullifies-browser-history-functions-breaking-history-usage/42703406#42703406). – SoftTimur Sep 17 '17 at 05:10