Alles neu bei Apps für Office

Einführung in die Entwicklung von Office-365-Apps
Keine Kommentare

Bei der Entwicklung von Apps für Office-Anwendungen hat sich seit der Einführung von Office 365 einiges getan. Neben Vorteilen wie Plattformunabhängigkeit oder der Nutzung von Webtechnologien ergeben sich auch neue Möglichkeiten durch eine Vereinheitlichung des API.

Microsoft verändert sich. Aus dem einstmals reinen Softwarehersteller wird seit einiger Zeit ein Cloud-Dienstleister, der verschiedenste Lösungen als Software as a Service bereitstellt. Und mit Microsoft verändern sich auch die Produkte, die der Konzern anbietet. Das gilt insbesondere für die Kernprodukte, die schon seit Jahrzehnten den Erfolg des Unternehmens ausmachen.

Dazu gehört natürlich ganz besonders die altbekannte Office Suite, die mittlerweile nicht mehr nur als Desktopversion, sondern auch als Onlineabonnementkombination unter dem Namen Office 365 zur Verfügung gestellt wird.

Nach Informationen von Microsoft nutzen mittlerweile mehr als 3,5 Millionen Menschen die Office-365-Cloud sowohl in Unternehmen als auch im privaten Bereich. Wie mit jedem weiteren Office-Produkt ergeben sich auch mit dem Cloud-Service vielfältige neue Möglichkeiten für App-Entwickler. In welchem Unternehmen werden z. B. keine der unzähligen selbst geschriebenen, im Desktop-Office integrierten Anwendungen genutzt, um die Integration von Drittanbietersystemen in Office sicherzustellen? Oder so komplexe Add-ins zum Datenaustausch wie SAP-Anbindungen.

Überblick Artikelserie
1. Einführung in die Entwicklung von Office-365-Apps
— in Kürze folgen: —
2. Entwickeln von Apps für SharePoint
3. Einführung in die Office-365-REST-APIs

Bisher bedeuteten neue Office-Produkte immer, dass die bereits geschriebenen in Office integrierten Anwendungen komplett überarbeitet werden mussten. Mit dem neuen Office-SDK hingegen können diese existierenden Anwendungen auf einfache Weise mithilfe von Webtechnologien in die Cloud gebracht werden. Aber nicht nur das.

Für die Cloud geschriebene Apps integrieren sich ebenso in die Desktopclients wie auch in die mobilen Office-Apps auf Android, iOS oder Windows Phone. Die Beschäftigung mit dem Office-365-API lohnt sich also nicht nur wegen der zunehmenden Verbreitung der Cloud im Unternehmen, sondern vor allem wegen der vielfältigen aber dennoch einfachen Möglichkeiten, die sich Entwicklern eröffnen.

Im Rahmen dieser Artikelserie werde ich mich mit dem Entwickeln von Anwendungen für Office 365 unter Benutzung des neuen API beschäftigen. Um diesem umfangreichen Thema gerecht zu werden, wird die Serie aus drei Teilen bestehen:

Die Vorteile der Entwicklung von Apps mit dem Office-365-API

Das Office-365-API bietet im Wesentlichen drei Vorteile gegenüber den bisher verbreiteten Techniken der Office-Add-in-Entwicklung wie COM-Add-ins oder einfachen angepassten Ribbon-Bars:

  • Durch die Verwendung der Cloud sind die Apps skalierbar, können also an verschiedenste Anwendungsfälle und Auslastungsstufen angepasst werden.
  • Office-365-Apps können mit Tools entwickelt werden, die die meisten Webentwickler im Schlaf beherrschen. Das UI wird in HTML und CSS codiert und die Business Logic in JavaScript.
  • Und zum Schluss vielleicht das Beste: Die Apps sind plattformunabhängig. Das bedeutet tatsächlich, dass sie sowohl im Web genutzt werden können als auch auf dem Client. Einmal geschrieben integriert sich z. B. eine Word-App ohne Probleme in die Onlineversion von Word, ins fest installierte Word auf dem Rechner oder in die Office-App auf dem Mobiltelefon mit Android, iOS oder Windows Phone.

Schauen wir uns die einzelnen Punkte nacheinander an:

