blog.atwork.at

news and know-how about microsoft, technology, cloud and more.

OfficeApps entwickeln-Teil 3 Die erste Office-App

In Teil 1 und Teil 2 ging es um die Basis und um die Funktionsweise von OfficeApps und SharePointApps. Wenn diese erfüllt sind, geht es schon los und wir sehen uns hier in Teil 3 an, wie eine Office-App aufgebaut ist und wie sie funktioniert. Dazu erstellen wir ein kleines Beispiel mit Visual Studio 2012.

Office Developer Tools installieren

Für unser Beispiel sind die Microsoft Office-Entwicklertools für Visual Studio 2012 erforderlich – standardmäßig sind die Office Developer Tools in Visual Studio 2012 nur mit Templates für Microsoft Office 2010 vorhanden, daher müssen die Project Templates für Office 2013 extra installiert werden, siehe Downloads und dem Link Laden Sie die Tools herunter (engl.) unter “Tools”. Weitere Informationen siehe auch Configuring a Computer to Develop Office Solutions.

Erstellen einer OfficeApp

Zuerst wird in Visual Studio 2012 ein neues Projekt vom Typ “App for Office 2013” erstellt.
Dieser Projekttyp wurde durch die Installation der Microsoft Office Developer Tools for Visual Studio 2012 hinzugefügt.

officeapp1

Nun wird der Typ der App ausgewählt. In diesem Beispiel soll eine App in der TaskPane (siehe unten) in Office 2013 gebaut werden, dies ist auch die Vorgabe. Belassen wir also die Voreinstellungen und setzen mit Finish fort.

officeapp-2-typeofapp

Projekte einer OfficeApp

Die VS-Vorlage erstellt eine kleine App. Diese besteht aus zwei Projekten:

  • Die Office-App – das Manifest der App, bei uns OfficeApp1.xml
  • Das Webprojekt – die “eigentliche” App mit einer HTML-Seite, etwas CSS und Javascript

Die Solution sieht so aus, in dem Screenshot wird die HTML-Seite OfficeApp1.html angezeigt.

officeapp-3-new-app

Bei Ansicht von OfficeApp1.html im Design-Modus sieht man das Aussehen der “Webseite” in der Office TaskPane.

officeapp-4-taskpane

Starten wir die OfficeApp mit F5 (Run). Visual Studio öffnet ein neues Excel-File und zeigt die App in der TaskPane von Excel (rechts) an.

officeapp-5-run

Was kann die App?

Sie liest mit dem Button “Get data” die aktive Zelle aus und beschreibt diese mit dem Inhalt der Textbox mit “Set data”.

Genau diese Funktionalität benötigen wir, um auf Daten innerhalb des Office-Dokuments zugreifen zu können und um in weiterer Folge eine Funktionalität in unsere App einzubauen. Daher ist die Vorlage mit dem Beispielprojekt schon recht brauchbar.

Wie funktioniert die App?

Nun, sie funktioniert wie eine Webseite!

In OfficeApp1.html (siehe Screenshot oben) werden im <head> die benötigten Javascript-Bibliotheken geladen:

<script src="../Scripts/jquery-1.7.1.js"></script>
<script src="../Scripts/Office/1.0/MicrosoftAjax.js"></script>
<script src="../Scripts/Office/1.0/office.js"></script>
<script src="../Scripts/OfficeApp1.js"></script>

Zunächst wird die Javascript-Bibliothek jQuery geladen – für alle Web-Developer ganz klar, ein Muss für den einfachen Zugriff auf die HTML-Objekte im DOM. Danach folgen die Office-Bibliotheken, die den Zugriff auf die Office-APIs herstellen (siehe JavaScript API for Office in MSDN).

Zu unserer eigenen Webseite gehört die letzte Bibliothek OfficeApp1.js.

officeapp-6-js

Wichtig: Office.initialize muss vorhanden bleiben. Diese Event Handler Funktion muss existieren, damit die App korrekt zur Laufzeit initialisiert wird.

Im Javascript-Code passiert eigentlich gar nicht viel: Sobald jQuery geladen ist (die Funktion in $(document).ready(function () {}), werden mit $('#getDataBtn').click() Handler auf die Click-Ereignisse der Button-Objekte gesetzt. Beim Klick wird der Javascript-Code hier drinnen ausgeführt.

Die eigentliche Arbeit erfolgt dann in den setData() und getData() Funktionen, wo der Inhalt der HTML-Textbox ausgelesen oder gesetzt wird. Eigentlich logisch und einfach handzuhaben. Der Zugriff auf das Office-Dokument erfolgt über die bereitgestellten Javascript-Methoden Office.context.document.*.

Die verwendeten Methoden sind getSelectedDataAsync (reads the data contained in the current selection of the document) und setSelectedDataAsync (writes data to the current selection in the document). Beachtenswert dabei ist, dass die beiden Funktionen Callback-Parameter ausführen, sie laufen asynchron und liefern ein AsyncResult object zurück. Die setSelectedDataAsync Methode retourniert jedoch immer eine AsyncResult.value property mit dem Wert “undefined.

Wenn der Statuscode erfolgreich liefert (if (result.status === 'succeeded') {}), wird der Wert in das Dokument eingesetzt ($(elementId).val(result.value);). Das AsyncResult object  ist über document in Excel, Project und Word verfügbar. Die API-Referenz ist in MSDN in JavaScript API for Office zu finden.

Mit diesem Grundgerüst lassen sich OfficeApps mit HTML und Javascript aufbauen. Javascript-Code kann direkt in die HTML-Seite – oder besser – in die vorgesehene zugehörige .js Datei geschrieben werden, um der App Logik und Funktionalität einzuhauchen.

Debugging

Wie gewohnt, kann die OfficeApp mit den – für uns Visual Studio Developer – gewohnten Mitteln debuggt werden!

officeapp-10-debugging

Debugging ist eine Fähigkeit, die unglaublich viel Zeit spart und manchmal unerlässlich ist. Daher mein Tipp: Nutzen, wo es geht!

Start Action

Übrigens, wer sich jetzt fragt: Warum wird meine App eigentlich in Excel geöffnet?

Excel ist die Standardeinstellung für den VS-OfficeApp-Projekttyp. Welches Office-Dokument gestartet wird, ist in den Eigenschaften der OfficeApp einstellbar, in der Property Start Action. Hier kann bei unserer TaskPane-App zwischen Excel, Word, PowerPoint und Project ausgewählt werden:

officeapp-7-startaction

Unsere kleine OfficeApp funktioniert genauso unter Word…

officeapp-8-word

…und PowerPoint:

officeapp-9-powerpoint

Viel Spaß bei den ersten Versuchen mit OfficeApps!

OfficeApps Serie:

Loading