Erstellen des ersten Outlook-Add-InsBuild your first Outlook add-in

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.In this article, you'll walk through the process of building an Outlook add-in by using jQuery and the Office JS API.

Erstellen des Add-InsCreate the add-in

Sie können ein Office-Add-In mithilfe von Visual Studio oder mit einem anderen beliebigen Editor erstellen.You can create an Office Add-in by using Visual Studio or any other editor. Sagen Sie uns, welchen Editor Sie gerne verwenden möchten, indem Sie eine der folgenden Registerkarten auswählen:Tell us what editor you'd like to use by choosing one of the following tabs:

VoraussetzungenPrerequisites

Erstellen des Add-In-ProjektsCreate the add-in project

  1. Wählen Sie in der Menüleiste von Visual Studio Datei > Neu > Projekt aus.On the Visual Studio menu bar, choose File > New > Project.

  2. Erweitern Sie in der Liste der Projekttypen unter Visual C# oder Visual Basic die Option Office/SharePoint, wählen Sie Add-Ins aus, und wählen Sie dann Outlook-Web-Add-In als Projekttyp aus.In the list of project types under Visual C# or Visual Basic, expand Office/SharePoint, choose Add-ins, and then choose Outlook Web Add-in as the project type.

  3. Geben Sie einen Namen für das Projekt ein, und klicken Sie dann auf OK.Name the project, and then choose OK.

  4. Visual Studio erstellt eine Projektmappe, und die beiden Projekte werden im Projektmappen-Explorer angezeigt.Visual Studio creates a solution and its two projects appear in Solution Explorer. Die MessageRead.html-Datei wird in Visual Studio geöffnet.The MessageRead.html file opens in Visual Studio.

Erkunden der Visual Studio-ProjektmappeExplore the Visual Studio solution

Wenn Sie den Assistenten abgeschlossen haben, erstellt Visual Studio eine Projektmappe, die zwei Projekte enthält.When you've completed the wizard, Visual Studio creates a solution that contains two projects.

ProjektProject BeschreibungDescription
Add-In-ProjektAdd-in project Enthält nur eine XML-Manifestdatei, die alle Einstellungen enthält, die das Add-in beschreiben.Contains only an XML manifest file, which contains all the settings that describe your add-in. Anhand dieser Einstellungen kann der Office-Host ermitteln, wann das Add-In aktiviert und wann das Add-In angezeigt werden sollte.These settings help the Office host determine when your add-in should be activated and where the add-in should appear. Visual Studio generiert die Inhalte dieser Datei für Sie, damit Sie das Projekt ausführen und das Add-In sofort verwenden können.Visual Studio generates the contents of this file for you so that you can run the project and use your add-in immediately. Sie können diese Einstellungen jederzeit ändern, indem Sie die XML-Datei bearbeiten.You change these settings any time by modifying the XML file.
WebanwendungsprojektWeb application project Enthält die Inhaltsseiten Ihres Add-Ins, darunter alle Dateien und Dateiverweise, die Sie zum Entwickeln von Office-fähigen HTML- und JavaScript-Seiten benötigen. Während Sie Ihr Add-in entwickeln, wird die Webanwendung von Visual Studio auf Ihrem lokalen IIS-Server gehostet. Sobald Sie Ihr Add-In veröffentlichen möchten, müssen Sie dieses Webanwendungsprojekt auf einem Webserver bereitstellen.Contains the content pages of your add-in, including all the files and file references that you need to develop Office-aware HTML and JavaScript pages. While you develop your add-in, Visual Studio hosts the web application on your local IIS server. When you're ready to publish the add-in, you'll need to deploy this web application project to a web server.

Aktualisieren des CodesUpdate the code

  1. MessageRead.html Diese Datei gibt den HTML-Code an, der im Add-In-Aufgabenbereich gerendert wird.MessageRead.html specifies the HTML that will be rendered in the add-in's task pane. Ersetzen Sie in MessageRead.html das Element <body> durch den folgenden Markup-Code, und speichern Sie die Datei.In MessageRead.html, replace the <body> element with the following markup and save the file.

    <body class="ms-font-m ms-welcome">
        <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>
    </body>
    
  2. Öffnen Sie die Datei MessageRead.js im Stammordner des Webanwendungsprojekts.Open the file MessageRead.js in the root of the web application project. Diese Datei gibt das Skript für das Add-In an.This file specifies the script for the add-in. Ersetzen Sie den gesamten Inhalt durch den folgenden Code, und speichern Sie die Datei.Replace the entire contents with the following code and save the file.

    '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>");
      }
    
    })();
    
  3. Öffnen Sie die Datei MessageRead.css im Stammordner des Webanwendungsprojekts.Open the file MessageRead.css in the root of the web application project. Diese Datei gibt die benutzerdefinierten Formatvorlagen für das Add-In an.This file specifies the custom styles for the add-in. Ersetzen Sie den gesamten Inhalt durch den folgenden Code, und speichern Sie die Datei.Replace the entire contents with the following code and save the file.

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

Aktualisieren des ManifestsUpdate the manifest

  1. Öffnen Sie das XML-Manifestdatei im Add-In-Projekt.Open the XML manifest file in the Add-in project. Diese Datei legt die Einstellungen und Funktionen des Add-Ins fest.This file defines the add-in's settings and capabilities.

  2. Das ProviderName-Element weist einen Platzhalterwert auf.The ProviderName element has a placeholder value. Ersetzen Sie dieses nur Ihren Namen.Replace it with your name.

  3. Das DefaultValue-Attribut des DisplayName-Elements weist einen Platzhalter auf.The DefaultValue attribute of the DisplayName element has a placeholder. Ersetzen Sie diesen durch My Office Add-in.Replace it with My Office Add-in.

  4. Das DefaultValue-Attribut des Description-Elements weist einen Platzhalter auf.The DefaultValue attribute of the Description element has a placeholder. Ersetzen Sie diesen durch My First Outlook Add-in.Replace it with My First Outlook Add-in.

  5. Speichern Sie die Datei.Save the file.

    ...
    <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"/>
    ...
    

Probieren Sie es ausTry it out

  1. Testen Sie mithilfe von Visual Studio das neu erstellte Outlook-Add-In, indem Sie F5 drücken oder die Schaltfläche Start auswählen, um Outlook im Web zu starten.Using Visual Studio, test the newly created Outlook add-in by pressing F5 or choosing the Start button to launch Outlook on the web. Das Add-In wird lokal auf IIS gehostet.The add-in will be hosted locally on IIS.

  2. Wählen Sie in Outlook im Web eine Nachricht aus, oder öffnen Sie eine Nachricht.In Outlook on the web, select or open a message.

  3. Suchen Sie in der Nachricht die Schaltfläche des Add-Ins.Within the message, locate the add-in's button.

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

  4. Klicken Sie auf die Schaltfläche, um den Aufgabenbereich des Add-Ins zu öffnen.Click the button to open the add-in's taskpane.

    Screenshot des Add-In-Aufgabenbereichs in Outlook im Web, in dem Nachrichteneigenschaften angezeigt werden

Nächste SchritteNext steps

Herzlichen Glückwunsch, Sie haben erfolgreich Ihr erstes Outlook-Add-In erstellt!Congratulations, you've successfully created your first Outlook add-in! 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.Next, learn more about the capabilities of an Outlook add-in and build a more complex add-in by following along with the Advanced Outlook add-in tutorial.