Skalierbarkeit wird im Wesentlichen dadurch erreicht, dass die App in der Cloud ausgeführt wird. Dies führt dazu, dass mit unterschiedlichen Arten von Auslastungen umgegangen werden kann. Sollte sich Ihre Nutzerbasis also innerhalb von ein paar Monaten vervielfachen, stellt das kein Problem dar. Sie skalieren die Anwendung einfach hoch, den Rest erledigen die Rechenzentren von Microsoft.

Der zweite Punkt ist für die meisten Entwickler wahrscheinlich von sehr großem Interesse: Wer die klassischen Techniken der Webentwicklung, namentlich HTML/CSS/JavaScript beherrscht, dem dürfte es leicht fallen, Office-Apps zu entwickeln. Die Verwendung von standardisiertem JavaScript führt natürlich auch dazu, dass die ungezählten, beliebten und bekannten JavaScript-Frameworks wie AngularJS oder Knockout.js auch in den Office-Apps genutzt werden können. Ebenso wie Programmiersprachen, die ein Superset zu JavaScript bilden, wie z. B. Typescript.

Zusätzlich lassen sich alle API-Methoden als RESTful-Calls, also über das HTTP-Protokoll abgewickelte, statuslose Befehle, ansprechen. Das sollte Webentwicklern noch einen weiteren kleinen Produktivitätsschub geben können. Außerdem funktioniert die Authentifizierung und Berechtigungsvergabe über das altbekannte OAuth-Protokoll, wie wir im Abschnitt „Authentifizierung und Berechtigungen“ sehen werden. Für Webentwickler sind die vom Office-API genutzten Technologien also alles alte Bekannte.

Der wahrscheinlich interessanteste Punkt heißt „Write once, run anywhere“. Eine einmal geschriebene App kann ohne Probleme sowohl im Web, auf dem Handy oder auf dem Tablet ausgeführt werden. Dabei beschränkt sich dies nicht nur auf das Windows Phone, sondern durch die Verwendung des so genannten Robust-API auch auf Android- und iOS-Geräte. Wie genau das aus Entwicklersicht funktioniert, wird im Abschnitt „Erstes Deployment“ beschrieben.

Nebenbei noch ein kleines Schmankerl: Apps können der Allgemeinheit ganz einfach im Office 365 Store zur Verfügung gestellt werden. Und der Office Store hat mittlerweile einige Millionen Downloads. Also eine gute Möglichkeit für App-Entwickler, ihre Lösungen einem großen potenziellen Kundenkreis zur Verfügung zu stellen.

Grundlagen der Entwicklung

Die Entwicklung von Applikationen für Office-Anwendungen hat sich grundlegend geändert. Wo früher COM-Add-ins oder Applikationen mithilfe von VSTO, Makros oder der Anpassung der Office-Ribbons entwickelt wurden, stellt Microsoft heute ein übergreifend nutzbares API für alle Office-Produkte bereit. Ganz besonders spannend ist dabei, dass eine App im Gegensatz zu früher keine enge Kopplung mehr zu dem Office-Produkt hat, in das sie integriert werden soll.

Das bedeutet im Endeffekt, dass eine App, die in Word läuft, genauso gut in Excel oder PowerPoint funktioniert. Dies gilt natürlich nur bis zu dem Punkt, bis wirklich programmspezifische Funktionen angesprochen werden müssen, aber die meisten Dinge wie das Schreiben oder Lesen von Daten in Tabellen oder Worddokumenten, lässt sich über ein API lösen, das für alle Office-Anwendungen gleich ist, wie wir später in einigen Beispielen sehen werden.

Ebenso ähnelt die Entwicklung von Office-Anwendungen in großem Maße der Entwicklung von SharePoint-Apps. Insbesondere SharePoint-Entwickler, die zusätzlich zu den klassischen SharePoint-Lösungen mit SharePoint-Apps Erfahrungen haben, sollten sich also recht einfach in das Office-App-Modell einarbeiten können.

