Erstellen des ersten Project-Aufgabenbereich-Add-Ins

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

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 FAQ. Alternativ können Sie sich für eine kostenlose 1-monatige Testversion registrieren oder einen Microsoft 365-Plan erwerben.

• Project 2016 oder höher unter Windows

Erstellen des Add-Ins

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

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?Project

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

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.

• 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. In diesem Schnellstart legt der Code das NameFeld und Notes das Feld der ausgewählten Aufgabe eines Projekts fest.

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.

   • Wenn Sie zum ersten Mal ein Office-Add-In auf Ihrem Computer entwickeln, werden Sie möglicherweise in der Befehlszeile aufgefordert, Microsoft Edge WebView eine Loopback-Ausnahme zu gewähren ("Localhost-Loopback für Microsoft Edge WebView zulassen?"). Wenn Sie dazu aufgefordert werden, geben Sie ein Y , um die Ausnahme zuzulassen. Beachten Sie, dass Sie Administratorrechte benötigen, um die Ausnahme zuzulassen. Sobald dies zulässig ist, sollten Sie nicht zur Eingabe einer Ausnahme aufgefordert werden, wenn Sie Office-Add-Ins in Zukunft querladen (es sei denn, Sie entfernen die Ausnahme von Ihrem Computer). Weitere Informationen finden Sie unter "Wir können dieses Add-In nicht über localhost öffnen", wenn Sie ein Office-Add-In laden oder Fiddler verwenden.

     

   • Wenn Sie den Yeoman-Generator zum ersten Mal zum Entwickeln eines Office-Add-Ins verwenden, öffnet Ihr Standardbrowser ein Fenster, in dem Sie aufgefordert werden, sich bei Ihrem Microsoft 365-Konto anzumelden. Wenn kein Anmeldefenster angezeigt wird und ein Sideloading- oder Anmeldetimeoutfehler auftritt, führen Sie aus atk auth login m365.

   • Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus, um Ihr Add-In in Project zu testen. Dadurch wird der lokale Webserver gestartet und das Add-In querladen.

     npm start
     

   Wenn Ihr Add-In nicht automatisch querladen wird, befolgen Sie die Anweisungen unter Querladen von Office-Add-Ins unter Windows , um das Add-In in Project manuell querzuladen.

3. Erstellen Sie einen einfachen Projektplan in Project.

4. Wählen Sie einen einzelnen Vorgang innerhalb des Projekts aus.

5. Wählen Sie am unteren Rand des Aufgabenbereichs den Link Ausführen aus, um den ausgewählten Vorgang umzubenennen und Notizen zu diesem hinzuzufügen.

   

6. Wenn Sie den lokalen Webserver beenden und das Add-In deinstallieren möchten, befolgen Sie die entsprechenden Anweisungen:

   • Führen Sie den folgenden Befehl aus, um den Server zu beenden. Wenn Sie verwendet haben npm start, deinstalliert der folgende Befehl auch das Add-In.

     npm stop
     

   • Wenn Sie das Add-In manuell quergeladen haben, lesen Sie Entfernen eines quergeladenen Add-Ins.

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.

• Möglicherweise werden Warnungen angezeigt, die beim Ausführen npm install für den Yeoman-Generator oder das Projekt generiert werden. In den meisten Fällen können Sie diese Warnungen problemlos ignorieren. Manchmal werden Abhängigkeiten veraltet, und ihre Ersetzungen werden nicht von anderen Paketen unterstützt, von denen das Projekt abhängt. Wenn Sie diese Warnungen beheben möchten, verwenden Sie das npm-check-updates Tool.

  • Führen Sie in der Eingabeaufforderung im Stammprojektverzeichnis aus npm i -g npm-check-updates. Dadurch wird das Tool global installiert.
  • Ausführen ncu -u. Dies enthält einen Bericht über alle Pakete und auf welche Versionen sie aktualisiert werden.
  • Führen Sie aus npm install , um alle Pakete zu aktualisieren.

  Weitere Informationen zu Warnungen beim Ausführen npm installvon finden Sie unter Warnungen und Abhängigkeiten in der Node.js- und npm-Welt.

• Wenn die Add-In-Schaltfläche im Menüband nicht angezeigt wird (z. B. Aufgabenbereich anzeigen), wählen Sie auf der Registerkarte Start des Menübands die Schaltfläche Add-Ins und dann das Test-Add-In aus.

Nächste Schritte

Herzlichen Glückwunsch, Sie haben erfolgreich ein Project-Aufgabenbereich-Add-In erstellt! Als Nächstes erfahren Sie mehr über die Funktionen von Project-Add-Ins und erkunden Codebeispiele für gängige Szenarien.

Siehe auch

• Office-Add-Ins-Plattformübersicht
• Entwickeln von Office-Add-Ins
• Kernkonzepte für Office-Add-Ins
• Projekt-Add-In-Codebeispiele
• Visual Studio Code zum Veröffentlichen verwenden