Lernprogramm: Erstellen eines Outlook-Add-Ins zum Verfassen von Nachrichten

  • Artikel

In diesem Lernprogramm erfahren Sie, wie Sie ein Outlook-Add-In erstellen, das im Modus zum Verfassen von Nachrichten verwendet werden kann, um Inhalte in den Text einer Nachricht einzufügen.

In diesem Lernprogramm wird Folgendes vermittelt:

  • Erstellen eines Outlook-Add-In-Projekts
  • Definieren von Schaltflächen, die im Fenster zum Verfassen von Nachrichten angezeigt werden
  • Implementieren eines Eindrucks beim ersten Ausführen, der Informationen vom Benutze erfasst und Daten von einem externen Dienst abruft
  • Implementieren einer UI-losen Schaltfläche, die eine Funktion aufruft
  • Implementieren eines Aufgabenbereichs, der Inhalte in den Textkörper einer Nachricht einfügt

Tipp

Wenn Sie eine vollständige Version dieses Tutorials benötigen, besuchen Sie das Repository mit Den Office-Add-Ins-Beispielen auf GitHub.

Voraussetzungen

  • Node.js (die aktuellsteLTS-Version). Besuchen Sie die Node.js Website , um die richtige Version für Ihr Betriebssystem herunterzuladen und zu installieren.

  • Die neueste Version von Yeoman und des Yeoman-Generators für Office-Add-Ins. Um diese Tools global zu installieren, führen Sie den folgenden Befehl an der Eingabeaufforderung aus.

    npm install -g yo generator-office

    Hinweis

    Selbst wenn Sie bereits den Yeoman-Generator installiert haben, empfehlen wir Ihnen, das npm-Paket auf die neueste Version zu aktualisieren.

  • Office in Verbindung mit einem Microsoft 365-Abonnement (einschließlich Office im Internet).

    Hinweis

    Wenn Sie noch nicht über Office verfügen, können Sie sich über das Microsoft 365-Entwicklerprogramm für ein Microsoft 365 E5-Entwicklerabonnement qualifizieren. Weitere Informationen finden Sie in den häufig gestellten Fragen. Alternativ können Sie sich für eine kostenlose 1-monatige Testversion registrieren oder einen Microsoft 365-Plan erwerben.

Setup

Das Add-In, das Sie in diesem Lernprogramm erstellen, liest Gists aus dem GitHub-Konto des Benutzers und fügt den ausgewählten Gist zum Textkörper einer Nachricht hinzu. Führen Sie die folgenden Schritte aus, um zwei neue Gists zu erstellen, die Sie verwenden können, um das Add-In zu testen, das Sie erstellen.

  1. Melden Sie sich bei GitHub an.

  2. Erstellen Sie einen neuen Gist.

    • Geben Sie im Feld Gist description... den Text Hello Welt (Markdown) ein.

    • Geben Sie im Feld Filename including extension... den Namen test.md ein.

    • Fügen Sie das folgende Markdown zu dem mehrzeiligen Textfeld hinzu.

      # Hello World

This is content converted from Markdown!

Here's a JSON sample:

  ```json
  {
    "foo": "bar"
  }
  ```

    • Wählen Sie die Schaltfläche Create public gist aus.

  3. Erstellen Sie einen weiteren neuen Gist.

    • Geben Sie im Feld Gist description... den Text Hello World Html ein.

    • Geben Sie im Feld Filename including extension... den Namen test.html ein.

    • Fügen Sie das folgende Markdown zu dem mehrzeiligen Textfeld hinzu.

      <html>
  <head>
    <style>
    h1 {
      font-family: Calibri;
    }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is a test</p>
  </body>
</html>

    • Wählen Sie die Schaltfläche Create public gist aus.

Erstellen eines Outlook-Add-In-Projekts

  1. Führen Sie den folgenden Befehl aus, um ein Add-In-Projekt mit dem Yeoman-Generator zu erstellen: Ein Ordner, der das Projekt enthält, wird dem aktuellen Verzeichnis hinzugefügt.

    yo office

    Hinweis

    Wenn Sie den yo office-Befehl ausführen, werden möglicherweise Eingabeaufforderungen zu den Richtlinien für die Datensammlung von Yeoman und den CLI-Tools des Office-Add-In angezeigt. Verwenden Sie die bereitgestellten Informationen, um auf die angezeigten Eingabeaufforderungen entsprechend zu reagieren.

    Wenn Sie dazu aufgefordert werden, geben Sie die folgenden Informationen an, um das Add-In-Projekt zu erstellen:

    • Choose a project type - Office Add-in Task Pane project

    • Choose a script type - JavaScript

    • Wie soll Ihr Add-In heißen? - Git the gist

    • Which Office client application would you like to support? - Outlook

    Die Eingabeaufforderungen und Antworten für den Yeoman Generator in einer Befehlszeilenschnittstelle.

    Nach Abschluss des Assistenten erstellt der Generator erstellt das Projekt und installiert unterstützende Node-Komponenten.

    Hinweis

    Wenn Sie Node.js Version 20.0.0 oder höher verwenden, wird möglicherweise eine Warnung angezeigt, wenn der Generator die Installation ausführt, die über eine nicht unterstützte Engine verfügt. Wir arbeiten an einer Lösung dafür. In der Zwischenzeit wirkt sich die Warnung nicht auf den Generator oder das von Ihnen generierte Projekt aus, sodass sie ignoriert werden kann.

    Tipp

    Die vom Yeoman-Generator nach der Erstellung des Add-In-Projekts unter Nächste Schritte bereitgestellten Anweisungen können Sie ignorieren. Die Schritt-für-Schritt-Anleitungen in diesem Artikel enthalten alle Anweisungen, die Sie zum Durchführen dieses Tutorials benötigen.

  2. Navigieren Sie zum Stammverzeichnis des Projekts.

    cd "Git the gist"

  3. Dieses Add-In verwendet die folgenden Bibliotheken.

    Um diese Tools für Ihr Projekt zu installieren, führen Sie den folgenden Befehl im Stammverzeichnis des Projekts aus.

    npm install showdown urijs jquery --save

  4. Öffnen Sie Ihr Projekt in VS Code oder in Ihrem bevorzugten Code-Editor.

    Tipp

    In Windows können Sie über die Befehlszeile zum Stammverzeichnis des Projekts navigieren und dann code . eingeben, um diesen Ordner in VS Code zu öffnen. Auf einem Mac müssen Sie den code-Befehl zum Pfad hinzufügenbevor Sie diesen Befehl verwenden können, um den Projektordner in VS Code zu öffnen.

