Erstellen eines eigenständigen Office-Add-Ins aus Ihrem Script Lab-Code

Artikel
11/14/2023

Wenn Sie einen Codeausschnitt in Script Lab erstellt haben, können Sie ihn in ein eigenständiges Add-In umwandeln. Sie können den Code aus Script Lab in ein Projekt kopieren, das vom Yeoman-Generator für Office-Add-Ins (auch als "Yo Office" bezeichnet) generiert wird. Anschließend können Sie den Code als Add-In weiter entwickeln, das Sie schließlich für andere bereitstellen können.

Die Schritte in diesem Artikel beziehen sich auf Visual Studio Code, Sie können jedoch einen beliebigen Code-Editor verwenden.

Erstellen eines neuen Yo Office-Projekts

Sie müssen das eigenständige Add-In-Projekt erstellen, das der neue Entwicklungsspeicherort für Ihren Codeausschnitt ist.

Führen Sie den Befehl ausyo office --projectType taskpane --ts true --host <host> --name "my-add-in", wobei <host>einer der folgenden Werte ist.

Excel
outlook
PowerPoint
Wort

Wichtig

Der --name Argumentwert muss in doppelten Anführungszeichen stehen, auch wenn er keine Leerzeichen aufweist.

Der vorherige Befehl erstellt einen neuen Projektordner mit dem Namen my-add-in. Es ist für die Ausführung im angegebenen Host konfiguriert und verwendet TypeScript. Script Lab verwendet standardmäßig TypeScript, aber die meisten Codeausschnitte sind JavaScript. Sie können ein Yo Office JavaScript-Projekt erstellen, wenn Sie es vorziehen, aber stellen Sie sicher, dass jeder Code, den Sie kopieren, JavaScript ist.

Öffnen Des Codeausschnitts in Script Lab

Verwenden Sie einen vorhandenen Codeausschnitt in Script Lab, um zu erfahren, wie Sie einen Codeausschnitt in ein yo Office generiertes Projekt kopieren.

Öffnen Sie Office (Word, Excel, PowerPoint oder Outlook), und öffnen Sie dann Script Lab.
Wählen Sie Script Lab>Code aus. Wenn Sie in Outlook arbeiten, öffnen Sie eine E-Mail-Nachricht, um Script Lab im Menüband anzuzeigen.
Öffnen Sie den Codeausschnitt in Script Lab. Wenn Sie mit einem vorhandenen Beispiel beginnen möchten, wechseln Sie zum Aufgabenbereich Script Lab, und wählen Sie Beispiele aus.

Kopieren des Codeausschnitts in Visual Studio Code

Jetzt können Sie den Code aus dem Codeausschnitt in das Yo Office-Projekt in VS Code kopieren.

Öffnen Sie in VS Code das Projekt my-add-in .

In den nächsten Schritten kopieren Sie Code von mehreren Registerkarten in Script Lab.

Registerkarten in Script Lab.

Aufgabenbereichscode kopieren

Öffnen Sie in VS Code die Datei "/src/taskpane/taskpane.ts". Wenn Sie ein JavaScript-Projekt verwenden, lautet der Dateiname taskpane.js.
Wählen Sie in Script Lab die Registerkarte "Skript" aus.
Kopieren Sie den gesamten Code auf der Registerkarte " Skript " in die Zwischenablage. Ersetzen Sie den gesamten Inhalt von taskpane.ts (oder taskpane.js für JavaScript) durch den kopierten Code.

Kopieren des Aufgabenbereich-HTML-Codes

Öffnen Sie in VS Code die Datei "/src/taskpane/taskpane.html".
Wählen Sie in Script Lab die Registerkarte "HTML" aus.
Kopieren Sie den gesamten HTML-Code auf der Registerkarte "HTML " in die Zwischenablage. Ersetzen Sie den gesamten HTML-Code innerhalb des <body> Tags durch den kopierten HTML-Code.

Aufgabenbereich-CSS kopieren

Öffnen Sie in VS Code die Datei "/src/taskpane/taskpane.css".
Wählen Sie in Script Lab die Registerkarte "CSS" aus.
Kopieren Sie alle CSS-Dateien auf der REGISTERKARTE "CSS " in die Zwischenablage. Ersetzen Sie den gesamten Inhalt von "taskpane.css " durch das kopierte CSS.
Speichern Sie alle Änderungen an den Dateien, die Sie in den vorherigen Schritten aktualisiert haben.

Hinzufügen der jQuery-Unterstützung

