Erstellen des ersten OneNote-Aufgabenbereich-Add-Ins

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

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

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 sehr 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.

Aktualisieren des Codes

Öffnen Sie im Code-Editor die Datei ./src/taskpane/taskpane.js, und fügen Sie den folgenden Code in die Funktion run ein. In diesem Code wird die OneNote-JavaScript-API zum Festlegen des Seitentitels und zum Hinzufügen einer Umrandung zum Textkörpers der Seite verwendet.

try {
    await OneNote.run(async context => {

        // Get the current page.
        var page = context.application.getActivePage();

        // Queue a command to set the page title.
        page.title = "Hello World";

        // Queue a command to add an outline to the page.
        var html = "<p><ol><li>Item #1</li><li>Item #2</li></ol></p>";
        page.addOutline(40, 90, html);

        // Run the queued commands, and return a promise to indicate task completion.
        return context.sync();
    });
} catch (error) {
    console.log("Error: " + error);
}

Probieren Sie es aus

  1. Navigieren Sie zum Stammordner des Projekts.

    cd "My Office Add-in"
    
  2. Starten Sie den lokalen Webserver, und laden Sie das Add-In quer.

    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. Möglicherweise müssen Sie Ihre Eingabeaufforderung oder Ihr Terminal auch 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 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
    
  3. Öffnen Sie in OneNote im Web ein Notizbuch, und erstellen Sie eine neue Seite.

  4. Wählen Sie Einfügen > Office-Add-Ins aus, um das Office-Add-Ins-Dialogfeld zu öffnen.

    • Wenn Sie mit Ihrem Consumer-Konto angemeldet sind, wählen Sie die Registerkarte Meine Add-Ins aus, und wählen Sie dann Mein Add-In hochladen aus.

    • Wenn Sie mit Ihrem Geschäfts- oder Education-Konto angemeldet sind, wählen Sie die Registerkarte Meine Add-Ins aus, und wählen Sie dann Mein Add-In hochladen aus.

    In der folgenden Abbildung ist die Registerkarte Meine Add-Ins für Consumer-Notizbücher dargestellt.

    Screenshot des Dialogfelds „Office-Add-Ins“ mit der Registerkarte „Meine Add-Ins“.

  5. Navigieren Sie im Dialogfeld „Add-In hochladen“ zur Datei manifest.xml im Projektordner, und wählen Sie Hochladen aus.

  6. Wählen Sie im Menüband der Registerkarte Start die Schaltfläche Aufgabenbereich anzeigen. Das Add-In wird in einem iFrame neben der OneNote-Seite geöffnet.

  7. Wählen Sie unten im Aufgabenbereich den Link Ausführen aus, um den Seitentitel festzulegen und eine Umrandung zum Textkörper der Seite hinzuzufügen.

    Screenshot mit dem Add-in, das aus dieser exemplarischen Vorgehensweise erstellt wurde: Menübandschaltfläche „Aufgabenbereich anzeigen“ und Aufgabenbereich in OneNote.

Nächste Schritte

Herzlichen Glückwunsch, Sie haben erfolgreich ein OneNote-Aufgabenbereich-Add-In erstellt! Erfahren Sie im nächsten Schritt mehr über die zentralen Konzepte des Erstellens von OneNote-Add-Ins.

Siehe auch