Aktualisieren des Manifests

Das Manifest für ein Add-In steuert, wie dieses in Outlook angezeigt wird. Es definiert, wie das Add-In und die Schaltflächen in der Add-In-Liste angezeigt werden, die Schaltflächen, die im Menüband angezeigt werden, und legt die URL für die HTML- und JavaScript-Dateien fest, die vom Add-In verwendet werden.

Angeben der grundlegenden Informationen

Nehmen Sie die folgenden Aktualisierungen in der Datei manifest.xml vor, um einige grundlegende Informationen zum Add-In anzugeben.

  1. Suchen Sie das <ProviderName-Element> , und ersetzen Sie den Standardwert durch Ihren Firmennamen.

    <ProviderName>Contoso</ProviderName>

  2. Suchen Sie das <Description-Element> , ersetzen Sie den Standardwert durch eine Beschreibung des Add-Ins, und speichern Sie die Datei.

    <Description DefaultValue="Allows users to access their GitHub gists."/>

Testen des generierten Add-Ins

Bevor Sie fortfahren, sollten Sie das grundlegende Add-In testen, das der Generator erstellt hat, um zu bestätigen, dass das Projekt korrekt eingerichtet ist.

Hinweis

Office-Add-Ins sollten auch während der Entwicklung HTTPS und nicht HTTP verwenden. Wenn Sie aufgefordert werden, ein Zertifikat zu installieren, nachdem Sie einen der folgenden Befehle ausgeführt haben, akzeptieren Sie die Eingabeaufforderung, um das Zertifikat zu installieren, das der Yeoman-Generator bereitstellt. Möglicherweise ist es auch erforderlich, dass Sie Ihre Eingabeaufforderung oder Ihr Terminal als Administrator ausführen, damit die Änderungen vorgenommen werden können.

  1. Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet, und Das Add-In wird quergeladen.

    npm start

    Hinweis

    Wenn Ihr Add-In nicht automatisch quergeladen wurde, befolgen Sie die Anweisungen unter Querladen von Outlook-Add-Ins zum Testen , um das Add-In in Outlook manuell querzuladen.

  2. Öffnen Sie in Outlook eine vorhandene Nachricht, und klicken Sie auf die Schaltfläche Aufgabenbereich anzeigen.

  3. Wenn Sie mit dem Dialogfeld WebView beim Laden beenden aufgefordert werden, wählen Sie OK aus.

    Hinweis

    Wenn Sie Abbrechen auswählen, wird das Dialogfeld nicht mehr angezeigt, solange diese Instanz des Add-Ins ausgeführt wird. Wenn Sie Ihr Add-In jedoch neu starten, wird das Dialogfeld wieder angezeigt.

    Wenn alles ordnungsgemäß eingerichtet wurde, wird der Aufgabenbereich geöffnet und die Willkommensseite des Add-Ins gerendert.

    Die Schaltfläche Aufgabenbereich anzeigen und Git the Gist Task Pane, die durch das Beispiel hinzugefügt wurden.

Definieren von Schaltflächen

Da Sie nun überprüft haben, dass das grundlegende Add-In funktioniert, können Sie es anpassen und weitere Funktionen hinzufügen. Das Manifest definiert standardmäßig nur Schaltflächen für das Fenster zum Lesen von Nachrichten. Wir aktualisieren das Manifest so, dass die Schaltflächen aus dem Fenster zum Lesen von Nachrichten entfernt und zwei neue Schaltflächen für das Fenster zum Verfassen von Nachrichten definiert werden:

  • Insert gist: Eine Add-In-Befehlsschaltfläche, mit der eine Aufgabenbereich geöffnet wird.

  • Insert default gist: Eine Schaltfläche, die eine Funktion aufruft.

Entfernen des MessageReadCommandSurface-Erweiterungspunkts

  1. Öffnen Sie die Datei manifest.xml.

  2. Suchen Sie das <ExtensionPoint-Element> mit dem Typ MessageReadCommandSurface , und löschen Sie es (einschließlich des schließenden Tags). Dadurch werden die Add-In-Schaltflächen aus dem Fenster zum Lesen von Nachrichten entfernt.

Hinzufügen des MessageReadCommandSurface-Erweiterungspunkts

  1. Suchen Sie inmanifest.xmldie Zeile im Manifest, die lautet </DesktopFormFactor>.

  2. Fügen Sie unmittelbar vor dieser Zeile die folgende XML-Markup hinzu. Beachten Sie Folgendes zu diesem Markup.

    • ExtensionPoint <> mit xsi:type="MessageComposeCommandSurface" gibt an, dass Sie Schaltflächen definieren, die dem Fenster zum Verfassen von Nachrichten hinzugefügt werden sollen.

    • Wenn Sie ein <OfficeTab-Element> mit id="TabDefault"verwenden, geben Sie an, dass Sie die Schaltflächen der Standardregisterkarte im Menüband hinzufügen möchten.

    • Das <Group-Element> definiert die Gruppierung für die neuen Schaltflächen mit einer Bezeichnung, die von der groupLabel-Ressource festgelegt wird.

    • Das erste <Control-Element> enthält ein <Action-Element> mit xsi:type="ShowTaskPane", sodass mit dieser Schaltfläche ein Aufgabenbereich geöffnet wird.

    • Das zweite <Control-Element> enthält ein <Action-Element> mit xsi:type="ExecuteFunction", sodass diese Schaltfläche eine JavaScript-Funktion aufruft, die in der Funktionsdatei enthalten ist.

    <!-- Message Compose -->
