Microsoft Office gilt mit 85% Marktanteil als die meistgenutzte Office-Software von Büromitarbeitern (stand 2020 – Statista) . Mit der Entwicklung von Add-Ins können Microsoft Office Produkte um selbst definierte Funktionalitäten erweitert werden und von einem großen potenziellen Nutzerkreis profitieren. Besonders Web Add-Ins erfreuen sich dabei großer Beliebtheit, da sie im Gegensatz zu COM / VSTO Add-Ins vollständig im Browser laufen und somit Cross-Plattform fähig sind.
In diesem Artikel wird skizziert, wie der Einstieg in die Office Web Add-In Entwicklung aussehen kann. Referenzen und Screenshots stammen aus einem dafür veröffentlichten beispielhaften Web Add-In auf GitHub . Dieses erweitert Microsoft Outlook um eine Funktionalität, die den Inhalt von langen Mails in 1-20 Sätzen zusammenfasst. Dazu wurden die Azure Cognitive Services integriert, sowie der derzeit in der Beta befindliche Text Summarization Service .
Ein Web Add-In besteht aus zwei Kernelementen. Das erste Element ist eine Webanwendung, welche die Oberflächen und Funktionalitäten des Add-Ins bereitstellt. Für die Interaktion mit Office Elementen, wie zum Beispiel Mails, Kalendereinträgen oder Dokumenten, dient die JavaScript API für Office .
Das zweite Kernelement stellt das XML-Manifest dar. In diesem befinden sich Konfigurationen, Eigenschaften und Richtlinien, die bestimmen, wie und wann das Add-In geladen werden soll. So wird unter anderem angegeben, wann das Add-In gestartet werden kann – beispielsweise wenn eine Mail geöffnet ist. Zudem ist im Manifest die URI zu der Webanwendung hinterlegt. Diese wird beim Starten des Add-Ins als iFrame (Office Web) oder WebView (Office Mobile) geladen und angezeigt.
Bevor mit dem Aufsetzen des Projekts begonnen wird, kann es sinnvoll sein, mit wenig Aufwand einen Prototyp zu bauen und die Office JavaScript API zu erkunden. Dafür wird das frei verfügbare Add-In Script Lab genutzt. Mit diesem können die ersten Funktionalitäten und User Interfaces direkt in Office getestet werden.
Im Folgenden ist dazu ein Beispiel veranschaulicht. In diesem wird für das genannten Anwendungsszenario geprüft, ob Textinhalte aus Outlook extrahiert werden können. Dafür wird das Add-In Script Lab geladen und aktiviert (1). Anhand eines simplen Skripts (2) kann mit einem Klick auf einen Button (3) der Inhalt einer Mail (4) ausgelesen. Dieser wird anschließend in die Konsole (5) geschrieben. Ergänzend dazu ist ein simples User Interface (6) aufgebaut.
Anders als beim Prototyping mit Script Lab ist für die eigentliche Entwicklung des Web Add-Ins der initiale Aufbau des Projekts und die Auswahl von Technologien sowie Werkzeugen notwendig. Für die Webanwendung kann dabei auf gängige Mittel der Webentwicklung zurückgegriffen werden. Unterstützung beim Aufbau des Projekts bietet der Generator Yeoman . Mit diesem lässt sich mit wenig Aufwand ein vorkonfiguriertes Web Add-In Projekt erzeugen. Im nachfolgenden Bild wurde ein Outlook Add-In unter Verwendung von React und TypeScript generiert.
Nach der Generierung kann mit dem Befehl npm i und npm run start die Anwendung gestartet und debugged werden. Dabei wird das Manifest in Office registriert, um somit die Webanwendung per Sideloading
(Querladen – Beziehen von Anwendungen aus nicht verifizierten Quellen) zugänglich zu machen. Anschließend werden die notwendigen Zertifikate registriert und Microsoft Outlook geöffnet. Das Web Add-In kann nun in Outlook getestet werden.
Da es sich bei dem Web Add-In um eine Webanwendung handelt, ist diese auch klassisch im Browser einsehbar. Durch den fehlenden Office Kontext im Browser, können dort die Office JavaScript APIs wie etwa zum Auslesen des Inhalts einer Mail jedoch nicht ausgeführt werden. Das Testen von Office spezifischen Funktionalitäten ist im Browser somit nicht möglich, das Designen und Testen des User Interface hingegen schon.
Für die Gestaltung von UI und UX hat Microsoft klare Vorgaben. Besonders relevant ist dies im Abnahmeprozess für die Veröffentlichung eines Add-Ins im Microsoft Store. Hinsichtlich des Designs empfiehlt sich die Verwendung von FluentUI . Dieses bietet eine Sammlung von Werkzeugen und Komponenten, die sich optisch nahtlos in die Welt von Office 365 integrieren lassen. Des Weiteren werden UX Best Practices und Design Pattern vorgegeben, die für die Add-In Entwicklung relevant sind. Ein Beispiel dafür ist die nachfolgend abgebildete „First Run Experience“ .
Wie zu Beginn des Artikels erwähnt, sind bei der Entwicklung von Web Add-Ins nahezu keine Grenzen gegenüber der Entwicklung einer standalone Webanwendung gesetzt. In dem für diesen Artikel vorbereiteten Add-In wird einerseits die Office JavaScript API genutzt, um die Inhalte einer Mail auszulesen. Andererseits wird die Anwendung um externe Funktionalitäten angereichert. In diesem Fall wird dabei der ausgelesen Mailinhalt innerhalb der Webanwendung an Azure Functions übergeben. Anschließend wird der Text anhand von Azure Cognitive Services analysiert, zusammengefasst und das Ergebnis in Outlook dargestellt.
Das hier dargestellte Beispiel ist sehr minimalistisch gehalten. Es sollte jedoch erkennbar sein, dass dem Funktionalitätsumfang bei der Entwicklung von Office Web Add-Ins nahezu keine Grenzen gesetzt sind: Das automatische Anzeigen von Wortdefinition in einem Word Dokument, das Umrechnen von Währungen in Excel oder eine Integration in die eigene Systemlandschaft – es gibt zahllose Anwendungsszenarien, die Sie nun in Ihrem ersten eigenen Web Add-In umsetzen können.
Microsoft Office gilt mit 85% Marktanteil als die meistgenutzte Office Software von Büromitarbeitern. Office Web Add-Ins bieten zahlreiche Einsatzmöglichkeiten und sind Cross-Plattform fähig. Im Kern besteht ein Web Add-In aus einer Webanwendung und einem XML-Manifest. Für die Entwicklung können moderne Technologien und Werkzeuge herangezogen werden, die auch in der klassischen Webentwicklung als Standard gelten. Durch die Nutzung der Office JavaScript API ist die Interkation mit Office Elementen wie Dokumenten, Mails, Kalendereinträgen und weiteren möglich. Dem potenziellen Funktionalitätsumfang sind nahezu keine Grenzen gesetzt, da beliebige Services angesprochen und integriert werden können.
Autor des Beitrags
Während seiner Ausbildung zum Industriekaufmann bemerkte Samuel als Jugendlicher, dass ihn die Funktionsweise von Computern und Systemen mehr interessierte als deren Nutzung als Endanwender. Also begann er autodidaktisch die erste Programmiersprache …
Wir sind ein Software-Unternehmen mit Hauptsitz in Karlsruhe und auf die Umsetzung von Digitalstrategien durch vernetzte Cloud-Anwendungen spezialisiert. Wir sind Microsoft-Partner und erweitern Standard-Anwendungen bei Bedarf – egal ob Modernisierung, Integration, Implementierung von CRM- oder ERP-Systemen, Cloud Security oder Identity- und Access-Management: Wir unterstützen Sie!
Mehr über uns
Selim Dag
Mit unserem Newsletter informieren wir Sie stets über die neuesten Blogbeiträge,
Webcasts und weiteren spannenden Themen rund um die Digitalisierung.
