Cannot send information to dialog box in Outlook add-in

Question

I cannot send information to my dialogbox in my Outlook add-in. Here is the Javascript code in the parent:

 var url2 = window.location.origin+'/dialogbox.html'
 var dialog
 Office.context.ui.displayDialogAsync(url2, {height: 50, width: 50},
           function (asyncResult) {
               dialog.messageChild('hello from the parent', {targetOrigin: "*" })     
           });

Which completes successfully to the messageChild command.

The Javascript in the child dialog box is:

Office.onReady().then(function() {
         Office.context.ui.addHandlerAsync(
             Office.EventType.DialogParentMessageReceived,
             onMessageFromParent);
         });
        
function onMessageFromParent(arg){
     console.log(arg.message)
     }

However, the message 'hello from the parent' is not printed in the console.

Instead I get the following in the console twice:

Tracking Prevention blocked access to storage for https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js. [https://localhost:3000/commands.html?_host_Info=Outlook$Win32$16.02$en-US$$$$0]

What am I doing wrong? How can I pass the message to the dialog box?

Answer 1

When you call the Office dialog API to open a dialog box, a Dialog object is returned. You will need to set the dialog object from the asyncResult on your local dialog variable. More information about messageChild can be found in the documentation here .

var dialog;
Office.context.ui.displayDialogAsync('https://myDomain/myDialog.html',
    function (asyncResult) {
        dialog = asyncResult.value;
        dialog.messageChild(...);
    }
);