How do I dyamically update the dialog displayed by displayDialogAsync?

Question

How do I dyamically update the dialog displayed by displayDialogAsync?

564 Views Asked by ezG At 20 October 2024 at 20:13

My code contains the following markup

<div class="ms-Grid">
  <div class="ms-Grid-row">
    <div class="ms-Grid-col"><span id="firstName" class="ms-fontSize-l"></span></div>
    <div class="ms-Grid-col"><span id="lastName" class="ms-fontSize-l"></span></div>
  </div>
</div>

I'm using Office.context.ui.displayDialogAsync to display the HTML page.

What I would like to do is set the text with jQuery.

$('#firstName').text("a-name")

I already know how to retrieve my data from our database using a Web Service.

The question is, can the dialog box displayed by displayDialogAsync be updated dynamically? If so, where would the code go? (e.g. before or after the call to displayDialogAsync, or perhaps inside of an initialize function (document, or Office)

Original Q&A

There are 1 best solutions below

**ezG** · Accepted Answer

In case anyone is having the same problem I did. Here is what my final sample code looks like.

<!DOCTYPE html>
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4  See LICENSE in the project root for license information -->
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
    <script type="text/javascript" src="Scripts/jquery-3.3.1.js"></script>

    <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
    <link rel="stylesheet" href="Content/fabric.min.css">
    <link rel="stylesheet" href="Content/fabric.components.min.css">
    <script>
        Office.initialize = function (reason) {
            // This JavaScript may be run inline, as it is here
            // Or it may run from a separate JavaScript file.
            //

            $("#firstName").text("John");
            $("#lastName").text("Doe");
           
        }

    </script>
</head>
<body>

    <div class="ms-Gridc ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">
        <div class="ms-Grid-row">
            <div class="ms-Grid-col"><span id="firstName" ></span></div>
            <div class="ms-Grid-col"><span id="lastName"></span></div>
        </div>
    </div>
</body>
</html>

The above Html is called from this Javascript file which I got from a GitHub Sample Dialog Sample

openDialog shows one use of displayDialogAsync.

/*Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 
4  See LICENSE in the project root for license information */

var dialog;

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:
        showNotification("Domain is not trusted");
        break;
      case 12005:
        showNotification("HTTPS is required");
        break;
      case 12007:
        showNotification("A dialog is already opened.");
        break;
      default:
        showNotification(asyncResult.error.message);
        break;
    }
  } else {
    dialog = asyncResult.value;
    /*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
    dialog.addEventHandler(Office.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(Office.EventType.DialogEventReceived, eventHandler);
  }
}


function messageHandler(arg) {
  dialog.close();
  showNotification(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:
      showNotification("Cannot load URL, no such page or bad URL syntax.");
      break;
    case 12003:
      showNotification("HTTPS is required.");
      break;
    case 12006:
      // The dialog was closed, typically because the user the pressed X button.
      showNotification("Dialog closed by user");
      break;
    default:
      showNotification("Undefined error in dialog window");
      break;
  }
}

function openDialog() {
   // Code to launch Dialog
  Office.context.ui.displayDialogAsync(window.location.origin + "/AsyncDialog.html", {
    height: 50,
    width: 50
  }, dialogCallback);
}

How do I dyamically update the dialog displayed by displayDialogAsync?

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in OFFICE-JS

Related Questions in OFFICE-UI-FABRIC

Trending Questions

Popular # Hahtags

Popular Questions