Apps lassen sich auch, wie bereits kurz erwähnt, im App Store veröffentlichen. Der Entwickler kann dabei – ähnlich wie bei Veröffentlichung von Android-Apps im Play Store – die benötigten Berechtigungen definieren. In Anbetracht der zunehmenden Nutzerzahlen von Office ist die Veröffentlichung der eigenen App im Office Store sicherlich zumindest diskussionswürdig. Wie genau diese Veröffentlichung funktioniert, erfahren Sie im dritten Teil dieser Serie.

Außerdem ist interessant, dass Microsoft mit der neuen Office-2016-Version auch weiterhin die althergebrachten Arten der Apps unterstützt. Es ist also nach wie vor möglich, ganz klassisch das Ribbon der Office-Produkte anzupassen oder ein COM-Add-in zu entwickeln. Allerdings kann man dann die Vorteile der App-Entwicklung natürlich nicht nutzen.

Innerhalb von Desktop-Apps und Web-Apps werden noch einmal drei verschiedene Arten unterschieden:

  1. Task-Pane-Apps
  2. Content-Apps
  3. Mail-Apps

Diese werden direkt im nächsten Abschnitt näher erläutert.

Unsere erste App

Aber genug der Theorie. Sehen wir uns die Struktur einer Office-App an. Dafür werden wir direkt mit der Erstellung einer neuen App in Visual Studio beginnen. Navigieren Sie auf Neues Projekt, wählen in der Übersicht Office/SharePoint aus und erzeugen dann auf Basis des Projekttemplates eine neue App für Office. Es öffnet sich ein Dialog, in dem aus drei verschiedenen Möglichkeiten gewählt werden kann, um welche Art von App es sich handeln soll: eine Aufgabenbereichs-, eine Inhalts- oder eine Mail-App.

Die deutsche Bezeichnung der Aufgabenbereichs-App ist hier allerdings nicht besonders eindeutig. Diese wird im englischen als „Task Pane App“ bezeichnet und auf der rechten Seite einer beliebigen Office-Anwendung angezeigt.

Die „Inhalts“-App ist analog zu der zuvor mit englischem Namen erwähnten Content-App. Diese wird als eigenes Fenster innerhalb der jeweiligen Office-Anwendung angezeigt.

Bei der Mail-App handelt es sich um eine voll in Outlook integrierte Applikation. Sie kann kontextabhängig bei bestimmten Inhalten aktiviert werden, so z. B. wenn ein Benutzer eine Mail von einem bestimmten Absender oder mit einer bestimmten Adresse öffnet. Hier gibt es eine Vielzahl möglicher Anwendungsfälle.

Die Struktur einer Task-Pane-App

Wählen wir für unser erstes Beispiel die Task-Pane-App (Aufgabenbereich) aus und bestätigen die Auswahl mit einem Klick auf Weiter, öffnet sich ein Auswahldialog, in dem die zu unterstützenden Office-Produkte angegeben werden können. Unser erstes Beispiel soll sich nicht auf ein einziges Office-Produkt beschränken. Wählen wir deshalb alle Varianten aus.

Nachdem Visual Studio das Projekt erstellt hat, bietet sich die in Abbildung 1 sichtbare Übersicht über das Projekt.

Abb. 1: Struktur der App nach Anlage

Abb. 1: Struktur der App nach Anlage

Wer schon einmal SharePoint-Apps entwickelt hat, dem dürfte diese Struktur recht bekannt vorkommen. Es wurden automatisch zwei Projekte angelegt. Das Projekt SampleOfficeApp ist das eigentliche Office-Projekt. Wie in Abbildung 1 zu erkennen ist, enthält es nicht besonders viel Inhalt, sondern nur eine XML-Datei mit demselben Namen wie das Projekt.

Diese XML-Datei ist das App-Manifest der Applikation. In ihr werden alle Einstellungen wie Name, Versionsnummer, Icon, der URL, auf dem die App deployt werden soll, und vor allem von der App benötigte Berechtigungen festgelegt. Darüber hinaus lässt sich im Manifest einstellen, welche API-Sätze, Office-Versionen und Anwendungen konkret von der App unterstützt werden. Soll sich Ihr Projekt beispielsweise nur in Word und Excel integrieren, lässt sich das an dieser Stelle konfigurieren.

