How to open Dialog in PC addin office js

Question

I am trying to open a dialogue from the ribbon button. I have added a ribbon button triggerDialog to the PrimaryCommandSurface which will execute a function in function-file to open a dialogue

Manifest File:

    <DesktopFormFactor>
  <FunctionFile resid="Commands.Url" />
  <ExtensionPoint xsi:type="PrimaryCommandSurface">
    <!-- Information about this extension point. -->
    <CustomTab id="CustomTab">
      <Group id="Group1">
        <Control>
          <!-- Information about this Control. -->
          <Action xsi:type="ExecuteFunction">
            <FunctionName>triggerDialog</FunctionName>
          </Action>
        </Control>
      </Group>
    </CustomTab>
  </ExtensionPoint>

  <!-- You can define more than one ExtensionPoint element as needed. -->
</DesktopFormFactor>
...

<Resources>
  <bt:Urls>
    <bt:Url id="Commands.Url" DefaultValue="https://localhost:8080/commands.html" />
  </bt:Urls>

  <!-- Define other resources as needed. -->
</Resources>

Following is the function file defined.

// Initialize the Office Add-in.
Office.onReady(() => {
  // If needed, Office.js is ready to be called
});

// The command function.
async function triggerDialog(event) {

    Store.saveLocal('dialogData', 'About');
    Office.context.ui.displayDialogAsync(
        'https://localhost:8080/?tab=dialog',
        {
            height: 60,
            width: 50,
            promptBeforeOpen: true,
            displayInIframe: hostType === HostType.Office_Online,
        },
        (asyncResult) => {
            if (asyncResult.status === Office.AsyncResultStatus.Failed) {
                console.log(asyncResult.error.code + ': ' + asyncResult.error.message);
            } else {
                dialog = asyncResult.value;
                dialog.addEventHandler(Office.EventType.DialogMessageReceived, receiveMessageFromDialog);
            }
        }
    );
    event.completed();
}

// You must register the function with the following line.
Office.actions.associate("triggerDialog", triggerDialog);

Dialog API is works on Office Online[OneDrive document file] and it is not working on PC add-in[word application] via ribbon element

What I am doing wrong here?

My Word add-in project is SPA using React 18.x

for reference purpose attach screenshot :

Dialog.html

Answer 1

The displayDialogAsync method accepts the initial full HTTPS URL that opens in the dialog. Relative URLs must not be used. See Use the Office dialog API in Office Add-ins for more information.