Как динамически обновить диалоговое окно, отображаемое displayDialogAsync? - PullRequest
Новая
       31

Как динамически обновить диалоговое окно, отображаемое displayDialogAsync?

0 голосов
/ 13 ноября 2018

Мой код содержит следующую разметку 

<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>

Я использую Office.context.ui.displayDialogAsync для отображения HTML-страницы.

То, что я хотел бы сделать, это установить текст с помощью jQuery. 

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

Я уже знаю, как извлечь мои данные из нашей базы данных с помощью веб-службы.

Вопрос в том, может ли диалоговое окно, отображаемое displayDialogAsync , динамически обновляться? Если так, то куда пойдет код? (например, до или после вызова displayDialogAsync, или, возможно, внутри функции инициализации (документ или Office)

1 Ответ

0 голосов
/ 14 ноября 2018

На случай, если у кого-то возникнет такая же проблема, как и у меня. Вот как выглядит мой последний пример кода. 

<!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>

Приведенный выше Html вызывается из этого файла Javascript, который я получил из примера GitHub Пример диалога

openDialog показывает одно использование 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);
}
...