Erstellen eines Excel-Aufgabenbereich-Add-Ins

In diesem Artikel werden Sie schrittweise durch den Prozess der Erstellung eines Excel-Aufgabenbereich-Add-Ins geführt.

Erstellen des Add-Ins

Für die Erstellung von Office-Add-Ins können Sie den Yeoman-Generator für Office-Add-Ins oder Visual Studio verwenden. Der Yeoman-Generator erstellt ein Node.js-Projekt, das mit Visual Studio Code oder einem beliebigen anderen Editor verwaltet werden kann, während Visual Studio eine Visual Studio-Lösung erstellt. Wählen Sie die Registerkarte für die Option aus, die Sie verwenden möchten und folgen Sie den Anweisungen, um das Add-In zu erstellen und lokal zu testen.

Yeoman-Generator

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.

Erstellen des Add-In-Projekts

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:

• Wählen Sie einen Projekttyp aus:Office Add-in Task Pane project
• Wählen Sie einen Skripttyp aus:Javascript
• Wie möchten Sie Ihr Add-In benennen?My Office Add-in
• Welche Office-Clientanwendung möchten Sie unterstützen?Excel

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.

Erkunden des Projekts

Das Add-In-Projekt, das Sie mit dem Yeoman-Generator erstellt haben, enthält Beispielcode für ein einfaches Aufgabenbereich-Add-In. Wenn Sie die Komponenten Ihres Add-In-Projekts untersuchen möchten, öffnen Sie das Projekt in Ihrem Codeeditor, und überprüfen Sie die unten aufgeführten Dateien. Wenn Sie bereit sind, das Add-In zu testen, fahren Sie mit dem nächsten Abschnitt fort.

• Die ./manifest.xml-Datei im Stammverzeichnis des Projekts definiert die Einstellungen und Funktionen des Add-Ins.
• Die ./src/taskpane/taskpane.html-Datei enthält das HTML-Markup für den Aufgabenbereich.
• Die ./src/taskpane/taskpane.css-Datei enthält das CSS, das auf die Inhalte im Aufgabenbereich angewendet wird.
• Die ./src/taskpane/taskpane.js-Datei enthält den Office-JavaScript-API-Code, der die Interaktion zwischen dem Aufgabenbereich und der Office-Clientanwendung erleichtert.

Probieren Sie es aus

1. Navigieren Sie zum Stammordner des Projekts.

   cd "My Office Add-in"
   

2. Führen Sie die folgenden Schritte aus, um den lokalen Webserver zu starten und das Add-In querzuladen.

   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.

   Tipp

   Wenn Sie Ihr Add-In auf einem Mac testen, führen Sie den folgenden Befehl aus, bevor Sie fortfahren. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet.

   npm run dev-server
   

   • Führen Sie zum Testen Ihres Add-Ins in Excel den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Dadurch wird der lokale Webserver gestartet und Excel mit geladenem Add-In geöffnet.

     npm start
     

   • Führen Sie zum Testen Ihres Add-Ins in Excel in einem Browser den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet. Ersetzen Sie „{url}“ durch die URL eines Excel-Dokuments auf Ihrem OneDrive oder einer SharePoint-Bibliothek, für die Sie über Berechtigungen verfügen.

     Hinweis

     Wenn Sie auf einem Mac entwickeln, schließen Sie die {url} in einfache Anführungszeichen ein. Tun Sie dies nicht unter Windows.

     npm run start:web -- --document {url}
     

     Es folgen einige Beispiele.

     • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
     • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
     • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

     Wenn Ihr Add-In das Dokument nicht querladen wird, laden Sie es manuell quer, indem Sie die Anweisungen unter Manuelles Querladen von Add-Ins in Office im Web befolgen.

3. Wählen Sie in Excel die Registerkarte Start und dann die Schaltfläche Aufgabenbereich anzeigen im Menüband aus, um den Add-In-Aufgabenbereich zu öffnen.

   

4. Wählen Sie einen beliebigen Zellbereich im Arbeitsblatt.

5. Wählen Sie am unteren Rand des Aufgabenbereichs den Link Ausführen, um die Farbe für den ausgewählten Bereich auf Gelb festzulegen.

   

Nächste Schritte

Herzlichen Glückwunsch, Sie haben erfolgreich ein Excel-Aufgabenbereich-Add-In erstellt. Erfahren Sie als Nächstes mehr über die Funktionen eines Excel-Add-Ins, und erstellen Sie ein komplexeres Add-In mithilfe des Lernprogramms zum Excel-Add-In.

Visual Studio

Voraussetzungen

