none
displayDialogAsync + messageParent not working RRS feed

  • Question

  • I'm using the Office Javascript API for my Outlook addin. I am running outlook-web-16.01 (https://outlook.live.com/owa/).

    I can get the dialog popup by calling UI.displayDialogAsync. But calling UI.messageParent  DOES NOT have DialogMessageReceived triggered on the parent page (I am running both parent and dialog on the same domain). But manually closing the dilaog does get DialogEventReceived invoked on the parent and gets a 12006.

    I also noticed that the dialog has this error on the JS console right after loading, but not sure if it is related: "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://outlook.live.com') does not match the recipient window's origin ('MyOrigin')."

    I am simply doing the OfficeDev example on GitHub (https://github.com/OfficeDev/Office-Add-in-Dialog-API-Simple-Example/tree/master/SimpleDialogSampleWeb).

    My code to launch the dialog on the parent page copied from here (https://github.com/OfficeDev/Office-Add-in-Dialog-API-Simple-Example/blob/master/SimpleDialogSampleWeb/DialogHelper.js),

    function dialogCallback(asyncResult) {
      if (asyncResult.status == "failed") {

          // In addition to general system errors, there are 3 specific errors for 
          // displayDialogAsync that you can handle individually.
          switch (asyncResult.error.code) {
              case 12004:
                  console.log("Domain is not trusted");
                  break;
              case 12005:
                  console.log("HTTPS is required");
                  break;
              case 12007:
                  console.log("A dialog is already opened.");
                  break;
              default:
                  console.log(asyncResult.error.message);
                  break;
          }
      }
      else {
          dialog = asyncResult.value;
          /*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
          dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogMessageReceived, messageHandler);

          /*Events are sent by the platform in response to user actions or errors. For example, the dialog is closed via the 'x' button*/
          dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogEventReceived, eventHandler);
          
          console.log(`handler registered`);
      }
    }

    function messageHandler(arg) {
        console.log(`handler called`);
        dialog.close();
        console.log(arg.message);
    }

    function eventHandler(arg) {

        // In addition to general system errors, there are 2 specific errors 
        // and one event that you can handle individually.
        switch (arg.error) {
            case 12002:
                console.log("Cannot load URL, no such page or bad URL syntax.");
                break;
            case 12003:
                console.log("HTTPS is required.");
                break;
            case 12006:
                // The dialog was closed, typically because the user the pressed X button.
                console.log("Dialog closed by user");
                break;
            default:
                console.log("Undefined error in dialog window");
                break;
        }
    }

      var dialogUrl = 'MyOrigin/outlook/function-file/dialog.html';
      Office.context.ui.displayDialogAsync(dialogUrl, { height: 50, width: 50 }, dialogCallback);
    And for the dilaog html, I am doing exactly the same of this code (https://github.com/OfficeDev/Office-Add-in-Dialog-API-Simple-Example/blob/master/SimpleDialogSampleWeb/Dialog.html).

    Need some helps. I can provide more information if needed.

    Many thanks!


    • Edited by CodingFanSteve Tuesday, March 27, 2018 5:11 PM Make description more concise
    Tuesday, March 27, 2018 4:45 PM

All replies

  • I'm using the Office Javascript API for my Outlook addin. I am running web outlook (https://outlook.live.com/owa/).

    I am calling UI.displayDialogAsync (https://dev.office.com/reference/add-ins/shared/officeui.displaydialogasync) from a addin on the calendar appointment (an AppointmentOrganizerCommandSurface type extension) to open up a dialog. And calling UI.messageParent (https://dev.office.com/reference/add-ins/shared/officeui.messageparent) on the dialog page. My function-file.html and the dialog.html are hosted on the same domain. 

    But I cannot get the handler of Microsoft.Office.WebExtension.EventType.DialogMessageReceived on the host page triggered when UI.displayDisalogAsync is called on the dialog. However, the handler of Microsoft.Office.WebExtension.EventType.DialogEventReceived gets called when I manually close the page and the handler gets a 12006.

    Futhermore, the dialog has this error on the JS console right after loading:

    Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://outlook.live.com') does not match the recipient window's origin ('MyOrigin').

    Following is my code, I simply follow the OfficeDev example on GitHub (https://github.com/OfficeDev/Office-Add-in-Dialog-API-Simple-Example/tree/master/SimpleDialogSampleWeb):

    Here is the code of launching the dialog that I put in function-file.js:

    function dialogCallback(asyncResult) {
      if (asyncResult.status == "failed") {
    
          // In addition to general system errors, there are 3 specific errors for 
          // displayDialogAsync that you can handle individually.
          switch (asyncResult.error.code) {
              case 12004:
                  console.log("Domain is not trusted");
                  break;
              case 12005:
                  console.log("HTTPS is required");
                  break;
              case 12007:
                  console.log("A dialog is already opened.");
                  break;
              default:
                  console.log(asyncResult.error.message);
                  break;
          }
      }
      else {
          dialog = asyncResult.value;
          /*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
          dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogMessageReceived, messageHandler);
    
          /*Events are sent by the platform in response to user actions or errors. For example, the dialog is closed via the 'x' button*/
          dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogEventReceived, eventHandler);
          
          console.log(`handler registered`);
      }
    }
    
    function messageHandler(arg) {
        console.log(`handler called`);
        dialog.close();
        console.log(arg.message);
    }
    
    function eventHandler(arg) {
    
        // In addition to general system errors, there are 2 specific errors 
        // and one event that you can handle individually.
        switch (arg.error) {
            case 12002:
                console.log("Cannot load URL, no such page or bad URL syntax.");
                break;
            case 12003:
                console.log("HTTPS is required.");
                break;
            case 12006:
                // The dialog was closed, typically because the user the pressed X button.
                console.log("Dialog closed by user");
                break;
            default:
                console.log("Undefined error in dialog window");
                break;
        }
    }
    
      var dialogUrl = 'MyOrigin/outlook/function-file/dialog.html';
      Office.context.ui.displayDialogAsync(dialogUrl, { height: 50, width: 50 }, dialogCallback);

    And here is my dialog.html,

    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
        <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.debug.js"></script>
        <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js"></script>
    
        <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
        <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
        <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">
        <script>
            Office.initialize = function () {
                $('#button1').click(one);
                $('#button2').click(two);
            };
            function one()
            {
                Office.context.ui.messageParent("Picked 1");
                console.log(`Picked 1 clicked`);
            }
            function two() {
                Office.context.ui.messageParent("Picked 2");
                console.log(`Picked 2 clicked`);
            }
            
        </script>
    </head>
    <body>
        <p class="ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">Pick a number</p>
        <button class="ms-Button ms-Button--primary" id="button1">
            <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
            <span class="ms-Button-label" id="button1-text">1</span>
            <span class="ms-Button-description" id="button1-desc">Number 1</span>
        </button>
        <button class="ms-Button ms-Button--primary" id="button2">
            <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
            <span class="ms-Button-label" id="button2-text">2</span>
            <span class="ms-Button-description" id="button2-desc">Number 2</span>
        </button>
    </body>
    </html>

    I see there is a similar question asked here (https://social.msdn.microsoft.com/Forums/office/en-US/72459856-9e84-4cc0-95ec-61e3e76b0e97/displaydialogasync-messageparent-not-working-in-outlook-web?forum=outlookdev), but the breaking API change which is the caused of that post is not my problem.

    Please help! I can provide more information if needed.


    Tuesday, March 27, 2018 6:04 AM
  • Hi CodingFanSteve,

    I try to find some information on this issue.

    I find that one other user was having this kind of issue.

    He find that there was some chnage in API.

    Below is the chnage in code he made to solve the issue.

    Office.context.ui.displayDialogAsync(fullUrl, { 
        height: 55, 
        width: 25, 
        displayInIframe: true /* replaced requireHTTPS */
    }, function (result) {
        dialog = result.value;
        dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogMessageReceived, processMessage);
    });

    Reference:

    displayDialogAsync + messageParent not working in Outlook web

    You can try to make a chnage like code above to solve the issue.

    Regards

    Deepak


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, March 28, 2018 7:58 AM
    Moderator
  • Hi CodingFanSteve,

    I find that you create an another thread for same issue in which you had mentioned that you already visit that other thread that i had shared in my other reply.

    I suggest you to provide your sample project.

    We will try to make a test with your project and try to check the issue.

    Regards

    Deepak


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, March 28, 2018 8:42 AM
    Moderator