<ExtensionPoint xsi:type="MessageComposeCommandSurface">
  <OfficeTab id="TabDefault">
    <Group id="msgComposeCmdGroup">
      <Label resid="GroupLabel"/>
      <Control xsi:type="Button" id="msgComposeInsertGist">
        <Label resid="TaskpaneButton.Label"/>
        <Supertip>
          <Title resid="TaskpaneButton.Title"/>
          <Description resid="TaskpaneButton.Tooltip"/>
        </Supertip>
        <Icon>
          <bt:Image size="16" resid="Icon.16x16"/>
          <bt:Image size="32" resid="Icon.32x32"/>
          <bt:Image size="80" resid="Icon.80x80"/>
        </Icon>
        <Action xsi:type="ShowTaskpane">
          <SourceLocation resid="Taskpane.Url"/>
        </Action>
      </Control>
      <Control xsi:type="Button" id="msgComposeInsertDefaultGist">
        <Label resid="FunctionButton.Label"/>
        <Supertip>
          <Title resid="FunctionButton.Title"/>
          <Description resid="FunctionButton.Tooltip"/>
        </Supertip>
        <Icon>
          <bt:Image size="16" resid="Icon.16x16"/>
          <bt:Image size="32" resid="Icon.32x32"/>
          <bt:Image size="80" resid="Icon.80x80"/>
        </Icon>
        <Action xsi:type="ExecuteFunction">
          <FunctionName>insertDefaultGist</FunctionName>
        </Action>
      </Control>
    </Group>
  </OfficeTab>
</ExtensionPoint>

Aktualisieren von Ressourcen im Manifest

Der Code oben verwies auf Bezeichnungen, QuickInfos und URLs, die definiert werden müssen, damit das Manifest gültig ist. Sie geben diese Informationen im <Abschnitt Ressourcen> des Manifests an.

  1. Suchen Sie inmanifest.xmldas <Resources-Element> in der Manifestdatei, und löschen Sie das gesamte Element (einschließlich des schließenden Tags).

  2. Fügen Sie an derselben Stelle das folgende Markup hinzu, um das Resources-Element zu ersetzen,> das< Sie gerade entfernt haben.

    <Resources>
  <bt:Images>
    <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
    <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
    <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
  </bt:Images>
  <bt:Urls>
    <bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html"/>
    <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
  </bt:Urls>
  <bt:ShortStrings>
    <bt:String id="GroupLabel" DefaultValue="Git the gist"/>
    <bt:String id="TaskpaneButton.Label" DefaultValue="Insert gist"/>
    <bt:String id="TaskpaneButton.Title" DefaultValue="Insert gist"/>
    <bt:String id="FunctionButton.Label" DefaultValue="Insert default gist"/>
    <bt:String id="FunctionButton.Title" DefaultValue="Insert default gist"/>
  </bt:ShortStrings>
  <bt:LongStrings>
    <bt:String id="TaskpaneButton.Tooltip" DefaultValue="Displays a list of your gists and allows you to insert their contents into the current message."/>
    <bt:String id="FunctionButton.Tooltip" DefaultValue="Inserts the content of the gist you mark as default into the current message."/>
  </bt:LongStrings>
</Resources>

  3. Speichern Sie die Änderungen im Manifest.

Erneutes Installieren des Add-Ins

Sie müssen das Add-In neu installieren, damit die Manifeständerungen wirksam werden.

  1. Wenn der Webserver ausgeführt wird, führen Sie den folgenden Befehl aus.

    npm stop

  2. Führen Sie den folgenden Befehl aus, um den lokalen Webserver zu starten und Ihr Add-In automatisch querzuladen.

    npm start

Nachdem Sie das Add-In erneut installiert haben, können Sie überprüfen, ob es erfolgreich installiert wurden, indem Sie nach den Befehlen Insert gist und Insert default gist im Fenster zum Verfassen von Nachrichten suchen. Beachten Sie, dass nichts passiert, wenn Sie eines der folgenden Elemente auswählen, da Sie das Erstellen dieses Add-Ins noch nicht abgeschlossen haben.

  • Wenn Sie dieses Add-In in Outlook 2016 oder höher unter Windows ausführen, sollten im Menüband des Fensters zum Verfassen von Nachrichten zwei neue Schaltflächen angezeigt werden: Gist einfügen und Standard-Gist einfügen.

    Das Menüband-Überlaufmenü im klassischen Outlook unter Windows mit hervorgehobenen Schaltflächen des Add-Ins.

  • Wenn Sie dieses Add-In in Outlook im Web oder einem neuen Outlook unter Windows (Vorschau) ausführen, wählen Sie im Menüband des Fensters zum Verfassen von Nachrichten die Option Apps aus, und wählen Sie dann Git the gist aus, um die Optionen Gist einfügen und Standard-Gist einfügen anzuzeigen.

    Das Formular zum Verfassen von Nachrichten in Outlook im Web mit hervorgehobener Add-In Schaltfläche und Popup-Menü.

Implementieren einer ersten Ausführung

Dieses Add-In muss in der Lage sein, Gists aus dem GitHub-Konto des Benutzers zu lesen und zu identifizieren, welchen der Benutzer als Standard-Gist ausgewählt hat. Um diese Ziele zu erreichen, muss das Add-In den Benutzer auffordern, seinen GitHub-Benutzernamen einzugeben und einen Standard-Gist aus der Sammlung vorhandener Gists auszuwählen. Führen Sie die Schritte in diesem Abschnitt aus, um eine Erstausführung zu implementieren, in der ein Dialogfeld zum Sammeln dieser Informationen vom Benutzer angezeigt wird.

Create der Benutzeroberfläche des Dialogfelds

Beginnen wir mit dem Erstellen der Benutzeroberfläche für das Dialogfeld.

  1. Erstellen Sie im Ordner ./src einen neuen Unterordner mit dem Namen settings.

  2. Erstellen Sie im Ordner ./src/settings eine Datei mit dem Namen dialog.html.

  3. Fügen Sie indialog.htmldas folgende Markup hinzu, um ein einfaches Formular mit einer Texteingabe für einen GitHub-Benutzernamen und einer leeren Liste für Gists zu definieren, die über JavaScript aufgefüllt werden.

    <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <title>Settings</title>

  <!-- Office JavaScript API -->
  <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>

<!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui. -->
  <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>

  <!-- Template styles -->
  <link href="dialog.css" rel="stylesheet" type="text/css" />
</head>