• Visual Studio 2019 oder höher mit installierter Office/SharePoint-Entwicklungsumgebung.

  Hinweis

  Wenn Sie Visual Studio bereits installiert haben, verwenden Sie das Visual Studio-Installationsprogramm, um sicherzustellen, dass die Office/SharePoint-Entwicklungsumgebung installiert ist.

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

Erstellen des Add-In-Projekts

1. Wählen Sie in Visual Studio Neues Projekt erstellen.

2. Geben Sie Add-In in das Suchfeld ein. Wählen Sie Excel-Web-Add-In und dann Weiter aus.

3. Benennen Sie Ihr Projekt ExcelWebAddIn1, und wählen Sie Erstellen aus.

4. Wählen Sie im Dialogfenster Office-Add-In erstellen die Option Excel neue Funktionen hinzufügen aus, und wählen Sie dann Fertig stellen aus, um das Projekt zu erstellen.

5. Visual Studio erstellt eine Lösung, und die beiden zugehörigen Projekte werden im Projektmappen-Explorer angezeigt. Die Datei Home.html wird in Visual Studio geöffnet.

Erkunden der Visual Studio-Projektmappe

Wenn Sie den Assistenten abgeschlossen haben, erstellt Visual Studio eine Projektmappe, die zwei Projekte enthält.

Projekt	Beschreibung
Add-In-Projekt	Enthält nur eine XML-Manifestdatei, die alle Einstellungen enthält, die das Add-in beschreiben. Anhand dieser Einstellungen kann die Office-Anwendung ermitteln, wann das Add-In aktiviert und wann das Add-In angezeigt werden sollte. Visual Studio generiert die Inhalte dieser Datei für Sie, damit Sie das Projekt ausführen und das Add-In sofort verwenden können. Ändern Sie diese Einstellungen jederzeit, indem Sie die XML-Datei ändern.
Webanwendungsprojekt	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.

Aktualisieren des Codes

1. Home.html gibt den HTML-Code an, der im Add-In-Aufgabenbereich gerendert wird. Ersetzen Sie in Home.html das Element <body> durch den folgenden Markup-Code, und speichern Sie die Datei.

   <body class="ms-font-m ms-welcome">
       <div id="content-header">
           <div class="padding">
               <h1>Welcome</h1>
           </div>
       </div>
       <div id="content-main">
           <div class="padding">
               <p>Choose the button below to set the color of the selected range to green.</p>
               <br />
               <h3>Try it out</h3>
               <button class="ms-Button" id="set-color">Set color</button>
           </div>
       </div>
   </body>
   

2. Öffnen Sie die Datei Home.js im Stammordner des Webanwendungsprojekts. Diese Datei gibt das Skript für das Add-In an. Ersetzen Sie den gesamten Inhalt durch den folgenden Code, und speichern Sie die Datei.

   'use strict';
   
   (function () {
   
       Office.onReady(function() {
           // Office is ready
           $(document).ready(function () {
               // The document is ready
               $('#set-color').on("click", setColor);
           });
       });
   
       async function setColor() {
           await Excel.run(async (context) => {
               const range = context.workbook.getSelectedRange();
               range.format.fill.color = 'green';
   
               await context.sync();
           }).catch(function (error) {
               console.log("Error: " + error);
               if (error instanceof OfficeExtension.Error) {
                   console.log("Debug info: " + JSON.stringify(error.debugInfo));
               }
           });
       }
   })();
   

3. Öffnen Sie die Datei Home.css im Stammordner des Webanwendungsprojekts. Diese Datei gibt die benutzerdefinierten Formatvorlagen für das Add-In an. Ersetzen Sie den gesamten Inhalt durch den folgenden Code, und speichern Sie die Datei.

   #content-header {
       background: #2a8dd4;
       color: #fff;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 80px;
       overflow: hidden;
   }
   
   #content-main {
       background: #fff;
       position: fixed;
       top: 80px;
       left: 0;
       right: 0;
       bottom: 0;
       overflow: auto;
   }
   
   .padding {
       padding: 15px;
   }
   

Aktualisieren des Manifests

1. Gehen Sie im Lösungsexplorer zum Add-In-Projekt ExcelWebAddIn1 und öffnen Sie das Verzeichnis ExcelWebAddIn1Manifest. Dieses Verzeichnis beinhaltet Ihre Manifestdatei ExcelWebAddIn1.xml. Diese XML-Manifestdatei legt die Einstellungen und Funktionen des Add-In fest. Weitere Informationen über die zwei mit Ihrer Visual Studio-Lösung erstellten Projekte finden Sie im vorherigen Abschnitt Erkunden der Visual Studio-Lösung.

