办公室UI面料JS对话框组件

Question

我目前使用Office的用户界面 - 面料 - JS打造为Outlook web插件的UI。我最终将切换到反应。

我已经过例子，什么我不清楚是从哪儿将为对话框中的HTML驻留？

调用面料对话框的“打开”从TaskPane API中心的TaskPane内的对话。我想它在屏幕上居中。

不过，我不知道在哪里的对话框中的HTML应该去？

难道我把它放在非UI的HTML文件（“FunctionFile.html”），然后使用div标签？

如何建立一个完全独立的HTML页面，然后使用Javascript（window.location的=“mydialog.html”）加载HTML？

下面是一个示例（如果将这个HTML去？）

    <div class="docs-DialogExample-default">
      <div class="ms-Dialog">
        <div class="ms-Dialog-title">All emails together</div>
          <div class="ms-Dialog-content">
            <p class="ms-Dialog-subText">Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.</p>
          <div class="ms-CheckBox">
         <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
        <label role="checkbox" ...>
          <span class="ms-Label">Option1</span> 
        </label>
      </div>
      <div class="ms-CheckBox">
        <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
        <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-       checked="false" name="checkboxa">
          <span class="ms-Label">Option2</span> 
        </label>
      </div>
    </div>
    <div class="ms-Dialog-actions">
      <button class="ms-Button ms-Dialog-action ms-Button--primary">
        <span class="ms-Button-label">Save</span> 
      </button>
      <button class="ms-Button ms-Dialog-action">
        <span class="ms-Button-label">Cancel</span> 
      </button>
    </div>
  </div>
    <button class="ms-Button docs-DialogExample-button">Open Dialog</button>
    <label class="docs-DialogExample-label"></label>
  </div>

Answer 1

来自Web插件打开一个对话框，使用由Office.js提供的displayDialogAsync API。一些附加的文档可以在这里找到：

https://docs.microsoft.com/en-us/office/dev/add-ins/develop/dialog-api-in-office-add-ins