Erstellen des ersten PowerPoint-Aufgabenbereich-Add-Ins

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

Erstellen des Add-Ins

Sie können ein Office-Add-In erstellen, indem Sie denYeoman-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.

Tipp

Informationen zur Verwendung des Yeoman-Generators zum Erstellen eines Add-ins mit einmaligem Anmelden (SSO), finden Sie unter Einmaliges Anmelden (SSO) Quickstart.

Voraussetzungen

Hinweis

Wenn Sie mit Node.js oder npm nicht vertraut sind, sollten Sie damit beginnen, Ihre Entwicklungsumgebung einzurichten.

  • Node.js (die aktuellsteLTS Version)

  • 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

    Auch wenn Sie bereits den Yeoman-Generator installiert haben, empfehlen wir Ihnen, das npm-Paket auf die neueste Version zu aktualisieren.

Erstellen des 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:

  • Wählen Sie einen Projekttyp aus: Office Add-in Task Pane project
  • Wählen Sie einen Skripttyp aus: Javascript
  • Wie möchten Sie das Add-In benennen? My Office Add-in
  • Which Office client application would you like to support? PowerPoint

Screenshot mit den Eingabeaufforderungen und Antworten für den Yeoman-Generator in einer Befehlszeilenschnittstelle.

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

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. Weitere Informationen zur Datei manifest.xml finden Sie unter XML-Manifest für Office-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

    Auch von Ihnen erstellte Office-Add-Ins sollten 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.

    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 PowerPoint den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Damit wird der lokale Webserver gestartet (sofern er noch nicht ausgeführt wird), PowerPoint wird geöffnet, und das Add-In wird in PowerPoint geladen.

      npm start
      
    • Führen Sie zum Testen Ihres Add-Ins in PowerPoint in einem Browser den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet (sofern er nicht bereits ausgeführt wird).

      npm run start:web
      

      Um das Add-In zu verwenden, öffnen Sie ein neues Dokument in PowerPoint im Web, und laden Sie dann das Add-In quer, indem Sie den Anweisungen in Querladen von Office-Add-ins in Office im Web folgen.

  3. Fügen Sie in PowerPoint eine neue leere Folie ein, und wählen Sie die Registerkarte Start gefolgt von der Schaltfläche Aufgabenbereich anzeigen im Menüband, um den Add-In-Aufgabenbereich zu öffnen.

    Screenshot von PowerPoint mit hervorgehobener Schaltfläche „Aufgabenbereich anzeigen“.

  4. Wählen Sie am unteren Rand des Aufgabenbereichs den Link Ausführen, um den Text „Hallo Welt“ in die aktuelle Folie einzufügen.

    Screenshot von PowerPoint mit dem Bild eines Hundes und dem Text „Hello World“ auf der Folie.

Nächste Schritte

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

Weitere Artikel