<body class="ms-font-l">
  <main>
    <section class="ms-font-m ms-fontColor-neutralPrimary">
      <div class="not-configured-warning ms-MessageBar ms-MessageBar--warning">
        <div class="ms-MessageBar-content">
          <div class="ms-MessageBar-icon">
            <i class="ms-Icon ms-Icon--Info"></i>
          </div>
          <div class="ms-MessageBar-text">
            Oops! It looks like you haven't configured <strong>Git the gist</strong> yet.
            <br/>
            Please configure your GitHub username and select a default gist, then try that action again!
          </div>
        </div>
      </div>
      <div class="ms-font-xxl">Settings</div>
      <div class="ms-Grid">
        <div class="ms-Grid-row">
          <div class="ms-TextField">
            <label class="ms-Label">GitHub Username</label>
            <input class="ms-TextField-field" id="github-user" type="text" value="" placeholder="Please enter your GitHub username">
          </div>
        </div>
        <div class="error-display ms-Grid-row">
          <div class="ms-font-l ms-fontWeight-semibold">An error occurred:</div>
          <pre><code id="error-text"></code></pre>
        </div>
        <div class="gist-list-container ms-Grid-row">
          <div class="list-title ms-font-xl ms-fontWeight-regular">Choose Default Gist</div>
          <form>
            <div id="gist-list">
            </div>
          </form>
        </div>
      </div>
      <div class="ms-Dialog-actions">
        <div class="ms-Dialog-actionsRight">
          <button class="ms-Dialog-action ms-Button ms-Button--primary" id="settings-done" disabled>
            <span class="ms-Button-label">Done</span>
          </button>
        </div>
      </div>
    </section>
  </main>
  <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.js"></script>
  <script type="text/javascript" src="../helpers/gist-api.js"></script>
  <script type="text/javascript" src="dialog.js"></script>
</body>

</html>

    Möglicherweise haben Sie bemerkt, dass die HTML-Datei auf eine JavaScript-Datei verweist, gist-api.js, die noch nicht vorhanden ist. Diese Datei wird im Abschnitt Daten von GitHub abrufen weiter unten erstellt.

  4. Speichern Sie Ihre Änderungen.

  5. Erstellen Sie als Nächstes eine Datei im Ordner ./src/settings mit dem Namen dialog.css.

  6. Fügen Sie in dialog.css den folgenden Code hinzu, um die Stile anzugeben, die vondialog.htmlverwendet werden.

    section {
  margin: 10px 20px;
}

.not-configured-warning {
  display: none;
}

.error-display {
  display: none;
}

.gist-list-container {
  margin: 10px -8px;
  display: none;
}

.list-title {
  border-bottom: 1px solid #a6a6a6;
  padding-bottom: 5px;
}

ul {
  margin-top: 10px;
}

.ms-ListItem-secondaryText,
.ms-ListItem-tertiaryText {
  padding-left: 15px;
}

  7. Speichern Sie Ihre Änderungen.

Entwickeln der Funktionalität des Dialogs

Da Sie nun die Benutzeroberfläche des Dialogfelds definiert haben, können Sie den Code schreiben, der dazu führt, dass eine Aktion ausgeführt wird.

  1. Erstellen Sie im Ordner ./src/settings eine Datei mit dem Namen dialog.js.

  2. Fügen Sie den folgenden Code hinzu. Beachten Sie, dass dieser Code jQuery verwendet, um Ereignisse zu registrieren, und die messageParent-Methode, um die Auswahl des Benutzers zurück an den Aufrufer zu senden.

    (function() {
  'use strict';

  // The onReady function must be run each time a new page is loaded.
  Office.onReady(function() {
    $(document).ready(function() {
      if (window.location.search) {
        // Check if warning should be displayed.
        const warn = getParameterByName('warn');

        if (warn) {
          $('.not-configured-warning').show();
        } else {
          // See if the config values were passed.
          // If so, pre-populate the values.
          const user = getParameterByName('gitHubUserName');
          const gistId = getParameterByName('defaultGistId');

          $('#github-user').val(user);
          loadGists(user, function(success) {
            if (success) {
              $('.ms-ListItem').removeClass('is-selected');
              $('input').filter(function() {
                return this.value === gistId;
              }).addClass('is-selected').attr('checked', 'checked');
              $('#settings-done').removeAttr('disabled');
            }
          });
        }
      }

      // When the GitHub username changes,
      // try to load gists.
      $('#github-user').on('change', function() {
        $('#gist-list').empty();
        const ghUser = $('#github-user').val();

        if (ghUser.length > 0) {
          loadGists(ghUser);
        }
      });

      // When the Done button is selected, send the
      // values back to the caller as a serialized
      // object.
      $('#settings-done').on('click', function() {
        const settings = {};
        settings.gitHubUserName = $('#github-user').val();
        const selectedGist = $('.ms-ListItem.is-selected');

        if (selectedGist) {
          settings.defaultGistId = selectedGist.val();
          sendMessage(JSON.stringify(settings));
        }
      });
    });
  });

  // Load gists for the user using the GitHub API
  // and build the list.
  function loadGists(user, callback) {
    getUserGists(user, function(gists, error) {
      if (error) {
        $('.gist-list-container').hide();
        $('#error-text').text(JSON.stringify(error, null, 2));
        $('.error-display').show();

        if (callback) callback(false);
      } else {
        $('.error-display').hide();
        buildGistList($('#gist-list'), gists, onGistSelected);
        $('.gist-list-container').show();

        if (callback) callback(true);
      }
    });
  }

  function onGistSelected() {
    $('.ms-ListItem').removeClass('is-selected').removeAttr('checked');
    $(this).children('.ms-ListItem').addClass('is-selected').attr('checked', 'checked');
    $('.not-configured-warning').hide();
    $('#settings-done').removeAttr('disabled');
  }

  function sendMessage(message) {
    Office.context.ui.messageParent(message);
  }

  function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }

    name = name.replace(/[\[\]]/g, "\\$&");
    const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);

    if (!results) return null;

    if (!results[2]) return '';

    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }
})();

  3. Speichern Sie Ihre Änderungen.

Aktualisieren der Webpack-Konfigurationseinstellungen

