search

OfficeDev / office-js

A repo and NPM package for Office.js, corresponding to a copy of what gets published to the official "evergreen" Office.js CDN, at https://appsforoffice.microsoft.com/lib/1/hosted/office.js.
https://learn.microsoft.com/javascript/api/overview
Other
667 stars 94 forks source link

Excel Addin transparent Dialog #4213

Open Edward-Zhou opened 6 months ago

Edward-Zhou commented 6 months ago

I am implementing a loading dialog for Excel addin to let user know its in process, need to wait.

I have tried

Office.context.ui.displayDialogAsync("https://localhost:3000/#/dialog/loading",{
                width: 100,
                height: 100
            }, function (asyncResult: Office.AsyncResult<Office.Dialog>): void {

              })

But, it will total cover the excel, and I could not see any content under dialog.

While testing with Excel Online Copy link -> To Sheet, I am able to see below behavior.

enter image description here

How to achieve the same behavior in Excel addin?

Rick-Kirkham commented 6 months ago

Try setting the background of the dialog page to transparent. There's a lot of information about that here: https://stackoverflow.com/questions/18189201/is-there-a-color-code-for-transparent-in-html

Edward-Zhou commented 6 months ago

@Rick-Kirkham I think the transparent is total different. For Excel Addin Dialog by Office.context.ui.displayDialogAsync, it will show page in a separate browser instance, transparent will only make the page transparent, it will not be able to see things under the dialog browser.