Erstellen des ersten Project-Aufgabenbereich-Add-InsBuild your first Project task pane add-in

In diesem Artikel werden Sie schrittweise durch den Prozess der Erstellung eines Project-Aufgabenbereich-Add-Ins geführt.In this article, you'll walk through the process of building a Project task pane add-in.

VoraussetzungenPrerequisites

  • Node.js (Version 8.0.0 oder höher)Node.js (version 8.0.0 or later)

  • GitGit

  • 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:The latest version of Yeoman and the Yeoman generator for Office Add-ins. To install these tools globally, run the following command via the command prompt:

    npm install -g yo generator-office
    

    Hinweis

    Auch wenn Sie den "Bauer"-Generator bereits installiert haben, empfehlen wir, dass Sie Ihr Paket auf die neueste Version von NPM aktualisieren.Even if you've previously installed the Yeoman generator, we recommend you update your package to the latest version from npm.

  • Project 2016 oder höher unter WindowsProject 2016 or later on Windows

Erstellen des Add-InsCreate the add-in

Verwenden Sie den Yeoman-Generator, um ein Project-Add-In-Projekt zu erstellen.Use the Yeoman generator to create a Project add-in project. Führen Sie den folgenden Befehl aus, und machen Sie bei Aufforderung jeweils folgende Angaben:Run the following command and then answer the prompts as follows:

yo office
  • Wählen Sie einen Projekttyp aus: Office Add-in Task Pane projectChoose a project type: Office Add-in Task Pane project
  • Wählen Sie einen Skripttyp aus: JavascriptChoose a script type: Javascript
  • What do you want to name your add-in?What do you want to name your add-in? My Office Add-in
  • Which Office client application would you like to support?Which Office client application would you like to support? Project

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

Nach Abschluss des Assistenten erstellt der Generator erstellt das Projekt und installiert unterstützende Node-Komponenten.After you complete the wizard, the generator will create the project and install supporting Node components.

Erkunden des ProjektsExplore the project

Das Add-In-Projekt, das Sie mit dem Yeoman-Generator erstellt haben, enthält Beispielcode für ein sehr einfaches Aufgabenbereich-Add-In.The add-in project that you've created with the Yeoman generator contains sample code for a very basic task pane add-in.

  • Die ./manifest.xml-Datei im Stammverzeichnis des Projekts definiert die Einstellungen und Funktionen des Add-Ins.The ./manifest.xml file in the root directory of the project defines the settings and capabilities of the add-in.
  • Die ./src/taskpane/taskpane.html-Datei enthält das HTML-Markup für den Aufgabenbereich.The ./src/taskpane/taskpane.html file contains the HTML markup for the task pane.
  • Die ./src/taskpane/taskpane.css-Datei enthält das CSS, das auf die Inhalte im Aufgabenbereich angewendet wird.The ./src/taskpane/taskpane.css file contains the CSS that's applied to content in the task pane.
  • Die ./src/taskpane/taskpane.js-Datei enthält den Office-JavaScript-API-Code, der die Interaktion zwischen dem Aufgabenbereich und den Office-Hostanwendung erleichtert.The ./src/taskpane/taskpane.js file contains the Office JavaScript API code that facilitates interaction between the task pane and the Office host application.

Aktualisieren des CodesUpdate the code

Öffnen Sie im Code-Editor die Datei ./src/taskpane/taskpane.js, und fügen Sie den folgenden Code in die Funktion run ein.In your code editor, open the file ./src/taskpane/taskpane.js and add the following code within the run function. Dieser Code verwendet die Office JavaScript-API, um die Felder Name und Notes des ausgewählten Vorgangs festzulegen.This code uses the Office JavaScript API to set the Name field and Notes field of the selected task.

var taskGuid;

// Get the GUID of the selected task
Office.context.document.getSelectedTaskAsync(
    function (result) {
        if (result.status === Office.AsyncResultStatus.Succeeded) {
            taskGuid = result.value;

            // Set the specified fields for the selected task.
            var targetFields = [Office.ProjectTaskFields.Name, Office.ProjectTaskFields.Notes];
            var fieldValues = ['New task name', 'Notes for the task.'];

            // Set the field value. If the call is successful, set the next field.
            for (var i = 0; i < targetFields.length; i++) {
                Office.context.document.setTaskFieldAsync(
                    taskGuid,
                    targetFields[i],
                    fieldValues[i],
                    function (result) {
                        if (result.status === Office.AsyncResultStatus.Succeeded) {
                            i++;
                        }
                        else {
                            var err = result.error;
                            console.log(err.name + ' ' + err.code + ' ' + err.message);
                        }
                    }
                );
            }
        } else {
            var err = result.error;
            console.log(err.name + ' ' + err.code + ' ' + err.message);
        }
    }
);

Probieren Sie es ausTry it out

  1. Navigieren Sie zum Stammordner des Projekts.Navigate to the root folder of the project.

    cd "My Office Add-in"
    
  2. Starten Sie den lokalen Webserver.Start the local web server and sideload your add-in.

    Hinweis

    Auch von Ihnen erstellte Office-Add-Ins sollten HTTPS und nicht HTTP verwenden.Office Add-ins should use HTTPS, not HTTP, even when you are developing. Wenn Sie aufgefordert werden, ein Zertifikat zu installieren, nachdem Sie den folgenden Befehl ausgeführt haben, akzeptieren Sie die Eingabeaufforderung, um das Zertifikat zu installieren, das der Yeoman-Generator bereitstellt.If you are prompted to install a certificate after you run one of the following commands, accept the prompt to install the certificate that the Yeoman generator provides.

    Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus.Run the following command in the root directory of your project. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet.When you run this command, the local web server will start.

    npm start
    
  3. Erstellen Sie einen einfachen Projektplan in Project.In Project, create a simple project plan.

  4. Laden Sie das Add-In anhand der Anweisungen unter Querladen von Office-Add-Ins unter Windows in Project.Load your add-in in Project by following the instructions in Sideload Office Add-ins on Windows.

  5. Wählen Sie einen einzelnen Vorgang innerhalb des Projekts aus.Select a single task within the project.

  6. 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.At the bottom of the task pane, choose the Run link to rename the selected task and add notes to the selected task.

    Screenshot der Project-Anwendung mit geladenem Aufgabenbereich-Add-In.

Nächste SchritteNext steps

Herzlichen Glückwunsch, Sie haben erfolgreich ein Project-Aufgabenbereich-Add-In erstellt!Congratulations, you've successfully created a Project task pane add-in! Als Nächstes erfahren Sie mehr über die Funktionen von Project-Add-Ins und erkunden Codebeispiele für gängige Szenarien.Next, learn more about the capabilities of a Project add-in and explore common scenarios.