Übung – Grundlagen zu Mail-Add-Ins - Training

7 Minuten

In dieser Übung lernen Sie, wie Sie Ihr erstes Outlook-Add-In-Projekt erstellen und in den Outlook-Client laden.

Voraussetzungen

Das Entwickeln von Outlook Add-ins erfordert Outlook 2016 (oder höher) oder Outlook im Web.

Sie werden Node.js verwenden, um das benutzerdefinierte Outlook-Add-In in diesem Modul zu erstellen. Bei den Übungen in diesem Modul wird vorausgesetzt, dass die folgenden Tools auf Ihrer Entwicklerarbeitsstation installiert sind.

Wichtig

In den meisten Fällen ist die Installation der neuesten Versionen folgender Tools die beste Option. Die hier aufgeführten Versionen wurden verwendet, als dieses Modul veröffentlicht und zuletzt getestet wurde.

Node.js – (die aktive LTS- -Version)
npm (mit Node.js installiert)
Yeoman – v4.x (oder höher)
Yeoman-Generator für Microsoft Office – v1.9.5
Visual Studio Code (VS-Code) oder Ihr bevorzugter Code-Editor

Sie müssen die erforderlichen Mindestversionen dieser Voraussetzungen auf Ihrer Arbeitsstation installiert haben.

Für diese Übung benötigen Sie auch ein GitHub-Konto.

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.

Anmelden bei GitHub.
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.
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

Führen Sie den folgenden Befehl aus, um ein Add-In-Projekt mit dem Yeoman-Generator zu erstellen:
```
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:
- Projekttyp auswählen – Office-Add-in Aufgabenbereich-Projekt
- Skripttyp auswählen – JavaScript
- Wie soll Ihr Add-In heißen? – Git the gist
- Welche Office-Clientanwendung möchten Sie unterstützen? – Outlook
Nachdem Sie den Assistenten abgeschlossen haben, wechseln Sie zum Vom Generator erstellten Projektordner (Mein Office-Add-In), und installieren Sie die npm-Module, indem Sie npm install ausführen.

Tipp

Die vom Yeoman-Generator nach der Erstellung des Add-In-Projekts unter Nächste Schritte bereitgestellten Anweisungen können Sie ignorieren. Der Rest dieser Lerneinheit enthält alle Schritte, die Sie ausführen müssen.
Navigieren Sie zum Stammverzeichnis des Projekts.
```
cd "Git the gist"
```
Dieses Add-In verwendet die folgenden Bibliotheken:
- Herunterfahren-Bibliothek zum Konvertieren von Markdown in HTML
- URI.js-Bibliothek zum Erstellen von relativen URLs
- jquery-Bibliothek zum Erleichtern von DOM-Interaktionen
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 --SE
```
Öffnen Sie Ihr Projekt in VS Code oder in Ihrem bevorzugten Code-Editor.

Tipp

Unter Windows können Sie über die Befehlszeile zum Stammverzeichnis des Projekts navigieren und dann code eingeben, um diesen Ordner in VS Code zu öffnen. Unter macOS müssen Sie dem Pfad den Codebefehl hinzufügen, bevor Sie diesen Befehl verwenden können, um den Projektordner in VS Code zu öffnen.

Aktualisieren des Manifests

Das Manifest für ein Add-In beeinflusst, 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:

Suchen Sie das ProviderName-Element, und ersetzen Sie den Standardwert durch Ihren Unternehmensnamen.
```
<ProviderName>Contoso</ProviderName>
```
Suchen Sie das Description-Element, ersetzen Sie den Standardwert durch eine Beschreibung für das Add-in, 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

Auch von Ihnen erstellte Office-Add-Ins sollten HTTPS und nicht HTTP verwenden. Wenn Sie aufgefordert werden, ein Zertifikat zu installieren, nachdem Sie den folgenden Befehl 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.

Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet, und Ihr Add-In wird quergeladen.
```
npm start
```
Öffnen Sie in Outlook eine vorhandene Nachricht, und klicken Sie auf die Schaltfläche Aufgabenbereich anzeigen.
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 ordnungsgemäß eingerichtet, wird der Aufgabenbereich geöffnet, und die Willkommensseite des Add-Ins wird gerendert.

Zusammenfassung

In dieser Übung haben Sie gelernt, wie Sie Ihr erstes Outlook-Add-In-Projekt erstellen und in den Outlook-Client laden.

Testen Sie Ihr Wissen

Welche folgenden Typen von E-Mail-Add-Ins werden in Outlook unterstützt?

Add-In-Befehle und -Aktionen

Add-Ins für Modulerweiterung

Kontext-Add-Ins

Add-Ins zum Verfassen von Nachrichten

"On Send"-Add-Ins

Alle oben genannten.

Welche der folgenden Optionen sind die beiden Hauptoptionen zum Erstellen neuer Add-In-Projekte?

Visual Studio und Office Yeoman-Generator

Visual Studio und ein Office CLI Project Creator

Visual Studio und ein herunterladbares Startprojekt für Node.js-Projekte

Sie müssen alle Fragen beantworten, bevor Sie Ihre Arbeit überprüfen können.

Weiter

Übung – Grundlagen zu Mail-Add-Ins