3

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)

Durga
  • 15,263
  • 2
  • 28
  • 52
ezG
  • 391
  • 1
  • 17
  • 1
    The page in the dialog can be updated just like any other web page. You create your update logic in JavaScript and load the JavaScript with a ` – Rick Kirkham Nov 13 '18 at 19:06
  • 1
    @RickKirkham: I tried that. I placed the code in section of the Html page that contained the markup for the Dialog. I got no errors, but neither did the dialogbox get updated. I will create a small sample code and post. – ezG Nov 13 '18 at 19:39
  • 2
    @RickKirkham I was able to get it going thanks to your suggestion. I had my Javascript in the wrong place. I revisited some sample code I found on GitHub [Office UI Dialog Sample](https://github.com/OfficeDev/Office-Add-in-Dialog-API-Simple-Example) – ezG Nov 14 '18 at 14:51

1 Answers1

2

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);
}
ezG
  • 391
  • 1
  • 17