2. Das ProviderName-Element weist ein Platzhalterelement auf. Ersetzen Sie dieses nur Ihren Namen.

3. Das DefaultValue-Attribut des DisplayName-Elements weist einen Platzhalter auf. Ersetzen Sie ihn durch Mein Office-Add-In.

4. Das DefaultValue-Attribut des Description-Elements weist einen Platzhalter auf. Ersetzen Sie ihn durch Ein Aufgabenbereich-Add-In für Excel.

5. Speichern Sie die Datei.

   ...
   <ProviderName>John Doe</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="A task pane add-in for Excel"/>
   ...
   

Probieren Sie es aus

1. Testen Sie mithilfe von Visual Studio das neu erstellte Excel-Add-In, indem Sie F5 drücken oder die Schaltfläche Start auswählen, um Excel mit der Im Menüband angezeigten Add-In-Schaltfläche Aufgabenbereich anzeigen zu starten. Das Add-In wird lokal auf IIS gehostet. Wenn Sie aufgefordert werden, einem Zertifikat zu vertrauen, müssen Sie dies tun, damit das Add-In eine Verbindung mit seiner Office-Anwendung herstellen kann.

2. Wählen Sie in Excel die Registerkarte Start und dann die Schaltfläche Aufgabenbereich anzeigen im Menüband aus, um den Add-In-Aufgabenbereich zu öffnen.

   

3. Wählen Sie einen beliebigen Zellbereich im Arbeitsblatt.

4. Wählen Sie im Aufgabenbereich die Füllfarbe-Schaltfläche aus, um die Farbe für den ausgewählten Bereich auf Grün festzulegen.

   

Hinweis

Zum Anzeigen der Ausgabe console.log benötigen Sie eine separate Gruppe von Entwicklertools für eine JavaScript-Konsole. Weitere Informationen zu F12-Tools und den Microsoft Edge-DevTools finden Sie unter Debuggen von Add-Ins mithilfe von Entwicklertools für Internet Explorer, Debuggen von Add-Ins mithilfe von Entwicklertools für Microsoft Edge Legacy oder Debuggen von Add-Ins mithilfe von Entwicklertools in Microsoft Edge (Chromium-basiert).

Nächste Schritte

Herzlichen Glückwunsch, Sie haben erfolgreich ein Excel-Aufgabenbereich-Add-In erstellt. Als Nächstes, weitere Informationen zum Entwickeln eines Office-Add-Ins mit Visual Studio.

Problembehandlung

• Stellen Sie sicher, dass Ihre Umgebung für die Office-Entwicklung bereit ist, indem Sie die Anweisungen unter Einrichten Ihrer Entwicklungsumgebung befolgen.

• Der automatische npm install Schritt, den Yo Office ausführt, schlägt möglicherweise fehl. Wenn beim Ausführen npm startvon Fehler angezeigt werden, navigieren Sie in einer Eingabeaufforderung zum neu erstellten Projektordner, und führen Sie manuell aus npm install. Weitere Informationen zu Yo Office finden Sie unter Erstellen von Office-Add-In-Projekten mithilfe des Yeoman-Generators.

• Wenn ihr Add-In einen Fehler anzeigt (z. B. "Dieses Add-In konnte nicht gestartet werden. Schließen Sie dieses Dialogfeld, um das Problem zu ignorieren, oder klicken Sie auf "Neu starten", um es erneut zu versuchen.) Wenn Sie F5 drücken oder Debuggen>starten in Visual Studio auswählen, finden Sie weitere Debugoptionen unter Debuggen von Office-Add-Ins in Visual Studio .

• Einige des Beispielcodes verwenden ES6-JavaScript. Dies ist nicht kompatibel mit älteren Versionen von Office, die das Trident (Internet Explorer 11)-Browsermodul verwenden. Informationen zur Unterstützung dieser Plattformen in Ihrem Add-In finden Sie unter Unterstützen älterer Microsoft-Webviews und Office-Versionen. Wenn Sie noch nicht über ein Microsoft 365-Abonnement für die Entwicklung 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.

Codebeispiele

• Excel-Add-In "Hello Welt": Erfahren Sie, wie Sie ein einfaches Office-Add-In mit nur einem Manifest, einer HTML-Webseite und einem Logo erstellen.

Siehe auch

• Office-Add-Ins-Plattformübersicht
• Entwickeln von Office-Add-Ins
• JavaScript-Objektmodell für Excel in Office-Add-Ins
• Codebeispiele zu Excel-Add-Ins
• JavaScript-API-Referenz für Excel
• Visual Studio Code zum Veröffentlichen verwenden