How to properly open a Dialog using office.js and DialogApi?

Question

How to properly open a Dialog using office.js and DialogApi?

Jose Manuel Febrer 0

On a freshly created taskpane add-in using yeoman generator for outlook with react, I'm trying to open a dialog for authentication using DialogApi but only an empty webview2 appears.

For testing purposes, I'll only try to open a simple html file on this example.

I changed this from the template:

Mailbox MinVersion to 1.4 in the manifest
Created a "test.html" file in src
Added a HtmlWebpackPlugin entry for text.html in wepack.config.js and confirmed I can access test.html though chrome and edge at 'https://localhost:3000/test.html'.
Updated App.tsx to open a dialog with a button.

test.html:

<!DOCTYPE html>
<html lang="en" data-framework="typescript">
<head>
  <meta charset="UTF-8" />
  <title>Test Dialog</title>
  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
  <script>
    Office.onReady(() => {
      console.log("Dialog page loaded!");
    });
  </script>
</head>
<body>
  <p>test</p>
</body>
</html>

App.tsx

import * as React from 'react';
import Header from './Header';
import HeroList, { HeroListItem } from './HeroList';
import TextInsertion from './TextInsertion';
import { makeStyles } from '@fluentui/react-components';
import { Ribbon24Regular, LockOpen24Regular, DesignIdeas24Regular } from '@fluentui/react-icons';
import { insertText } from '../taskpane';

interface AppProps {
    title: string;
}

const useStyles = makeStyles({
    root: {
        minHeight: '100vh',
    },
});

const App: React.FC<AppProps> = (props: AppProps) => {
    const styles = useStyles();
    // The list items are static and won't change at runtime,
    // so this should be an ordinary const, not a part of state.
    const listItems: HeroListItem[] = [
        {
            icon: <Ribbon24Regular />,
            primaryText: 'Achieve more with Office integration',
        },
        {
            icon: <LockOpen24Regular />,
            primaryText: 'Unlock features and functionality',
        },
        {
            icon: <DesignIdeas24Regular />,
            primaryText: 'Create and visualize like a pro',
        },
    ];

    function openDialog(): void {
        Office.context.ui.displayDialogAsync(
            'https://localhost:3000/test.html',
            { height: 50, width: 30 },
            (asyncResult) => {
                if (asyncResult.status === Office.AsyncResultStatus.Failed) {
                    console.error('Dialog failed to open:', asyncResult.error);
                } else {
                    const dialog = asyncResult.value;
                    console.log('Dialog opened at:', dialog);
                    dialog.addEventHandler(Office.EventType.DialogMessageReceived, (arg) =>
                        console.log('Got message from dialog:', arg)
                    );
                }
            }
        );
    }

    return (
        <div className={styles.root}>
            <Header logo="assets/logo-filled.png" title={props.title} message="Welcome" />
            <HeroList message="Discover what this add-in can do for you today!" items={listItems} />
            <TextInsertion insertText={insertText} />
            <button onClick={openDialog}>open dialog</button>
        </div>
    );
};

export default App;

Using Office.context.requirements.isSetSupported("DialogApi", "1.2") returns true.
The open dialog button opens an empty webview2, which inspecting the add-in I can see in console the "Dialog opened at" log entry but it doesn't load anything, it's just an empty white space that I can't even right click inspect or F12.
If I open "edge://inspect/", I can see the Dialog page appearing completely empty with "about:blank" title.
What may I be doing wrong?

2 answers

Your answer

Answer 1

Doaa Ali Hamdan AL-Jarwani 255

Add this to your manifest:

<AppDomain>https://localhost:3000</AppDomain>

</AppDomains>

Open https://localhost:3000/test.html in your browser:

You should see “test”
- And in the console: "Dialog page loaded!"
1. 1. In webpack.config.js, use:

new HtmlWebpackPlugin({

filename: 'test.html',

template: './src/test.html',

inject: false,

chunks: []

});

Try using 127.0.0.1 instead of localhost:

'https://127.0.0.1:3000/test.html'

If still blank:

Use edge://inspect and check for console errors in the dialog.

Jose Manuel Febrer 0 Reputation points

2025-06-17T21:03:10.77+00:00

Hi, Thank you so much for the quick answer!
I forgot to mention that I added the localhost AppDomain line. Now I also added the 127.0.0.1 one and bumped the version to have an updated manifest.

I was missing the inject line in the webpack.config.js so I added it.

The problem is still the same after switching to 127.0.0.1:

And this is how my edge://inspect looks, I don't see any errors as it shows just fully empty, as if it's not even trying to load the test.html site:

Answer 2

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more

Share via

How to properly open a Dialog using office.js and DialogApi?

2 answers

Your answer