Script Lab verwendet jQuery in den Codeausschnitten. Sie müssen diese Abhängigkeit zum Projekt Yo Office hinzufügen, um den Code erfolgreich ausführen zu können.

Öffnen Sie die taskpane.html Datei, und fügen Sie dem Abschnitt das <head> folgende Skripttag hinzu.
```
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.js"></script>
```
Hinweis

Die spezifische Version von jQuery kann variieren. Sie können ermitteln, welche Version Script Lab verwendet, indem Sie die Registerkarte "Bibliotheken" auswählen.

Öffnen Sie ein Terminal in VS Code, und geben Sie die folgenden Befehle ein.

npm install --save-dev jquery@3.1.1
npm install --save-dev @types/jquery@3.3.1

Wenn Sie einen Codeausschnitt mit zusätzlichen Bibliotheksabhängigkeiten erstellt haben, müssen Sie sie dem Projekt "Yo Office" hinzufügen. Suchen Sie eine Liste aller Bibliotheksabhängigkeiten auf der Registerkarte "Bibliotheken" in Script Lab.

Behandeln der Initialisierung

Script Lab übernimmt die Office.onReady Initialisierung automatisch. Sie müssen den Code ändern, um Einen eigenen Office.onReady Handler bereitzustellen.

Öffnen Sie die Datei taskpane.ts (oder taskpane.js für JavaScript).

Ersetzen Sie für Excel, PowerPoint oder Word Folgendes:

$("#run").on("click", () => tryCatch(run));

mit:

Office.onReady(function () {
  // Office is ready.
  $(document).ready(function () {
    // The document is ready.
    $("#run").on("click", () => tryCatch(run));
  });
});

Ersetzen Sie für Outlook Folgendes:

$("#get").on("click", get);
$("#set").on("click", set);
$("#save").on("click", save);

mit:

Office.onReady(function () {
  // Office is ready
  $(document).ready(function () {
    // The document is ready
    $("#get").on("click", get);
    $("#set").on("click", set);
    $("#save").on("click", save);
  });
});

Speichern Sie die Datei.

Benutzerdefinierte Funktionen

Wenn Ihr Codeausschnitt benutzerdefinierte Funktionen verwendet, müssen Sie die Vorlage "Yo Office benutzerdefinierte Funktionen" verwenden. Führen Sie die folgenden Schritte aus, um benutzerdefinierte Funktionen in ein eigenständiges Add-In umzuwandeln.

Führen Sie den Befehl yo office --projectType excel-functions --ts true --name "my-functions" aus.

Wichtig

Der --name Argumentwert muss in doppelten Anführungszeichen stehen, auch wenn er keine Leerzeichen aufweist.
Öffnen Sie Excel, und öffnen Sie dann Script Lab.
Wählen Sie Script Lab>Code aus.
Öffnen Sie den Codeausschnitt in Script Lab. Wenn Sie mit einem vorhandenen Beispiel beginnen möchten, wechseln Sie zum Aufgabenbereich Script Lab, wählen Sie Beispiele aus, und suchen Sie im Abschnitt Benutzerdefinierte Funktionen.
Öffnen Sie die Datei "/src/functions/functions.ts ". Wenn Sie ein JavaScript-Projekt verwenden, ist der Dateiname functions.js.
Wählen Sie in Script Lab die Registerkarte "Skript" aus.
Kopieren Sie den gesamten Code auf der Registerkarte " Skript " in die Zwischenablage. Fügen Sie den Code oben in functions.ts (oder functions.js für JavaScript) mit dem kopierten Code ein.
Speichern Sie die Datei.

Testen des Add-Ins

Führen Sie nach Abschluss aller Schritte Ihr eigenständiges Add-In aus, und testen Sie es. Führen Sie den folgenden Befehl aus, um zu beginnen.

npm start

Office wird gestartet, und Sie können den Aufgabenbereich für Ihr Add-In über das Menüband öffnen. Herzlichen Glückwunsch! Jetzt können Sie mit dem Erstellen Ihres Add-Ins als eigenständiges Projekt fortfahren.

Konsolenprotokollierung

Viele Codeausschnitte in Script Lab schreiben die Ausgabe in einen Konsolenabschnitt am unteren Rand des Aufgabenbereichs. Das Yo Office-Projekt verfügt nicht über einen Konsolenabschnitt. Alle console.log* Anweisungen schreiben in die standardmäßige Debugkonsole (z. B. ihre Browserentwicklertools). Wenn die Ausgabe in Den Aufgabenbereich verschoben werden soll, müssen Sie den Code aktualisieren.

Freigeben über