Öffnen Sie abschließend die Datei webpack.config.js im Stammverzeichnis des Projekts, und führen Sie die folgenden Schritte aus.

  1. Suchen Sie das entry-Objekt innerhalb des config-Objekts, und fügen Sie einen neuen Eintrag für dialog hinzu.

    dialog: "./src/settings/dialog.js",

    Danach sieht das neue entry-Objekt folgendermaßen aus:

    entry: {
  polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
  taskpane: ["./src/taskpane/taskpane.js", "./src/taskpane/taskpane.html"],
  commands: "./src/commands/commands.js",
  dialog: "./src/settings/dialog.js",
},

  2. Suchen Sie das Array pluginsinnerhalb des Objekts config. Fügen Sie im patterns-Array des new CopyWebpackPlugin-Objekts neue Einträge für taskpane.css und dialog.css hinzu.

    {
  from: "./src/taskpane/taskpane.css",
  to: "taskpane.css",
},
{
  from: "./src/settings/dialog.css",
  to: "dialog.css",
},

    Danach sieht das neue Objekt new CopyWebpackPlugin folgendermaßen aus:

    new CopyWebpackPlugin({
  patterns: [
  {
    from: "./src/taskpane/taskpane.css",
    to: "taskpane.css",
  },
  {
    from: "./src/settings/dialog.css",
    to: "dialog.css",
  },
  {
    from: "assets/*",
    to: "assets/[name][ext][query]",
  },
  {
    from: "manifest*.xml",
    to: "[name]" + "[ext]",
    transform(content) {
      if (dev) {
        return content;
      } else {
        return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
      }
    },
  },
]}),

  3. Fügen Sie im gleichen plugins-Array innerhalb des config-Objekts dieses neue Objekt am Ende des Arrays hinzu.

    new HtmlWebpackPlugin({
  filename: "dialog.html",
  template: "./src/settings/dialog.html",
  chunks: ["polyfill", "dialog"]
})

    Danach sieht das neue plugins-Array folgendermaßen aus:

    plugins: [
  new HtmlWebpackPlugin({
    filename: "taskpane.html",
    template: "./src/taskpane/taskpane.html",
    chunks: ["polyfill", "taskpane"],
  }),
  new CopyWebpackPlugin({
    patterns: [
      {
        from: "./src/taskpane/taskpane.css",
        to: "taskpane.css",
      },
      {
        from: "./src/settings/dialog.css",
        to: "dialog.css",
      },
      {
        from: "assets/*",
        to: "assets/[name][ext][query]",
      },
      {
        from: "manifest*.xml",
        to: "[name]." + buildType + "[ext]",
        transform(content) {
          if (dev) {
            return content;
          } else {
            return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
          }
        },
      },
    ],
  }),
  new HtmlWebpackPlugin({
    filename: "commands.html",
    template: "./src/commands/commands.html",
    chunks: ["polyfill", "commands"],
  }),
  new HtmlWebpackPlugin({
    filename: "dialog.html",
    template: "./src/settings/dialog.html",
    chunks: ["polyfill", "dialog"]
  })
],

Abrufen von Daten aus GitHub

Die Datei dialog.js-, die Sie gerade erstellt haben, gibt an, dass das Add-In Gists laden soll, wenn die Änderungs-Ereignis für das GitHub-Benutzernamenfeld ausgelöst wird. Um die Gists des Benutzers aus GitHub abzurufen, verwenden Sie die GitHub-Gists-API.

  1. Erstellen Sie im Ordner ./src einen neuen Unterordner mit dem Namen helpers.

  2. Erstellen Sie im Ordner ./src/helpers eine Datei mit dem Namen gist-api.js.

  3. Fügen Sie ingist-api.jsden folgenden Code hinzu, um die Gists des Benutzers aus GitHub abzurufen und die Liste der Gists zu erstellen.

    function getUserGists(user, callback) {
  const requestUrl = 'https://api.github.com/users/' + user + '/gists';

  $.ajax({
    url: requestUrl,
    dataType: 'json'
  }).done(function(gists) {
    callback(gists);
  }).fail(function(error) {
    callback(null, error);
  });
}

function buildGistList(parent, gists, clickFunc) {
  gists.forEach(function(gist) {

    const listItem = $('<div/>')
      .appendTo(parent);

    const radioItem = $('<input>')
      .addClass('ms-ListItem')
      .addClass('is-selectable')
      .attr('type', 'radio')
      .attr('name', 'gists')
      .attr('tabindex', 0)
      .val(gist.id)
      .appendTo(listItem);

    const descPrimary = $('<span/>')
      .addClass('ms-ListItem-primaryText')
      .text(gist.description)
      .appendTo(listItem);

    const descSecondary = $('<span/>')
      .addClass('ms-ListItem-secondaryText')
      .text(' - ' + buildFileList(gist.files))
      .appendTo(listItem);

    const updated = new Date(gist.updated_at);

    const descTertiary = $('<span/>')
      .addClass('ms-ListItem-tertiaryText')
      .text(' - Last updated ' + updated.toLocaleString())
      .appendTo(listItem);

    listItem.on('click', clickFunc);
  });  
}

function buildFileList(files) {

  let fileList = '';

  for (let file in files) {
    if (files.hasOwnProperty(file)) {
      if (fileList.length > 0) {
        fileList = fileList + ', ';
      }

      fileList = fileList + files[file].filename + ' (' + files[file].language + ')';
    }
  }

  return fileList;
}

  4. Speichern Sie Ihre Änderungen.

  5. Führen Sie den folgenden Befehl aus, um das Projekt erneut zu erstellen.

    npm run build

Implementieren einer Schaltfläche ohne Benutzeroberfläche

Die Schaltfläche "Standard-Gist einfügen " dieses Add-Ins ist eine Schaltfläche ohne Benutzeroberfläche, die eine JavaScript-Funktion aufruft, anstatt wie bei vielen Add-In-Schaltflächen einen Aufgabenbereich zu öffnen. Wenn der Benutzer die Schaltfläche Standard-Gist einfügen auswählt, überprüft die entsprechende JavaScript-Funktion, ob das Add-In konfiguriert wurde.

  • Wenn das Add-In bereits konfiguriert wurde, lädt die Funktion den Inhalt des Gist, den der Benutzer als Standard ausgewählt hat, und fügt ihn in den Nachrichtentext ein.

  • Wenn das Add-In noch nicht konfiguriert wurde, fordert das Einstellungsdialogfeld den Benutzer auf, die erforderlichen Informationen anzugeben.

Aktualisieren der Funktionsdatei (HTML)