Das zweite Projekt enthält die eigentliche Logik der App. Im Ordner App sind die einzelnen HTML-Seiten, passende CSS-Dateien und Skripte in Unterordnern abgelegt. Zusätzlich existieren noch die Dateien App.css, die anwendungsweite Designeinstellungen enthält, sowie App.js, die den Einstiegspunkt für die Anwendung darstellt.

Der Ordner Content enthält weitere CSS-Dateien. Images, wie der Name schon sagt, Bilder, die in der App verwendet werden, und Skripte, alle Referenzen auf Skripte, die von der App genutzt werden sollen.

Führen Sie die App aus, öffnet sich eine Instanz eines Office-Programms mit einem an der Seite angedockten Fenster. Das sollte dann aussehen wie in Abbildung 2.

Abb. 2: Task-Pane-App nach dem ersten Start

Abb. 2: Task-Pane-App nach dem ersten Start

Sprung in den Code

Aber schauen wir uns den Code der App einmal im Detail an. Dazu navigieren Sie in die Datei Home.html, die Visual Studio bereits angelegt und mit etwas Beispielcode gefüllt hat. Dabei ist der nachfolgende Teil der wichtigste:

 <script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>

Hierbei handelt es sich um die Skriptreferenz auf das Office-API, das die Funktionen zum Zugriff auf Office-Programme zur Verfügung stellt.

Unsere Beispiel-App hat bereits jetzt – ohne unser Zutun – eine kleine Funktionalität. Bei Klick auf den integrierten Button wird der Inhalt der gerade ausgewählten Zelle in Excel bzw. der Inhalt des Cursors in anderen Office-Anwendungen, abgerufen. Die dazugehörige Funktion findet sind in der Datei Home.js. (Listing 1).

Office.initialize = function (reason) {
  $(document).ready(function () {
    app.initialize();
    $('#get-data-from-selection').click(getDataFromSelection);
  });
};

In Listing 1 ist der Initialisierer zu sehen, der für die Initialisierung der App zuständig ist und nach dem erfolgreichen Laden des Office-API die app.initialize-Methode aufruft. In der Methode getDataFromSelection wird es nun wirklich interessant. Hierbei fällt der Aufruf über das Office.Context-Objekt ins Auge. Dieses enthält alle wichtigen Basisobjekte für die App-Entwicklung.

Besonders wichtig und interessant ist bei der Task-Pane-App das document-Objekt, das im Context-Objekt integriert ist und die Zugriffe auf das Office-Dokument ermöglicht. Dabei ist es unter allen Office-Anwendungen kompatibel, sodass dieselben Methoden sowohl Daten aus Excel-, Word- oder PowerPoint-Dokumenten abrufen und verarbeiten können. Lediglich in der Microsoft-Access-App wird der Zugriff über ein etwas anders gestaltetes API geregelt, auf das im Rahmen dieses Artikels aus Platzgründen nicht eingegangen werden kann.

Das document-Objekt ist das Basisobjekt für Operationen auf Dokumente. Damit können verschiedene Informationen über das aktuell geöffnete Dokument abgerufen werden, wie zum Beispiel der aktuelle URL (Property „url„) oder Dateieinstellungen (Methode „GetFileProperties„). Die Methode getFileAsync() ruft das gesamte Dokument um Client ab und mithilfe der Methode goToByIdAsync(id) kann innerhalb des Dokuments navigiert werden.

Werte in die Datei schreiben

Aber Ihnen juckt es jetzt sicherlich schon in den Fingern, selbst ein bisschen mit dem API herumzuexperimentieren. Dann legen wir einmal los! Zunächst eine einfache Änderung. Schreiben wir doch ein wenig Text in die Datei, z. B. den bei jedem Entwickler beliebten und allseits bekannten Text „Hello Word!“.

Dazu sind lediglich drei Schritte notwendig. Als Erstes fügen wir der Datei Home.js eine Methode hinzu, wie in Listing 2 zu sehen.

function writeDataToSelection() {
  Office.context.document.setSelectedDataAsync("Hello World!");
}

Als Nächstes erweitern wir das Office.Initialize-Callback um folgende Zeile:

$('#set-data-to-selection').click(writeDataToSelection);

Und zum Abschluss wird ins HTML noch eine Zeile eingefügt:

<button id="set-data-to-selection">Schreibe Daten in die Auswahl</button>

