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

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 Sie eine First-Run-Oberfläche, die Informationen sammelt 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 Lernprogramms wünschen, besuchen Sie das Office Add-Ins-Beispielrepository auf GitHub.

Voraussetzungen

  • Node.js (die neueste Active LTS-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 FAQ. Alternativ können Sie sich für eine kostenlose 1-monatige Testversion registrieren oder einen Microsoft 365-Plan erwerben.

Setup

Das Add-In in diesem Tutorial liest Gists aus einem GitHub-Konto und fügt den ausgewählten Gist zum Nachrichtentext 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 Hallo Welt 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:

  2. Die Schritte zum Erstellen des Projekts variieren je nach Manifesttyp leicht.

    Hinweis

    Das einheitliche Manifest für Microsoft 365 ermöglicht es Ihnen, ein Office-Add-In mit einer Teams-App in einer App für Microsoft 365 als eine einzige Entwicklungs- und Bereitstellungseinheit zu kombinieren. Weitere Informationen finden Sie unter Office-Add-Ins mit dem einheitlichen Manifest. Ein Beispiel für eine App für Microsoft 365, die eine Teams-App und ein Outlook-Add-In kombiniert, finden Sie unter Rabattangebote.

    Wir freuen uns über Ihr Feedback zum einheitlichen Manifest. Wenn Sie Vorschläge haben, erstellen Sie bitte ein Problem im Repository für die Office-JavaScript-Bibliothek.

    Hinweis

    Das einheitliche Manifest für Microsoft 365 wird in Outlook für Mac derzeit nicht unterstützt. Wenn Sie Outlook für Mac verwenden, wählen Sie die Registerkarte "Manifest nur Add-In" aus, und folgen Sie stattdessen diesen Anweisungen. Weitere Informationen finden Sie unter Unterstützung für Add-Ins mit dem einheitlichen Manifest für Microsoft 365.

    • 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

    • Welches Manifest möchten Sie verwenden? - unified manifest for Microsoft 365

    Die Eingabeaufforderungen und Antworten für den Yeoman-Generator mit einheitlichen Manifest- und JavaScript-Optionen ausgewählt.

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

  3. Navigieren Sie zum Stammverzeichnis des Projekts.

    cd "Git the gist"

  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 Manifestdatei vor, um einige grundlegende Informationen über das Add-In anzugeben.

  1. Suchen Sie die "description" Eigenschaft, ersetzen Sie die Standardwerte "short" und "full" die Werte durch Beschreibungen des Add-Ins, und speichern Sie die Datei.

    "description": {
    "short": "Gets gists.",
    "full": "Allows users to access their GitHub gists."
},

  2. Speichern Sie die Datei.

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 HTTPS und nicht HTTP verwenden, auch während der Entwicklung. Wenn Sie nach dem Ausführen eines der folgenden Befehle aufgefordert werden, ein Zertifikat zu installieren, akzeptieren Sie die Aufforderung, 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.

  • Wenn Sie zum ersten Mal ein Office-Add-In auf Ihrem Computer entwickeln, werden Sie möglicherweise in der Befehlszeile aufgefordert, Microsoft Edge WebView eine Loopback-Ausnahme zu gewähren ("Allow localhost loopback for Microsoft Edge WebView?"). Wenn Sie dazu aufgefordert werden, geben Sie ein Y , um die Ausnahme zuzulassen. Beachten Sie, dass Sie Administratorrechte benötigen, um die Ausnahme zuzulassen. Nach der Genehmigung sollten Sie nicht mehr zu einer Ausnahme aufgefordert werden, wenn Sie in Zukunft Office-Add-Ins querladen (es sei denn, Sie entfernen die Ausnahme von Ihrem Computer). Weitere Informationen finden Sie unter "Wir können dieses Add-In nicht über localhost öffnen", wenn ein Office-Add-In geladen wird oder Fiddler verwendet wird.

    Die Eingabeaufforderung in der Befehlszeile, um Microsoft Edge WebView eine Loopback-Ausnahme zu gewähren.

  • Wenn Sie den Yeoman-Generator zum ersten Mal verwenden, um ein Office-Add-In zu entwickeln, öffnet Ihr Standardbrowser ein Fenster, in dem Sie aufgefordert werden, sich bei Ihrem Microsoft 365-Konto anzumelden. Wenn kein Anmeldefenster angezeigt wird und ein Querlade- oder Anmeldetimeoutfehler auftritt, führen Sie aus atk auth login m365.

  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 Sie den Yeoman-Generator zum ersten Mal verwenden, um ein Office-Add-In zu entwickeln, öffnet Ihr Standardbrowser ein Fenster, in dem Sie aufgefordert werden, sich bei Ihrem Microsoft 365-Konto anzumelden. Wenn kein Anmeldefenster angezeigt wird und ein Querlade- oder Anmeldetimeoutfehler auftritt, führen atk auth login m365 Sie es aus, bevor Sie es erneut ausführen npm start .

    • Wenn Ihr Add-In nicht automatisch quergeladen wurde, folgen Sie den Anweisungen unter Querladen von Outlook-Add-Ins zum Testen , um das Add-In manuell in Outlook 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 angezeigt.

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

  4. Wenn Sie den lokalen Webserver beenden und das Add-In deinstallieren möchten, befolgen Sie die entsprechenden Anweisungen:

    • Führen Sie den folgenden Befehl aus, um den Server anzuhalten. Falls Sie verwendet haben npm start, sollte der folgende Befehl auch das Add-In deinstallieren.

      npm stop

    • Wenn Sie das Add-In manuell quergeladen haben, lesen Sie Entfernen eines quergeladenen Add-Ins.

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:

  • Kernliste anzeigen: Eine Schaltfläche, die einen Aufgabenbereich öffnet

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

Die Vorgehensweise hängt davon ab, welches Manifest Sie verwenden.

Führen Sie die folgenden Schritte aus:

  1. Öffnen Sie die manifest.json Datei.

  2. In dem "extensions.runtimes" Array befinden sich zwei Laufzeitobjekte. Für die zweite lautet mit dem "id" von "CommandsRuntime", ändern Sie das "actions.id" in "insertDefaultGist". Dies ist der Name einer Funktion, die Sie in einem späteren Schritt erstellen. Wenn Sie fertig sind, sollte das Laufzeitobjekt wie folgt aussehen:

    {
    "id": "CommandsRuntime",
    "type": "general",
    "code": {
        "page": "https://localhost:3000/commands.html"
    },
    "actions": [
        {
            "id": "insertDefaultGist",
            "type": "executeFunction"
        }
    ]
}

  3. Ändern Sie das Element im "extensions.ribbons.contexts" Array in "mailCompose". Dies bedeutet, dass die Schaltflächen nur in einer neuen Nachricht oder einem neuen Antwortfenster angezeigt werden.

    "contexts": [
    "mailCompose"
],

  4. Das "extensions.ribbons.tabs.groups" Array enthält ein Gruppenobjekt. Nehmen Sie die folgenden Änderungen an diesem Objekt vor.

    1. Ändere die "id" Eigenschaft in "msgComposeCmdGroup".
    2. Ändere die "label" Eigenschaft in "Git the gist".

  5. Dasselbe Gruppenobjekt verfügt über ein "controls" Array mit zwei Steuerelementobjekten. Wir müssen für jeden von ihnen Änderungen am JSON vornehmen. Führen Sie im ersten Schritt die folgenden Schritte aus.

    1. Ändern Sie die "id" zu "msgComposeShowGistListTaskPane".
    2. Ändern Sie die "label" Option zu "Gist-Liste anzeigen".
    3. Ändern Sie die "supertip.title" Option zu "Gist-Liste anzeigen".
    4. Ändern Sie die "supertip.description" Option "Zeigt eine Liste Ihrer Gists an und ermöglicht es Ihnen, deren Inhalt in die aktuelle Nachricht einzufügen".

  6. Führen Sie im zweiten Kontrollobjekt die folgenden Schritte aus.

    1. Ändern Sie die "id" zu "msgComposeInsertDefaultGist".
    2. Ändern Sie das "label" in "Standardgist einfügen".
    3. Ändern Sie das "supertip.title" in "Standardgist einfügen".
    4. Ändern Sie die "supertip.description" Einstellung zu "Fügt den Inhalt des Wesentlichen, das Sie als Standard markieren, in die aktuelle Nachricht ein."
    5. Ändern Sie die "actionId" zu "insertDefaultGist". Dies entspricht dem "action.id" Wert, den "CommandsRuntime" Sie in einem früheren Schritt festgelegt haben.

    Wenn Sie fertig sind, sollte die "ribbons" Eigenschaft wie folgt aussehen:

    "ribbons": [
    {
        "contexts": [
            "mailCompose"
        ],
        "tabs": [
            {
                "builtInTabId": "TabDefault",
                "groups": [
                    {
                        "id": "msgComposeCmdGroup",
                        "label": "Git the gist",
                        "icons": [
                            {
                                "size": 16,
                                "file": "https://localhost:3000/assets/icon-16.png"
                            },
                            {
                                "size": 32,
                                "file": "https://localhost:3000/assets/icon-32.png"
                            },
                            {
                                "size": 80,
                                "file": "https://localhost:3000/assets/icon-80.png"
                            }
                        ],
                        "controls": [
                            {
                                "id": "msgComposeInsertGist",
                                "type": "button",
                                "label": "Display gist list",
                                "icons": [
                                    {
                                        "size": 16,
                                        "file": "https://localhost:3000/assets/icon-16.png"
                                    },
                                    {
                                        "size": 32,
                                        "file": "https://localhost:3000/assets/icon-32.png"
                                    },
                                    {
                                        "size": 80,
                                        "file": "https://localhost:3000/assets/icon-80.png"
                                    }
                                ],
                                "supertip": {
                                    "title": "Display gist list",
                                    "description": "Displays a list of your gists and allows you to insert their contents into the current message."
                                },
                                "actionId": "TaskPaneRuntimeShow"
                            },
                            {
                                "id": "msgComposeInsertDefaultGist",
                                "type": "button",
                                "label": "Insert default gist",
                                "icons": [
                                    {
                                        "size": 16,
                                        "file": "https://localhost:3000/assets/icon-16.png"
                                    },
                                    {
                                        "size": 32,
                                        "file": "https://localhost:3000/assets/icon-32.png"
                                    },
                                    {
                                        "size": 80,
                                        "file": "https://localhost:3000/assets/icon-80.png"
                                    }
                                ],
                                "supertip": {
                                    "title": "Insert default gist",
                                    "description": "Inserts the content of the gist you mark as default into the current message."
                                },
                                "actionId": "insertDefaultGist"
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

  7. 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 neu installiert haben, können Sie überprüfen, ob es erfolgreich installiert wurde, indem Sie nach den Befehlen " Kernliste anzeigen " und "Standardgist einfügen " in einem Fenster zum Verfassen einer Nachricht 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 im klassischen Outlook unter Windows oder in Outlook auf Mac ausführen, sollten im Menüband des Fensters "Nachricht verfassen" zwei neue Schaltflächen angezeigt werden: "Kernliste anzeigen" und "Standardinhalt einfügen".

    Die Add-In-Schaltflächen, wie sie im klassischen Outlook unter Windows angezeigt werden.

  • Wenn Sie dieses Add-In in Outlook im Web oder im neuen Outlook unter Windows ausführen, wählen Sie im Menüband des Fensters zum Verfassen von Nachrichten die Option "Apps " und dann "Git the Gist " aus, um die Optionen "Gist-Liste anzeigen " 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ü.

Tipp

Eine Anleitung, wie Sie Ihr Add-In im Menüband suchen, finden Sie unter Verwenden von Add-Ins in Outlook.

Implementieren einer ersten Ausführung

Dieses Add-In muss in der Lage sein, Gists aus einem GitHub-Konto zu lesen und den ausgewählten Standard-Gist zu identifizieren. Um diese Ziele zu erreichen, werden Sie vom Add-In aufgefordert, Ihren GitHub-Benutzernamen anzugeben und einen Standard-Gist aus Ihrer Sammlung vorhandener Gists auszuwählen. Führen Sie die Schritte in diesem Abschnitt aus, um eine Erstausführungsumgebung zu implementieren, die ein Dialogfeld anzeigt, um diese Informationen zu sammeln.

Erstellen der Benutzeroberfläche des Dialogfelds

Beginnen wir mit der Erstellung 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 in dialog.htmldas folgende Markup hinzu, um ein Basisformular mit einer Texteingabe für einen GitHub-Benutzernamen und einer leeren Liste für Gists zu definieren, die über JavaScript gefüllt wird.

    <!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://officeapis.public.onecdn.static.microsoft/1/office.js"></script>

  <!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui. -->
  <link rel="stylesheet"
    href="https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-core/11.1.0/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="../helpers/gist-api.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 erstellt.

  4. Speichern Sie Ihre Änderungen.

  5. Erstelle 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 Formatvorlagen anzugeben, die von dialog.htmlverwendet werden.

    body {
  background-color: #ffffff;
}

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 Dialogfelds

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.

    (function () {
  "use strict";

  // The onReady function must be run each time a new page is loaded.
  Office.onReady(function () {
    function initializeDialog() {
      if (window.location.search) {
        // Check if warning should be displayed.
        const warn = getParameterByName("warn");
        if (warn) {
          document.querySelector(".not-configured-warning").style.display = "block";
        } else {
          // See if the config values were passed.
          // If so, pre-populate the values.
          const user = getParameterByName("gitHubUserName");
          const gistId = getParameterByName("defaultGistId");

          document.getElementById("github-user").value = user;
          loadGists(user, function (success) {
            if (success) {
              document.querySelectorAll(".ms-ListItem").forEach(function (item) {
                item.classList.remove("is-selected");
                if (item.value === gistId) {
                  item.classList.add("is-selected");
                  item.checked = true;
                }
              });
              document.getElementById("settings-done").disabled = false;
            }
          });
        }
      }

      // When the GitHub username changes, try to load gists.
      document.getElementById("github-user").addEventListener("change", function () {
        document.getElementById("gist-list").textContent = "";
        const ghUser = document.getElementById("github-user").value;
        if (ghUser.length > 0) {
          loadGists(ghUser);
        }
      });

      // When the Done button is selected, send the values back to the caller as a serialized object.
      document.getElementById("settings-done").addEventListener("click", function () {
        const settings = {};

        settings.gitHubUserName = document.getElementById("github-user").value;

        const selectedGist = document.querySelector(".ms-ListItem.is-selected");
        if (selectedGist) {
          settings.defaultGistId = selectedGist.value;

          sendMessage(JSON.stringify(settings));
        }
      });
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", initializeDialog);
    } else {
      initializeDialog();
    }
  });

  // Load gists using the GitHub API and build the list.
  function loadGists(user, callback) {
    getUserGists(user, function (gists, error) {
      if (error) {
        document.querySelector(".gist-list-container").style.display = "none";
        document.getElementById("error-text").textContent = JSON.stringify(error, null, 2);
        document.querySelector(".error-display").style.display = "block";
        if (callback) callback(false);
      } else {
        document.querySelector(".error-display").style.display = "none";
        buildGistList(document.getElementById("gist-list"), gists, onGistSelected);
        document.querySelector(".gist-list-container").style.display = "block";
        if (callback) callback(true);
      }
    });
  }

  function onGistSelected() {
    document.querySelectorAll(".ms-ListItem").forEach(function (item) {
      item.classList.remove("is-selected");
      item.checked = false;
    });
    const selectedItem = this.querySelector(".ms-ListItem");
    selectedItem.classList.add("is-selected");
    selectedItem.checked = true;
    document.querySelector(".not-configured-warning").style.display = "none";
    document.getElementById("settings-done").disabled = false;
  }

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

  function getParameterByName(name, url) {
    return new URL(url || window.location.href).searchParams.get(name);
  }
})();

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

    Nachdem Sie dies getan haben, sieht das neue entry Objekt wie folgt 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",
},

    Nachdem Sie dies getan haben, sieht das new CopyWebpackPlugin Objekt wie folgt aus. Beachten Sie den kleinen Unterschied, wenn das Add-In das Nur-Add-In-Manifest verwendet.

    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*.*",
    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 wie folgt aus. Beachten Sie den kleinen Unterschied, wenn das Add-In das Nur-Add-In-Manifest verwendet.

    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*.*",
        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 Ihre Gists aus GitHub abzurufen, verwenden Sie die GitHub Gists API.

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

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

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

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

  fetchJson(requestUrl, callback);
}

function buildGistList(parent, gists, clickFunc) {
  gists.forEach(function (gist) {
    const listItem = document.createElement("div");
    parent.appendChild(listItem);

    const radioItem = document.createElement("input");
    radioItem.classList.add("ms-ListItem", "is-selectable");
    radioItem.type = "radio";
    radioItem.name = "gists";
    radioItem.tabIndex = 0;
    radioItem.value = gist.id;
    listItem.appendChild(radioItem);

    const descPrimary = document.createElement("span");
    descPrimary.classList.add("ms-ListItem-primaryText");
    descPrimary.textContent = gist.description;
    listItem.appendChild(descPrimary);

    const descSecondary = document.createElement("span");
    descSecondary.classList.add("ms-ListItem-secondaryText");
    descSecondary.textContent = " - " + buildFileList(gist.files);
    listItem.appendChild(descSecondary);

    const updated = new Date(gist.updated_at);

    const descTertiary = document.createElement("span");
    descTertiary.classList.add("ms-ListItem-tertiaryText");
    descTertiary.textContent = " - Last updated " + updated.toLocaleString();
    listItem.appendChild(descTertiary);

    listItem.addEventListener("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

Bei diesem Add-In handelt es sich um eine Schaltfläche ohne Benutzeroberfläche, die eine JavaScript-Funktion aufruft, anstatt wie bei vielen Add-In-Schaltflächen einen Aufgabenbereich zu öffnen. Wenn Sie die Schaltfläche Standardinhalt einfügen auswählen, ü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 Sie als Standard ausgewählt haben, und fügt ihn in den Nachrichtentext ein.

  • Wenn das Add-In noch nicht konfiguriert wurde, werden Sie im Einstellungsdialogfeld zur Eingabe eines GitHub-Benutzernamens aufgefordert.

Aktualisieren der Funktionsdatei (HTML)

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

  1. Öffne die ./src/commands/commands.html , und ersetze 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://officeapis.public.onecdn.static.microsoft/1/office.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 die Funktion insertDefaultGist der ?warn=1 Dialogfeld-URL den Parameter hinzufügt, wenn sie feststellt, dass das Add-In noch nicht konfiguriert wurde. Dadurch wird im Einstellungsdialogfeld die in ./src/settings/dialog.htmldefinierte Meldungsleiste gerendert, um Ihnen 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,
    },
    function (result) {}
  );
}

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 URL("dialog.html?warn=1", window.location.href).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 das Wesentliche HTML enthält, fügt das Add-In den HTML-Code unverändert in den Text der Nachricht ein.

    • Wenn der Kern Markdown enthält, verwendet das Add-In die GitHub Markdown-API , um 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/" + encodeURIComponent(gistId);

  fetchJson(requestUrl, callback);
}

function fetchJson(url, callback) {
  fetch(url, { headers: { Accept: "application/vnd.github+json" } })
    .then(function (response) {
      if (!response.ok) {
        throw new Error("GitHub request failed: " + response.status + " " + response.statusText);
      }
      return response.json();
    })
    .then(function (data) {
      callback(data);
    })
    .catch(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) {
        switch (file.language) {
          case "HTML":
            // Insert as is.
            callback(file.content);
            break;
          case "Markdown":
            // Use GitHub's renderer so gist Markdown matches github.com.
            fetch("https://api.github.com/markdown", {
              method: "POST",
              headers: {
                Accept: "application/vnd.github+json",
                "Content-Type": "application/json",
              },
              body: JSON.stringify({ text: file.content, mode: "gfm" }),
            })
              .then(function (response) {
                if (!response.ok) {
                  throw new Error("GitHub Markdown request failed: " + response.status + " " + response.statusText);
                }
                return response.text();
              })
              .then(function (html) {
                callback(html);
              })
              .catch(function (error) {
                callback(null, error);
              });
            break;
          default:
            // Insert contents as a <code> block.
            const codeElement = document.createElement("code");
            codeElement.textContent = file.content;
            const preElement = document.createElement("pre");
            preElement.appendChild(codeElement);
            callback(preElement.outerHTML);
        }
        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 ihn npm start über die 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. Ein Dialogfeld wird angezeigt, in dem Sie aufgefordert werden, Ihren GitHub-Benutzernamen festzulegen.

    Die Dialogaufforderung zum Konfigurieren des Add-Ins.

  4. Geben Sie im Einstellungsdialogfeld Ihren GitHub-Benutzernamen ein und klicken Sie dann entweder auf die TAB-TASTE , oder klicken Sie an einer anderen Stelle im Dialogfeld, um das Änderungsereignis aufzurufen. Durch diese Aktion wird Ihre Liste der öffentlichen Gists geladen. Wählen Sie einen Gist als Standard aus, und wählen Sie dann Fertig.

    Der Einstellungsdialog für Add-Ins.

  5. Klicken Sie erneut auf die Schaltfläche Insert Default Gist. Diesmal wird der Inhalt des Standard-Gist in den Nachrichtentext eingefügt.

    Hinweis

    Klassisches Outlook unter Windows: Um die neuesten Einstellungen zu erhalten, müssen Sie möglicherweise das Fenster zum Verfassen von Nachrichten schließen und erneut öffnen.

Implementieren eines Aufgabenbereichs

Mit der Schaltfläche "Tabellenliste anzeigen " dieses Add-Ins wird ein Aufgabenbereich geöffnet, und die zugehörigen Kerninhalte werden angezeigt. Sie können dann einen der Kerne auswählen, der in den Text der Nachricht eingefügt werden soll. Wenn Sie das Add-In noch nicht konfiguriert haben, werden Sie 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://officeapis.public.onecdn.static.microsoft/1/office.js"></script>

  <!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui. -->
  <link rel="stylesheet"
    href="https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-core/11.1.0/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="../helpers/addin-config.js"></script>
  <script type="text/javascript" src="../helpers/gist-api.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;
  background-color: #ffffff;
}

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 () {
    function initializeTaskPane() {
      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.
        document.getElementById("not-configured").style.display = "";
      }

      // When insert button is selected, build the content and insert into the body.
      document.getElementById("insert-button").addEventListener("click", function () {
        const selectedGist = document.querySelector(".ms-ListItem.is-selected");
        const gistId = selectedGist && selectedGist.value;
        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.
      document.getElementById("settings-icon").addEventListener("click", function () {
        // Display settings dialog.
        const url = new URL("dialog.html", window.location.href);
        if (config) {
          // If the add-in has already been configured, pass the existing values to the dialog.
          url.searchParams.set("gitHubUserName", config.gitHubUserName);
          url.searchParams.set("defaultGistId", config.defaultGistId);
        }

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

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

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", initializeTaskPane);
    } else {
      initializeTaskPane();
    }
  });

  function loadGists(user) {
    document.getElementById("error-display").style.display = "none";
    document.getElementById("not-configured").style.display = "none";
    document.getElementById("gist-list-container").style.display = "";

    getUserGists(user, function (gists, error) {
      if (error) {
      } else {
        const gistList = document.getElementById("gist-list");
        gistList.textContent = "";
        buildGistList(gistList, gists, onGistSelected);
      }
    });
  }

  function onGistSelected() {
    document.getElementById("insert-button").disabled = false;
    document.querySelectorAll(".ms-ListItem").forEach(function (item) {
      item.classList.remove("is-selected");
      item.checked = false;
    });
    const selectedItem = this.querySelector(".ms-ListItem");
    selectedItem.classList.add("is-selected");
    selectedItem.checked = true;
  }

  function showError(error) {
    document.getElementById("not-configured").style.display = "none";
    document.getElementById("gist-list-container").style.display = "none";
    const errorDisplay = document.getElementById("error-display");
    errorDisplay.textContent = error;
    errorDisplay.style.display = "";
  }

  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-Liste anzeigen"

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

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

  3. Wählen Sie im Fenster "Nachricht verfassen" die Schaltfläche "Kernliste anzeigen " aus. Ein Aufgabenbereich wird geöffnet.

  4. Wählen Sie im Aufgabenbereich den Gist Hallo Welt 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

  • Last updated on