Eine Funktion, die von einer Schaltfläche ohne Benutzeroberfläche aufgerufen wird, muss in der Datei definiert werden, die durch das <FunctionFile-Element> im Manifest für den entsprechenden Formfaktor angegeben wird. Das Manifest dieses Add-Ins gibt https://localhost:3000/commands.html als Funktionsdatei an.

  1. Öffnen Sie ./src/commands/commands.html , und ersetzen Sie den gesamten Inhalt durch das folgende Markup.

    <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>

    <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="../../node_modules/showdown/dist/showdown.min.js"></script>
    <script type="text/javascript" src="../../node_modules/urijs/src/URI.min.js"></script>
    <script type="text/javascript" src="../helpers/addin-config.js"></script>
    <script type="text/javascript" src="../helpers/gist-api.js"></script>
</head>

<body>
  <!-- NOTE: The body is empty on purpose. Since functions in commands.js are
       invoked via a button, there is no UI to render. -->
</body>

</html>

    Möglicherweise haben Sie bemerkt, dass die HTML-Datei auf eine JavaScript-Datei verweist, addin-config.js, die noch nicht vorhanden ist. Diese Datei wird im Abschnitt Erstellen einer Datei zum Verwalten von Konfigurationseinstellungen weiter unten in diesem Tutorial erstellt.

  2. Speichern Sie Ihre Änderungen.

Aktualisieren der Funktionsdatei (JavaScript)

  1. Öffnen Sie die Datei ./src/commands/commands.js, und ersetzen Sie den gesamten Inhalt durch den folgenden Code. Beachten Sie, dass der Parameter der Dialog-URL hinzugefügt ?warn=1 wird, wenn die insertDefaultGist-Funktion feststellt, dass das Add-In noch nicht konfiguriert wurde. Auf diese Weise rendert das Dialogfeld "Einstellungen" die Meldungsleiste, die in ./src/settings/dialog.html definiert ist, um dem Benutzer mitzuteilen, warum das Dialogfeld angezeigt wird.

    let config;
let btnEvent;

// The onReady function must be run each time a new page is loaded.
Office.onReady();

function showError(error) {
  Office.context.mailbox.item.notificationMessages.replaceAsync('github-error', {
    type: 'errorMessage',
    message: error
  });
}

let settingsDialog;

function insertDefaultGist(event) {
  config = getConfig();

  // Check if the add-in has been configured.
  if (config && config.defaultGistId) {
    // Get the default gist content and insert.
    try {
      getGist(config.defaultGistId, function(gist, error) {
        if (gist) {
          buildBodyContent(gist, function (content, error) {
            if (content) {
              Office.context.mailbox.item.body.setSelectedDataAsync(
                content,
                { coercionType: Office.CoercionType.Html },
                function (result) {
                  event.completed();
                }
              );
            } else {
              showError(error);
              event.completed();
            }
          });
        } else {
          showError(error);
          event.completed();
        }
      });
    } catch (err) {
      showError(err);
      event.completed();
    }

  } else {
    // Save the event object so we can finish up later.
    btnEvent = event;
    // Not configured yet, display settings dialog with
    // warn=1 to display warning.
    const url = new URI('dialog.html?warn=1').absoluteTo(window.location).toString();
    const dialogOptions = { width: 20, height: 40, displayInIframe: true };

    Office.context.ui.displayDialogAsync(url, dialogOptions, function(result) {
      settingsDialog = result.value;
      settingsDialog.addEventHandler(Office.EventType.DialogMessageReceived, receiveMessage);
      settingsDialog.addEventHandler(Office.EventType.DialogEventReceived, dialogClosed);
    });
  }
}

// Register the function.
Office.actions.associate("insertDefaultGist", insertDefaultGist);

function receiveMessage(message) {
  config = JSON.parse(message.message);
  setConfig(config, function(result) {
    settingsDialog.close();
    settingsDialog = null;
    btnEvent.completed();
    btnEvent = null;
  });
}

function dialogClosed(message) {
  settingsDialog = null;
  btnEvent.completed();
  btnEvent = null;
}

  2. Speichern Sie Ihre Änderungen.

Erstellen einer Datei zum Verwalten von Konfigurationseinstellungen

  1. Erstellen Sie im Ordner ./src/helpers eine Datei namens addin-config.js, und fügen Sie den folgenden Code hinzu. Dieser Code verwendet das RoamingSettings-Objekt, um die Konfigurationswerte abzurufen und festzulegen.

    function getConfig() {
  const config = {};

  config.gitHubUserName = Office.context.roamingSettings.get('gitHubUserName');
  config.defaultGistId = Office.context.roamingSettings.get('defaultGistId');

  return config;
}

function setConfig(config, callback) {
  Office.context.roamingSettings.set('gitHubUserName', config.gitHubUserName);
  Office.context.roamingSettings.set('defaultGistId', config.defaultGistId);

  Office.context.roamingSettings.saveAsync(callback);
}

  2. Speichern Sie Ihre Änderungen.

Erstellen neuer Funktionen zum Verarbeiten von Gists

  1. Öffnen Sie die Datei ./src/helpers/gist-api.js, und fügen Sie die folgenden Funktionen hinzu. Beachten Sie Folgendes:

    • Wenn der Gist HTML enthält, fügt das Add-In den HTML-Code unverändert in den Text der Nachricht ein.

    • Wenn der Gist Markdown enthält, verwendet das Add-In die Showdown-Bibliothek , um den Markdown in HTML zu konvertieren, und fügt dann den resultierenden HTML-Code in den Text der Nachricht ein.

    • Wenn der Gist etwas anderes als HTML oder Markdown enthält, fügt das Add-In diese Elemente als Codeausschnitt in den Text der Nachricht ein.

    function getGist(gistId, callback) {
  const requestUrl = 'https://api.github.com/gists/' + gistId;

  $.ajax({
    url: requestUrl,
    dataType: 'json'
  }).done(function(gist) {
    callback(gist);
  }).fail(function(error) {
    callback(null, error);
  });
}

function buildBodyContent(gist, callback) {
  // Find the first non-truncated file in the gist
  // and use it.
  for (let filename in gist.files) {
    if (gist.files.hasOwnProperty(filename)) {
      const file = gist.files[filename];
      if (!file.truncated) {
        // We have a winner.
        switch (file.language) {
          case 'HTML':
            // Insert as is.
            callback(file.content);
            break;
          case 'Markdown':
            // Convert Markdown to HTML.
            const converter = new showdown.Converter();
            const html = converter.makeHtml(file.content);
            callback(html);
            break;
          default:
            // Insert contents as a <code> block.
            let codeBlock = '<pre><code>';
            codeBlock = codeBlock + file.content;
            codeBlock = codeBlock + '</code></pre>';
            callback(codeBlock);
        }
        return;
      }
    }
  }
  callback(null, 'No suitable file found in the gist');
}

  2. Speichern Sie Ihre Änderungen.

Testen der Schaltfläche "Standardgist einfügen"

  1. Wenn der lokale Webserver noch nicht ausgeführt wird, führen Sie npm start an der Eingabeaufforderung aus.

  2. Öffnen Sie Outlook, und verfassen Sie eine neue Nachricht.

  3. Klicken Sie im Fenster zum Verfassen der Nachricht auf die Schaltfläche Insert default gist. Es sollte ein Dialogfeld angezeigt werden, in dem Sie das Add-In konfigurieren können, beginnend mit der Aufforderung zum Festlegen Ihres GitHub-Benutzernamens.

    Die Dialogaufforderung zum Konfigurieren des Add-Ins.

  4. Geben Sie im Einstellungsdialogfeld Ihren GitHub-Benutzernamen ein, und klicken Sie dann entweder auf TAB , oder klicken Sie auf eine andere Stelle im Dialogfeld, um das Änderungsereignis aufzurufen, das Ihre Liste der öffentlichen Gists laden sollte. Wählen Sie einen Gist als Standard aus, und klicken Sie auf Done.

    Der Einstellungsdialog für Add-Ins.

  5. Klicken Sie erneut auf die Schaltfläche Insert Default Gist. Dieses Mal sollten Sie den Inhalt des Gists sehen, der in den Textkörper der E-Mail eingefügt wurde.

    Hinweis

    Outlook für Windows: damit die neuesten Einstellungen in Kraft treten, müssen Sie das Nachrichtenfenster ggfs. schließen und neu öffnen.

Implementieren eines Aufgabenbereichs

Die Schaltfläche Gist einfügen dieses Add-Ins öffnet einen Aufgabenbereich und zeigt die Gists des Benutzers an. Der Benutzer kann dann einen der Gists auswählen, der in den Textkörper der Nachricht eingefügt werden soll. Sofern der Benutzer das Add-in noch nicht konfiguriert ist, wird er dazu aufgefordert.

Angeben des HTML für den Aufgabenbereich

  1. In dem von Ihnen erstellten Projekt wird das Aufgabenbereich-HTML in der Datei ./src/taskpane/taskpane.html angegeben. Öffnen Sie diese Datei, und ersetzen Sie den gesamten Inhalt durch das folgende Markup.

    <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contoso Task Pane Add-in</title>

    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>

   <!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui. -->
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>

    <!-- Template styles -->
    <link href="taskpane.css" rel="stylesheet" type="text/css" />
</head>

<body class="ms-font-l ms-landing-page">
  <main class="ms-landing-page__main">
    <section class="ms-landing-page__content ms-font-m ms-fontColor-neutralPrimary">
      <div id="not-configured" style="display: none;">
        <div class="centered ms-font-xxl ms-u-textAlignCenter">Welcome!</div>
        <div class="ms-font-xl" id="settings-prompt">Please choose the <strong>Settings</strong> icon at the bottom of this window to configure this add-in.</div>
      </div>
      <div id="gist-list-container" style="display: none;">
        <form>
          <div id="gist-list">
          </div>
        </form>
      </div>
      <div id="error-display" style="display: none;" class="ms-u-borderBase ms-fontColor-error ms-font-m ms-bgColor-error ms-borderColor-error">
      </div>
    </section>
    <button class="ms-Button ms-Button--primary" id="insert-button" tabindex=0 disabled>
      <span class="ms-Button-label">Insert</span>
    </button>
  </main>
  <footer class="ms-landing-page__footer ms-bgColor-themePrimary">
    <div class="ms-landing-page__footer--left">
      <img src="../../assets/logo-filled.png" />
      <h1 class="ms-font-xl ms-fontWeight-semilight ms-fontColor-white">Git the gist</h1>
    </div>
    <div id="settings-icon" class="ms-landing-page__footer--right" aria-label="Settings" tabindex=0>
      <i class="ms-Icon enlarge ms-Icon--Settings ms-fontColor-white"></i>
    </div>
  </footer>
  <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.js"></script>
  <script type="text/javascript" src="../../node_modules/showdown/dist/showdown.min.js"></script>
  <script type="text/javascript" src="../../node_modules/urijs/src/URI.min.js"></script>
  <script type="text/javascript" src="../helpers/addin-config.js"></script>
  <script type="text/javascript" src="../helpers/gist-api.js"></script>
  <script type="text/javascript" src="taskpane.js"></script>
</body>

</html>

  2. Speichern Sie Ihre Änderungen.

Angeben des CSS für den Aufgabenbereich

  1. In dem von Ihnen erstellten Projekt wird das Aufgabenbereich-CSS in der Datei ./src/taskpane/taskpane.css angegeben. Öffnen Sie diese Datei, und ersetzen Sie den gesamten Inhalt durch den folgenden Code.

    /* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo. */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto; }

body {
  position: relative;
  font-size: 16px; }

main {
  height: 100%;
  overflow-y: auto; }

footer {
  width: 100%;
  position: relative;
  bottom: 0;
  margin-top: 10px;}

p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0; }

ul {
  padding: 0; }

#settings-prompt {
  margin: 10px 0;
}

#error-display {
  padding: 10px;
}

#insert-button {
  margin: 0 10px;
}

.clearfix {
  display: block;
  clear: both;
  height: 0; }

.pointerCursor {
  cursor: pointer; }

.invisible {
  visibility: hidden; }

.undisplayed {
  display: none; }

.ms-Icon.enlarge {
  position: relative;
  font-size: 20px;
  top: 4px; }

.ms-ListItem-secondaryText,
.ms-ListItem-tertiaryText {
  padding-left: 15px;
}

.ms-landing-page {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  height: 100%; }

