Erstellen des ersten Outlook-Add-Ins

In diesem Artikel werden Sie schrittweise durch den Prozess der Erstellung eines Outlook-Add-In mithilfe von jQuery und der Outlook-JavaScript-API geführt.

Voraussetzungen

Wenn noch nicht geschehen, müssen Sie Yeoman und Yeoman-Generator für Office-Add-Ins global installieren.

npm install -g yo generator-office

Erstellen des Add-Ins

  1. Erstellen Sie einen Ordner auf Ihrem lokalen Laufwerk, und nennen Sie ihn my-outlook-addin. Hier erstellen Sie die Dateien für Ihr Add-In.
  2. Navigieren Sie zu Ihrem neuen Ordner.

    cd my-outlook-addin
    
  3. Verwenden Sie den Yeoman-Generator, um ein Outlook-Add-In-Projekt zu erstellen: Führen Sie den folgenden Befehl aus, und befolgen Sie anschließend die Anweisungen wie folgt:

    yo office
    
    • Möchten Sie einen neuen Unterordner für Ihr Projekt erstellen?:No
    • Wie möchten Sie das Add-In benennen?:My Office Add-in
    • Welche Office-Clientanwendung möchten Sie unterstützen?:Outlook
    • Möchten Sie ein neues Projekt erstellen?: Yes
    • Möchten Sie TypeScript verwenden?:No
    • Framework auswählen: Jquery

      Der Generator fragt Sie dann, ob Sie „resource.html“ öffnen möchten. Sie müssen die Datei für dieses Lernprogramm nicht öffnen, können dies aber gerne tun, wenn Sie neugierig sind. Wählen Sie „Ja“ oder „Nein“, um den Assistenten abzuschließen und den Generator seine Arbeit ausführen zu lassen.

      Screenshot der Aufforderungen und Antworten für den Yeoman-Generator

Aktualisieren des Codes

  1. Öffnen Sie in Ihrem Code-Editor die Datei index.html im Stammverzeichnis des Projekts. Diese Datei enthält den HTML-Code an, der im Add-In-Aufgabenbereich gerendert wird.
  2. Ersetzen Sie das Element <header> und <main> innerhalb des <body>-Elements durch den folgenden Markup-Code, und speichern Sie die Datei.

    <div class="ms-Fabric content-main">
        <h1 class="ms-font-xxl">Message properties</h1>
        <table class="ms-Table ms-Table--selectable">
            <thead>
                <tr>
                    <th>Property</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody class="prop-table"/>
        </table>
    </div>
    
  3. Öffnen Sie app.js im Stamm des Projekts, ersetzen Sie den gesamten Inhalt durch den folgenden Code, und speichern Sie die Datei.

    'use strict';
    
    (function () {
    
      // The initialize function must be run each time a new page is loaded
      Office.initialize = function (reason) {
        $(document).ready(function () {
          loadItemProps(Office.context.mailbox.item);
        });
      };
    
      function loadItemProps(item) {
        // Get the table body element
        var tbody = $('.prop-table');
    
        // Add a row to the table for each message property
        tbody.append(makeTableRow("Id", item.itemId));
        tbody.append(makeTableRow("Subject", item.subject));
        tbody.append(makeTableRow("Message Id", item.internetMessageId));
        tbody.append(makeTableRow("From", item.from.displayName + " &lt;" +
          item.from.emailAddress + "&gt;"));
      }
    
      function makeTableRow(name, value) {
        return $("<tr><td><strong>" + name + 
          "</strong></td><td class=\"prop-val\"><code>" +
          value + "</code></td></tr>");
      }
    
    })();
    
  4. Öffnen Sie app.css im Stamm des Projekts, ersetzen Sie den gesamten Inhalt durch den folgenden Code, und speichern Sie die Datei.

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    td.prop-val {
        word-break: break-all;
    }
    
    .content-main {
        margin: 10px;
    }
    

Aktualisieren des Manifests

  1. Öffnen Sie die Datei my-office-add-in-manifest.xml.
  2. Das ProviderName-Element weist ein Platzhalterelement auf. Ersetzen Sie dieses nur Ihren Namen.
  3. Das DefaultValue-Attribut des Description-Elements weist einen Platzhalter auf. Ersetzen Sie diesen durch My First Outlook Add-in.
  4. Das DefaultValue-Attribut des SupportUrl-Elements weist einen Platzhalter auf. Ersetzen Sie diesen durch https://localhost:3000.
...
<ProviderName>Jason Johnston</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
<DisplayName DefaultValue="My Office Add-in" />
<Description DefaultValue="My First Outlook Add-in"/>

<!-- Icon for your add-in. Used on installation screens and the add-ins dialog. -->
<IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png" />
<HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/hi-res-icon.png"/>

<!--If you plan to submit this add-in to the Office Store, uncomment the SupportUrl element below-->
<SupportUrl DefaultValue="https://localhost:3000" />
...

Speichern Sie die Datei.

Querladen des Manifests

Tipp

Aktuell gibt es ein Problem mit den vom Microsoft Office-Projekt-Generator generierten selbstsignierten Zertifikaten, aufgrund dessen Browser melden, dass die Add-In-Website nicht sicher ist, und das Add-In in Outlook-Clients nicht geladen wird. Das Problem besteht auch dann noch, wenn die generierten Zertifikate als vertrauenswürdig anerkannt wurden. Weitere Informationen und Problemumgehungen finden Sie unter Running add-in locally no longer works, certificate invalid auf GitHub.

  1. Stellen Sie in der Eingabeaufforderung/Shell sicher, dass Sie sich im Stammverzeichnis Ihres Projekts befinden, und geben Sie npm start ein. Dadurch wird ein Webserver unter https://localhost:3000 gestartet und Ihr Standardbrowser an dieser Adresse geöffnet.
  2. Wenn Ihr Browser angibt, dass das Websitezertifikat nicht vertrauenswürdig ist, müssen Sie das Zertifikat als vertrauenswürdiges Zertifikat hinzufügen. Outlook lädt keine Add-Ins, wenn die Website nicht vertrauenswürdig ist. Weitere Informationen finden Sie unter Hinzufügen von selbstsignierten Zertifikaten als vertrauenswürdiges Stammzertifikat.

Nachdem Ihr Browser die Add-In-Seite ohne Zertifikatfehler geladen hat, befolgen Sie die Anweisungen unter Querladen von Outlook-Add-Ins zu Testzwecken, um die Datei my-office-add-in-manifest.xml querzuladen.

Probieren Sie es aus

  1. Nachdem Sie das Manifest quergeladen haben, wählen Sie eine Nachricht in Outlook aus, oder öffnen Sie sie.
  2. Suchen Sie auf der Registerkarte Start (Registerkarte Nachricht, wenn Sie die Nachricht in einem neuen Fenster geöffnet haben), die Schaltfläche Alle Eigenschaften anzeigen des Add-Ins.

    Ein Screenshot des Nachrichtenfensters in Outlook; die Add-In-Schaltfläche ist markiert

  3. Klicken Sie auf die Schaltfläche, um den Aufgabenbereich des Add-Ins zu öffnen.

    Screenshot des Aufgabenbereichs des Add-Ins, in dem Nachrichteneigenschaften angezeigt werden.

Nächste Schritte

Herzlichen Glückwunsch, Sie haben erfolgreich Ihr erstes Outlook-Add-In erstellt! Erfahren Sie als Nächstes mehr über die Funktionen eines Outlook-Add-Ins, und erstellen Sie ein komplexeres Add-In mithilfe des fortgeschrittenen Outlook-Add-In-Lernprogramms.