CODEWITHSUNDEEP
office-addinsoutlook-web-addinsoffice-ui-fabric
ezG
ezG

Reputation: 421

Office UI Fabric JS Dialog Component

I'm currently using Office-UI-Fabric-JS to build a UI for an Outlook Web Add-In. I will eventually switch over to React.

I've gone over the examples and what I'm not clear about is from where will the HTML for the Dialog box reside?

Calling the Fabric Dialog's "open" API from a TaskPane centers the Dialog within the TaskPane. I would like it centered on the screen.

However, I'm not sure where the HTML for the dialog should go?

Do I put it in the non-UI Html file ("FunctionFile.html"), then use div tags?

Do I create an entirely separate HTML page, then load that HTML using Javascript (window.location = "mydialog.html")?

HERE'S A SAMPLE (Where would this HTML go?)

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

Upvotes: 1

Views: 2205

Answers (1)

user7823505
user7823505

Reputation:

To open a dialog from web addin use the displayDialogAsync API provided by Office.js. Some additional documentation can be found here:

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

Upvotes: 2

Related Questions