.ms-landing-page__main {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-flex: 1 1 0;
          flex: 1 1 0;
  height: 100%; }

.ms-landing-page__content {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  height: 100%;
  -webkit-flex: 1 1 0;
          flex: 1 1 0;
  padding: 20px; }

.ms-landing-page__content h2 {
  margin-bottom: 20px; }

.ms-landing-page__footer {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center; }

.ms-landing-page__footer--left {
  transition: background ease 0.1s, color ease 0.1s;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
  -webkit-align-items: center;
          align-items: center;
  -webkit-flex: 1 0 0px;
          flex: 1 0 0px;
  padding: 20px; }

.ms-landing-page__footer--left:active {
  cursor: default; }

.ms-landing-page__footer--left--disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed; }

.ms-landing-page__footer--left--disabled:active, .ms-landing-page__footer--left--disabled:hover {
  background: transparent; }

.ms-landing-page__footer--left img {
  width: 40px;
  height: 40px; }

.ms-landing-page__footer--left h1 {
  -webkit-flex: 1 0 0px;
          flex: 1 0 0px;
  margin-left: 15px;
  text-align: left;
  width: auto;
  max-width: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

.ms-landing-page__footer--right {
  transition: background ease 0.1s, color ease 0.1s;
  padding: 29px 20px; }

.ms-landing-page__footer--right:active, .ms-landing-page__footer--right:hover {
  background: #005ca4;
  cursor: pointer; }

.ms-landing-page__footer--right:active {
  background: #005ca4; }

.ms-landing-page__footer--right--disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed; }

.ms-landing-page__footer--right--disabled:active, .ms-landing-page__footer--right--disabled:hover {
  background: transparent; }

  2. Speichern Sie Ihre Änderungen.

Angeben des JavaScripts für den Aufgabenbereich

  1. In dem von Ihnen erstellten Projekt wird das Aufgabenbereich-JavaScript in der Datei ./src/taskpane/taskpane.js angegeben. Öffnen Sie diese Datei, und ersetzen Sie den gesamten Inhalt durch den folgenden Code.

    (function() {
  'use strict';

  let config;
  let settingsDialog;

  Office.onReady(function() {
    $(document).ready(function() {
      config = getConfig();

      // Check if add-in is configured.
      if (config && config.gitHubUserName) {
        // If configured, load the gist list.
        loadGists(config.gitHubUserName);
      } else {
        // Not configured yet.
        $('#not-configured').show();
      }

      // When insert button is selected, build the content
      // and insert into the body.
      $('#insert-button').on('click', function() {
        const gistId = $('.ms-ListItem.is-selected').val();
        getGist(gistId, function(gist, error) {
          if (gist) {
            buildBodyContent(gist, function (content, error) {
              if (content) {
                Office.context.mailbox.item.body.setSelectedDataAsync(
                  content,
                  { coercionType: Office.CoercionType.Html },
                  function (result) {
                    if (result.status === Office.AsyncResultStatus.Failed) {
                      showError("Could not insert gist: " + result.error.message);
                    }
                  }
                );
              } else {
                showError('Could not create insertable content: ' + error);
              }
            });
          } else {
            showError('Could not retrieve gist: ' + error);
          }
        });
      });

      // When the settings icon is selected, open the settings dialog.
      $('#settings-icon').on('click', function() {
        // Display settings dialog.
        let url = new URI('dialog.html').absoluteTo(window.location).toString();
        if (config) {
          // If the add-in has already been configured, pass the existing values
          // to the dialog.
          url = url + '?gitHubUserName=' + config.gitHubUserName + '&defaultGistId=' + config.defaultGistId;
        }

        const dialogOptions = { width: 20, height: 40, displayInIframe: true };

        Office.context.ui.displayDialogAsync(url, dialogOptions, function(result) {
          settingsDialog = result.value;
          settingsDialog.addEventHandler(Office.EventType.DialogMessageReceived, receiveMessage);
          settingsDialog.addEventHandler(Office.EventType.DialogEventReceived, dialogClosed);
        });
      })
    });
  });

  function loadGists(user) {
    $('#error-display').hide();
    $('#not-configured').hide();
    $('#gist-list-container').show();

    getUserGists(user, function(gists, error) {
      if (error) {

      } else {
        $('#gist-list').empty();
        buildGistList($('#gist-list'), gists, onGistSelected);
      }
    });
  }

  function onGistSelected() {
    $('#insert-button').removeAttr('disabled');
    $('.ms-ListItem').removeClass('is-selected').removeAttr('checked');
    $(this).children('.ms-ListItem').addClass('is-selected').attr('checked', 'checked');
  }

  function showError(error) {
    $('#not-configured').hide();
    $('#gist-list-container').hide();
    $('#error-display').text(error);
    $('#error-display').show();
  }

  function receiveMessage(message) {
    config = JSON.parse(message.message);
    setConfig(config, function(result) {
      settingsDialog.close();
      settingsDialog = null;
      loadGists(config.gitHubUserName);
    });
  }

  function dialogClosed(message) {
    settingsDialog = null;
  }
})();

  2. Speichern Sie Ihre Änderungen.

Testen der Schaltfläche "Gist einfügen"

  1. Wenn der lokale Webserver noch nicht ausgeführt wird, führen Sie npm start an der Eingabeaufforderung aus.

  2. Öffnen Sie Outlook, und verfassen Sie eine neue Nachricht.

  3. Klicken Sie im Fenster zum Verfassen der Nachricht auf die Schaltfläche Insert gist. Auf der rechten Seite des Formulars zum Verfassen wird ein Aufgabenbereich angezeigt.

  4. Wählen Sie im Aufgabenbereich den Gist Hello World Html aus, und klicken Sie auf Insert, um diesen Gist in den Textkörper der Nachricht einzufügen.

Der Add-In-Aufgabenbereich und der ausgewählte Hauptinhalt, der im Nachrichtentext angezeigt wird.

Nächste Schritte

In diesem Lernprogramm haben Sie ein Outlook-Add-In erstellt, das im Modus zum Verfassen von Nachrichten verwendet werden kann, um Inhalte in den Text einer Nachricht einzufügen. Weitere Informationen zum Entwickeln von Outlook-Add-ins erhalten Sie im folgenden Artikel.

Outlook-Add-In-APIs

Codebeispiele

Siehe auch