What follows is the HTML file that is passed to displayDialogAsync
<!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.min.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) {
write();
}
function write() {
// If I uncomment the line below, the text in the dialog box will NOT be updated
//var email = Office.context.mailbox.item.sender.emailAddress;
$("#firstName").text("John");
$("#lastName").text("Doe");
$("#gender").text("Male");
$("#knownas").text("John Doe");
$("#citizenship").text("Antarctica");
$("#language").text("Esperanto");
}
</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 class="ms-Grid-col"><span id="gender"></span></div>
</div>
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="knownas"></span></div>
<div class="ms-Grid-col"><span id="citizenship"></span></div>
<div class="ms-Grid-col"><span id="language"></span></div>
</div>
</div>
</body>
</html>Whenever I try to use anything from the Office JavaScript API I notice that my Dialog Box shows up blank.
In the sample, all I'm doing is assigning a value to a variable and the rest of the code stops working. No error messages appear on the console.
This is expected behavior. I found the following in the documentation for the dialog: