Seit Office 2013 besteht die Möglichkeit, plattformunabhängige Add-Ins für die einzelnen Produkte von Office zu entwickeln. Solche Add-Ins basieren auf HTML, CSS und JavaScript und laufen dann beispielsweise im Gegensatz zu VBA auch im Browser. Für Entwickler stellt Microsoft das Office JavaScript API bereit. Diese Schnittstelle ermöglicht Ihnen, per JavaScript auf die Funktionen von Excel, Word, PowerPoint & Co. zuzugreifen.
Die Einstiegshürde in die Entwicklung von Office JavaScript Add-Ins ist jedoch recht hoch, denn man benötigt dazu nicht nur eine passende Entwicklungsumgebung, sondern muss sich auch in eine Vielzahl an Werkzeugen und Technologien einarbeiten. Viele Einsteiger, wie zum Beispiel reine VBA-Entwickler, stehen vor dem Problem: wie und wo fange ich an? Was geht und was geht nicht? Muss ich jetzt JavaScript, HTML und CSS auf einmal lernen?
Script Lab hat sich zum Ziel gesetzt, genau diese Einstiegshürden zu minimieren und ermöglicht z.B. Prototypen eigener JavaScript-Anwendungen direkt in der Lieblingsanwendung zu erstellen und auszuführen. In Script Lab aufrufbare Beispielanwendungen laden zum Ausprobieren und Lernen ein.
In diesem Artikel werde ich Script Lab vorstellen und aufzeigen, wie man beispielsweise die Formel in einer Zelle aus einer Excel-Tabelle mit JavaScript abfragen und in Englisch übersetzen kann.
Script Lab ist übrigens Open Source und wer mag, kann dem Entwicklerteam Bugs melden oder sogar zum Projekt auf Github beitragen. Die Idee zu Script Lab ist übrigens bei einem Microsoft Garage Hackaton entstanden. Seitdem wird Script Lab von den Entwicklern Michael Zlatkovsky, Bhargav Krishna, Daniel M. Galan, Jakob Nielsen und Michael Saunders laufend weiterentwickelt. Momentan, zum Zeitpunkt der Veröffentlichung dieses Artikels, ist Script Lab nur in Englisch verfügbar.
Script Lab installieren und kennenlernen
Script Lab ist selbst ein Office Add-In und kann vom Microsoft Office Store kostenlos bezogen werden. Für Script Lab ist Office 2013 oder Office 2016 in einer Abonnement-Version notwendig, wobei Office 2016 zu präferieren ist, denn Office 2013 verwendet eine ältere Version der Office JavaScript API und stellt somit weniger Funktionen zur Verfügung.
Um Script Lab zu installieren, rufen Sie z.B. Microsoft Excel auf und navigieren Sie zum Befehl Einfügen/Add-Ins/Store. Suchen Sie anschließend nach Script Lab im Store und klicken Sie auf die Schaltfläche Hinzufügen, um das Add-In zu installieren.
Ist die Installation von Script Lab erfolgreich, wird Ihnen ein Hinweisfenster unterhalb eines neuen Eintrags im Menüband angezeigt. Das war’s auch schon – damit ist Script Lab funktionsbereit.
Die Installation von Office Add-Ins ist übrigens benutzer- und sprachbezogen. Falls sich z.B. an Ihrem Computer mehrere Personen mit jeweils einem eigenem Anmeldekonto anmelden, müssen diese die Installation von Script Lab wiederholen. Ebenso muss, falls Sie mehrere Sprachpakete bzw. Language Packs von Office installiert haben, beim Wechsel der Sprache die Installation des Add-Ins auch einmalig pro Sprache wiederholt werden.
Im Menüband-Eintrag zu Script Lab finden Sie nun einige Befehle – die beiden wichtigsten hierbei sind Code und Run. Beide Befehle öffnen jeweils einen Aufgabenbereich.
Die weiteren Befehle rufen jeweils ein Browserfenster auf und laden eine entsprechende Webseite. Dieses Browserfenster dürfte ein abgespecktes Internet-Explorer Fenster sein, wo allerdings auch die Navigationsfunktionen abgeschaltet wurden und somit z.B. die Tastenkombinationen für Zurück und Vorwärts nicht mehr funktionieren. Es empfiehlt sich meiner Ansicht nach zurzeit eher die Links zu Help, Reference Docs und Ask the Community per normalen Browser aufzurufen.
Der Aufgabenbereich Code in Script Lab
Beim erstmaligen Aufruf des Code-Fensters zeigt Script Lab eine Startseite an und lädt Sie ein, eines der Beispielscripte auszuprobieren. Bei zukünftigen Aufrufen des Code-Fensters lädt Script Lab übrigens das zuletzt bearbeitete Script in den Editor.
Die Startseite ermöglicht Ihnen zudem ein neues Script zu erstellen, eines Ihrer bereits gespeicherten Scripte aufzurufen oder ein Script aus einer externen Quelle zu importieren. Letzteres erfolgt durch die Angabe einer URL in Github oder Einfügen des Inhalts einer sogenannten YAML-Datei. Falls Sie ein neues Script via New snippet erstellen, wird eine Vorlage in den Code-Editor geladen, die ein Minimal-Script darstellt.
Beachten Sie, dass Script Lab lokal gespeicherte Scripte im Browser-Cache ablegt. Dies bedeutet auch, dass wenn der Browser-Cache gelöscht wird, auch die gespeicherten Scripte gelöscht werden. Der Hinweis dazu sollte somit auch wirklich ernst genommen werden und die Scripte, wie nachfolgend beschrieben, anderorts gesichert werden.
Um die Scripte anderorts zu sichern, könnten Sie die jeweiligen Inhalte aus den Editoren manuell z.B. als Textdateien auf Ihrer Festplatte sichern. Einfacher ist jedoch die Sicherung Ihrer Scripte bei Github. Die Scripte können dort in sogenannten Gists abgelegt werden, wobei Sie dabei die Wahl zwischen öffentlichen und privaten Gists haben. Die URL Ihres Scripts können Sie auch mit einer anderen Person teilen, die dann das Script direkt in Script Lab über die Import-Funktion importieren kann.
Momentan legt Script Lab bei jedem Hochladen auf Github ein neues Gist an. Wenn Sie somit das aktuell bearbeitete Script mehrfach auf Github hochladen, wächst die Liste der Gists stetig an. Auf Dauer kann dies bei Github etwas unübersichtlich werden. Deshalb mein Tipp: bevor Sie das Script auf Github hochladen, klicken Sie zuerst auf den Namen des Scripts, um das Dialogfenster mit den Infos zu dem Script aufzurufen. Im Kommentarfeld können Sie z.B. eine Versionnummer oder einen Zeitstempel ablegen. Der Inhalt zum Kommentarfeld wird beim Hochladen auf Github mit in das Gist übertragen. In einer zukünftigen Version von Script Lab planen die Entwickler die Neuanlage von Gists abzustellen und möglicherweise eine Versionierung einzuführen.
Sobald Sie ein Script zur Bearbeitung auswählen, wechselt der Aufgabenbereich in die Code-Ansicht, der sich ähnlich zu folgender Abbildung präsentiert.
Ein kleiner Tipp am Rande: um mehr Platz im Code-Fenster zu erhalten, docken Sie den Aufgabenbereich ab. Wenn Sie dann das Fenster deutlich vergrößern, werden die Titel einzelner Menüpunkte sichtbar.
Das Code-Fenster beinhaltet zwei Menüzeilen am oberen Rand des Fensters. In der ersten Menüzeile erreichen Sie wieder die Startseite über das Hamburger-Symbol am linken Rand. Um das aktuell aktive Script lokal zu speichern, klicken Sie auf dessen Namen. Möchten Sie das Script bei Github ablegen, klicken Sie auf Share. Mit Delete löschen Sie das Script und mit Sign in to Github melden Sie sich bei Github an, falls nicht schon geschehen. Einmal bei Github angemeldet wird Ihnen anstelle von Sign in to Github Ihr Name bei Github angezeigt.
In der zweiten Menüzeile finden Sie vier Befehle, um zwischen den im Code-Fenster integrierten Editoren zu wechseln. Der Editor unter Script dient zur Eingabe von JavaScript-Code, der Editor unter Template zur Eingabe von HTML-Code, der Editor unter Style zur Eingabe von CSS und der Editor unter Libraries zur Verlinkung externer Bibliotheken.
Alle Code-Editoren beinhalten Syntax-Highlighting und enthalten Intellisense-Funktionen, die auf den jeweiligen Inhalt des Editors abgestimmt sind. Der Editor entspricht übrigens dem Editor, der auch in Visual Studio Code verwendet wird. Dieser Editor mit dem Namen Monaco Editor ist ebenfalls ein Open Source Projekt von Microsoft.
Schließlich befinden sich am unteren Rand des Aufgabenbereichs weitere Befehle, wie z.B. das Anzeigen eines Info-Fensters mit der Versionsnummer von Script Lab oder zum Umschalten zwischen einem dunklen oder hellen Hintergrund in den Editoren.
Der Aufgabenbereich Run in Script Lab
Der Aufgabenbereich Run führt per Klick das aktuell aktive oder ein aus einer Liste auswählbares Script aus. Der Aufgabenbereich ist zweigeteilt in die HTML-Ansicht des ausgeführten Scriptes und einer Konsolenansicht zur Ausgabe von z.B. Fehlermeldungen. Über den Pfeil gelangen Sie zurück zu der Liste der gespeicherten Scripte.
Anhand der JavaScript-Anweisung console.log() können Sie Daten in der Konsolenansicht anzeigen lassen. Das können Texte, Werte, Arrays oder Objekte sein. Bei Letzteren wird eine Art Baumstruktur angezeigt. Die Konsolenansicht entspricht somit in etwa dem Direktfenster in VBA.
Sind beide Aufgabenbereiche für Code und Run aktiv bzw. sichtbar, führt jede Änderung des Codes zu einer Nachfrage im Run-Fenster, ob die Ausführung aktualisiert werden soll. Somit lässt sich der Code per Mausklick ähnlich wie in VBA direkt ausführen. Haltepunkte gibt es allerdings nicht.
In JavaScript eine Formel in Englisch übersetzen
Ok, let’s code!
Angenommen, Sie möchten die Formel einer Zelle in Englisch übersetzen. Zur Vereinfachung muss in der Beispielanwendung zunächst die Zelle manuell markiert werden und anschließend eine Schaltfläche im Run-Fenster angeklickt werden. Danach werden die Originalformel sowie dessen Übersetzung angezeigt.
Öffnen Sie Script Lab und legen Sie ein neues Script an. In der Code-Ansicht erscheint nun ein Minimal-Script. In der ersten Zeile wird in diesem Script auf einen Klick auf das Element #run reagiert und die gleichnamige Funktion aufgerufen. Das Element #run entspricht einer Schaltfläche. Wenn Sie in die Ansicht Template wechseln, finden Sie dort einen HTML-Code, der eine Schaltfläche darstellt und dessen ID run ist. Die Anweisung $() stammt aus jQuery. Um in jQuery ein HTML-Element mit einer eindeutigen ID ansprechen zu können, schreiben Sie $("#run"). Nicht zu vergessen ist hierbei die Raute.
Die Programmierung von JavaScript in Office läuft von der Denkweise etwas anders als in VBA. So sind Anweisungen in der Regel asynchron auszuführen, sodass diese die Anwendung nicht blockieren. Der try…catch Block dient zur Fehlerbehandlung. Tritt ein solcher während der Ausführung des Codes innerhalb des try-Blocks auf, springt der Code in den catch-Block. Das Schlüsselwort await bittet die asynchrone Funktion auf die nachfolgende Ausführung zu warten.
Der Zugriff auf Excel erfolgt über die Excel-JavaScript-Funktion Excel.run. Dabei wird der Kontext als Argument mit übergeben, sodass der Zugriff auf z.B. das Arbeitsblatt möglich wird. Sie können sich Excel.run auch als eine Art Batch vorstellen, innerhalb diesem dann alle Anweisungen nacheinander ausgeführt werden. Wichtig ist, dass eine Synchronization stattfindet, weshalb die Anweisung context.sync(); enthalten ist. Wenn Sie das Minimal-Script ausführen, wird Ihnen der Text Your code goes here im unteren Bereich des Aufgabenbereichs Run angezeigt. Probieren Sie es aus.
Für die Beispielanwendung zum Übersetzen einer Formel in Englisch benötigen wir nun bis zu drei Dinge:
- Etwas mehr Code, um die aktuell markierte Zelle abzurufen und zu übersetzen.
- Etwas HTML-Code, um die Originalformel und dessen Übersetzung anzuzeigen sowie eine Schaltfläche zum Ausführen, die wir aber bereits aus dem Minimalscript haben.
- Optional ein bißchen CSS, damit die Ausgabe etwas hübscher aussieht.
Fangen wir mit dem HTML-Code an: die Ausgabe soll am besten in zwei untereinanderliegenden Elementen erfolgen. Dazu ergänzen wir den HTML-Code aus dem Minimalscript um zwei Div’s, denen wir jeweils eine eindeutige ID zuweisen.
Damit die beiden Div’s etwas schöner aussehen werden, weisen wir Ihnen die CSS-Klasse anzeigefeld zu. Die CSS-Klasse definieren wir im Editor Style. CSS-Klassen werden durch den Punkt vor ihrem Namen ausgezeichnet. Wir zuvor schon erwähnt, der Editor unterstützt Sie mit kontextsensitiven Intellisense. Festgelegt wurden in der CSS-Klasse eine minimale Höhe, die Breite, einen Rand, äußere (margin) und innere (padding) Abstände, die Schriftgröße und die Textausrichtung.
Nun zum Code. Zunächst benötigen wir den im aktiven Arbeitsblatt markierten Bereich. Diesen legen wir in der Variable Range ab. Eine Variablendeklaration erfolgt mit dem Schlüsselwort let. Hierzu eine Anmerkung: Script Lab verwendet TypeScript, das eine Erweiterung von JavaScript ist und das Schreiben von Code etwas einfacher macht.
Viele der Eigenschaften und Methoden im Office JS API ähneln von ihrer Namensgebung her den bekannten Namen aus VBA. Allerdings nicht immer, für solche Fälle muss dann die Dokumentation herangezogen werden.
Nachdem der markierte Bereich in der Variable abgelegt wurde, müssen wir dem Range-Objekt noch mitteilen, welche Eigenschaften wir ansprechen wollen. Daher ist die Zeile Range.load in diesem Fall erforderlich, da ansonsten ein Fehler entstehen würde. Wir benötigen die Eigenschaften formulas und formulasLocal, die respektive eine Formel in Englisch und in der installierten Excel-Sprache darstellen.
Es erfolgt anschließend eine Synchronisation und die Ausgabe in die zwei zuvor definierten Div’s. Auch hier handelt es sich um jQuery. Zu beachten ist, dass wir nur die Formel der linken oberen Zelle des Bereichs ausgeben. Ein Bereich wird in Excel-JavaScript als zweidimensionales Array abgebildet, was dann über [n][p] angesprochen werden kann. Die Zählung beginnt übrigens bei Null.
Das war’s auch schon, bleibt das Script noch zu testen. Wenn Sie z.B. die Formel =SUMME(B1:B9;BEREICH.VERSCHIEBEN(C1;0;1;C2;1)) in die Zelle A1 schreiben, das Script ausführen, die Zelle A1 anklicken und auf den Button klicken, wird die Formel in Englisch übersetzt.
Das Script habe ich bei Github in einem öffentlichen Gist abgelegt, sodass Sie das Script direkt in Script Lab importieren können.
Excel-Formel-Übersetzer in Script Lab
Nachdem ich Script Lab installiert hatte, war mein erster Gedanke, kann es gelingen meinen Excel-Formel-Übersetzer in kurzer Zeit als Prototypen in Excel zum Laufen zu bringen? Der Excel-Formel-Übersetzer ist aktuell nur als Online-Tool auf meiner Website Excel-Translator verfügbar und schön wäre es, diesen auch direkt in Excel nutzen zu können.
Die Antwort ist recht einfach: Ja, nach einigen Tagen war tatsächlich ein funktionsfähiger Prototyp zum Excel-Formel-Übersetzer fertig.
Zwar musste ich einiges an Zeit investieren, um im Internet nach jQuery-Beispielen für dies und das zu suchen, die Dokumentation zur Office JavaScript-API zu lesen und in kleinen Schritten auszuprobieren. Und dabei häufiger die Konsole bemühen, denn die Denkweise bei der JavaScript-Entwicklung ist ja schon eine deutlich andere als bei VBA. Mit Script Lab konnte ich mich aber auf das Wesentliche konzentrieren, ohne mich z.B. erstmal mit der Kommandozeile, npm oder anderen Werkzeugen herumzuschlagen.
Ich werde auf jeden Fall das Projekt fortsetzen und Script Lab als Protoyping Werkzeug verwenden. Anschließend muss dann sicherlich noch der Umstieg auf z.B. Visual Studio erfolgen, um eine publizierbare Version vom Excel-Translator als Excel Add-In zu entwickeln.
Fazit
Mit Script Lab lassen sich recht schnell Prototypen von JavaScript Add-Ins für die einzelnen Office-Anwendungen erstellen ohne hierbei zunächst parallel eine Vielzahl an Werkzeugen erlernen zu müssen. Die Beispielscripte sind sorgfältig ausgewählt und zeigen thematisch gegliedert verschiedenste Aspekte der JavaScript-Programmierung in Office auf. Mein Tipp wäre, die Beispielscripte alle auszuprobieren und zu modifizieren.
Script Lab kann und möchte nicht Visual Studio bzw. Visual Studio Code ersetzen, was für die Entwicklung professioneller JavaScript-Add-Ins unerlässlich bleibt. Mit Script Lab erhalten jedoch Sie ein Werkzeug, wo Sie sich Stück für Stück Kenntnisse in dem Bereich aneignen und diese erweitern können.
Happy coding!
- Script Lab im Microsoft Office Store, Englisch
- Script Lab Projektseite bei Github, Englisch
- Script Lab als Microsoft Garage Projekt, Englisch
- Script Lab Video, Englisch
- Excel JavaScript API programming overview, Englisch
- SelfHTML Wiki zu HTML und CSS, Deutsch
- Beispielscript zur Übersetzung einer Formel in Englisch mit Script Lab, Deutsch