Mit diesen einfachen Schritten haben wir Code erzeugt, der der App einen Button hinzufügt, mit dem in die jeweils selektierte Zelle ein „Hello World!“ geschrieben wird.

Bindungen

Zu einfach? Okay, probieren wir etwas Fortgeschritteneres: Ein Kernkonzept des neuen Office-API sind Bindungen. Eine Bindung stellt eine direkte Verknüpfung zwischen einem Bereich in der Office-Anwendung und Daten in der App dar. Dabei funktionieren Bindungen in beide Richtungen. Werden Daten innerhalb der App geändert, werden auch die Daten im gebundenen Bereich geändert oder umgekehrt. Dabei werden drei unterschiedliche Arten von Bindungen unterschieden:

  • Reine Textbindungen
  • Matrixbindungen
  • Tabellenbindungen

Während Textbindungen wirklich nur Texte in einen bestimmten, vorher definierten Teil der Applikation schreiben, ermöglichen Matrixbindungen das Binden von Daten, die durch zweidimensionale Arrays repräsentiert werden.

Tabellenbindungen dagegen arbeiten mit TableData-Objekten. Dabei ist es im Gegensatz zu Matrixbindungen möglich, Header darzustellen.

Zunächst einmal ein einfaches Beispiel für eine Textbindung, zu sehen in Listing 3.

function createBinding() {
  Office.context.document.bindings.addFromSelectionAsync(Office.BindingType.Text, { id: 'MyFirstBinding' });
}
function writeToBinding() {
  Office.context.document.bindings.getByIdAsync('MyFirstBinding', function (asyncResult) {
    asyncResult.value.setDataAsync("Hello World!");
  });
}
function writeDataToSelection() {
  Office.context.document.setSelectedDataAsync("Hello World!");
}

Im Endeffekt ist das Binding in Listing 3 eine recht simple Angelegenheit: Die Methode createBinding erstellt ein Binding in der jeweils ausgewählten Zelle in Excel oder an dem Ort, an dem der Cursor sich in Word befindet und gibt ihm die ID MyFirstBinding.

Die Methode writeToBinding holt sich dieses Binding über die in createBinding() festgelegte ID. Der Result-Value der Callback-Funktion enthält dabei das Binding-Objekt, in welches mit der Methode setDataAsync(„“); Daten geschrieben werden können.

Das Binding-Objekt enthält auch noch eine Methode getDataAsync(), die analog zu SetDataAsync() funktioniert und, wie der Name schon sagt, Daten zurückgibt.

Aber eine einfache Textbindung ist nicht besonders interessant. Spannender sind da schon Tabellenbindungen, die komplexe Daten darstellen können. Die Anwendungsmöglichkeiten, die sich dadurch ergeben, sind recht interessant.

So könnten zum Beispiel tabellarische Daten aus Drittsystemen wie SAP ausgelesen und in Office-Anwendungen dargestellt werden. Durch die Verwendung einer Bindung ließe sich sogar eine automatische Aktualisierung der Daten recht einfach implementieren.

Das Beispiel in Listing 4 zeigt eine einfache Tabellenbindung, zur Abwechslung aber nicht in der jeweils ausgewählten Tabellenzelle, sondern in einer komplette Excel-Tabelle mit Namen MyTable. Um diese anzulegen, reicht es, in einer Excel-Datei auf den Ribbon-Tab Einfügen zu klicken und in diesem dann den Button Tabelle auszuwählen. Dann kann der Tabelle nach der Auswahl einer Anzahl von Zeilen und Spalten noch ein Name vergeben werden:

function createBinding() {
  Office.context.document.bindings.addFromNamedItemAsync("MyTable", "table", { id: 'MyFirstBinding' });
}

function writeToBinding() {
  var gameCharacters = new Office.TableData();
  gameCharacters.headers = ["Name", "Vorname"];
  gameCharacters.rows = [["Kong", "Donkey"], ["Mario", "Super"], ["Man", "Pac"]];
  Office.context.document.bindings.getByIdAsync('MyFirstBinding', function (asyncResult) {
    asyncResult.value.setDataAsync(gameCharacters);
  });
}
function writeDataToSelection() {
  Office.context.document.setSelectedDataAsync("Hello World!");
}

Im Endeffekt handelt es sich nur um eine kleine Modifikation der in Listing 3 beschriebenen Bindung. Dabei erzeugt addFromNamedItemAsync ein Binding vom Type table aus dem Objekt mit dem Namen MyTable. In der Methode WriteToBinding ist zu sehen, dass die Inhalte einer Tabellenbindung vom Typ Office.TableData sind. Der Rest ist praktisch selbsterklärend.

Aber im Auftakt zu diesem Abschnitt habe ich von drei verschiedenen Arten von Bindungen gesprochen. Was unterscheidet also Textbindungen von Matrixbindungen? Es ist recht simpel: Tabellen haben Header und sind dynamisch erweiterbar, Matrizen nicht.

Die Eigenheiten von Content-Apps

Schauen wir uns noch eine andere Art von Apps an: die Content-App. Und damit es spannend bleibt, probieren wir mal etwas Neues aus und wählen nach der Auswahl des Projekttyps Content App beim Erstellen einer neuen Anwendung die sogenannte Document Visualization App aus: Dabei erscheint nach dem Starten der Beispiel-App mit F5 ein frei verschiebbares Fenster innerhalb des Excel-Dokuments, wie es in Abbildung 3 zu sehen ist.

Abb. 3: Content-App nach der Erstellung

Abb. 3: Content-App nach der Erstellung

Klicken Sie auf Beispieldaten einfügen, werden einige Daten eingefügt, und die App zeigt direkt eine Visualisierung der Daten an. Das sieht dann so aus wie in Abbildung 4 zu sehen.

Abb. 4: Datenvisualisierung mit der Beispiel-Content-App

Abb. 4: Datenvisualisierung mit der Beispiel-Content-App

Wenn wir uns den Code anschauen, fällt auf, dass das Template uns schon einige Arbeit abgenommen und ein paar Dinge vorbereitet hat. Dabei befindet sich die eigentlich interessante Applikationslogik, welche das oben sichtbare Diagramm zeichnet, in der Datei Visualization.js. Besonders spannend ist die Methode visualization.display. In dieser werden die in Abbildung 3 sichtbaren Bars gerendert und dargestellt.

Der Vorteil, den die Content-Apps bieten, liegt auf der Hand. Sie lassen sich frei in der jeweiligen Applikation bewegen und ermöglichen dadurch andere Anwendungsfälle als die Task-Pane-Apps.

Ausblick

Die Möglichkeiten, die sich durch das neue App-Modell von Office 365 bieten, sind sehr groß. Insbesondere die Plattformunabhängigkeit und die Nutzung von Webtechnologien zur Entwicklung von Office-Apps sind hierbei von Relevanz.

Nachdem in diesem Artikel auf Task-Pane-Apps sowie Content-Apps eingegangen wurde, würde zur Komplettierung eigentlich noch die Entwicklung einer Mail-App fehlen. Da es sich hierbei allerdings um einen Typen von Apps handelt, der sich recht stark von Content- und Task-Pane-Apps unterscheidet, verweise ich dazu auf weiterführende Informationen.

Aber die Entwicklung von Office-Apps ist nicht alles. Office 365 beinhaltet mit seinem Websites-Feature einen kompletten SharePoint-Server in der Cloud. Und das Beste: Die Entwicklung von Apps für diesen Cloud-SharePoint funktioniert nach ziemlich genau denselben Prinzipien wie die in diesem Artikel beschriebenen Office-Apps. Dies soll im nächsten Artikel Thema sein, in dem dann auch mehr Praxisbeispiele zu finden sein werden.

Aber was ist mit der Preview des Office-365-REST-API, die dazu dient, unterschiedliche Benutzer auszulesen, Dateien und Kalendereinträge aus Office 365 abzurufen oder diese zu modifizieren? Damit beschäftigen wir uns um 3. Teil dieser Artikelserie, genauso wie mit dem Deployment unserer ersten App im Office App Store oder dem Offline-Verfügbarmachen von Apps. Es bleibt also spannend.

Aufmacherbild: Businessman pressing button on touch screen von Shutterstock / Urheberrecht: Kirill Wright

 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -