Hybrid

In einem meiner letzten Blog Beiträge hatte ich angekündigt eine App mit NAPA zu erstellen.

NAPA ist bereits eine App, die es ermöglicht einfache SharePoint 2013 Apps oder Office 2013 Apps zu erstellen. Wenn man NAPA nutzen möchte, muss man dies in einer Developer Site Collection tun. Außerdem sollte man die NAPA App anschließend im SharePoint Store suchen und in der Site Collection hinzufügen.

Nachdem man NAPA hinzugefügt hat (Add und Trust), kann man diese auch aufrufen. NAPA zeigt anschließend folgenden Dialog.

Hinweis: Sollte der Benutzer mit dem die NAPA App geöffnet wird, ein Sonderzeichen wie z.B. ein | oder Klammern-Symbol im Displaynamen haben, dann liefert Office365 einen HTTP 500 Internal Server Error zurück. Es soll ja Benutzer geben, deren Organisationskonto einen Aufbau wie “Benutzernamen | Abteilungsnamen” haben. Wenn das der Fall ist, dann sollte man sich ein Benutzerkonto anlegen, das ohne diese Zeichen auskommt.

Klickt man anschließend auf “Add New Project” kann man sich entscheiden, wofür man eine App entwickeln möchte. In unserem Fall wird es eine App für SharePoint sein.

Hier kann man noch den Projekt Namen vergeben, in meinem Fall möchte ich eine App für eine einfache Zeiterfassung erstellen. Anschließend wird der Quellcode der Default.aspx Page angezeigt.

Klickt man in der Tool-Leiste (links im Bild) auf den “Play” Button, dann wird diese App innerhalb der SiteCollection auch deployed und kann verwendet werden.

Natürlich ist diese App völlig unbrauchbar, allerdings hat sie bereits sämtlich Bestandteile, die auch bei komplexen Apps vorhanden sein müssen, damit sie auf SharePoint 2013/Office 365 deployed werden kann. Die App selbst läuft als SharePoint-hosted App und kann somit nur Logik abbilden, die in JavaScript programmiert werden kann. Dazu gehören natürlich auch Web-Service Aufrufe, die mittels JavaScript implementiert werden. Zusätzlich zur Startseite Default.aspx der App wird seitens NAPA noch ein wichtiger Bestandteil angelegt um ein App Part zu realisieren. Der Solution Tree im Folder “Pages” beinhaltet auch die Seite ClientWebPart.aspx.

Ein Client Webpart ist eigentlich ein App Part, das auf Seiten wie ein gewöhnliches Webpart positioniert werden kann. Der Unterschied zu einem Standard Webpart liegt darin, dass die gesamte Logik clientseitig abläuft, somit ist es ein Client Webpart (=App Part).

Wichtig ist dabei, der Code in der 1. Zeile:

<WebPartPages:AllowFraming runat=“server“ />

Damit ist sichergestellt, dass diese Page in einem iFrame verwendet werden kann, was absolut notwendig ist, um ein App Part auf einer Seite hinzufügen zu können. Das automatisch generierte App Part sieht dann auf einer Testpage in der Site Collection wie folgt aus.

Die Entwicklungsumgebung selbst hilft beim Entwickeln mit Syntax-Highlighting und IntelliSense, aber ein Ersatz für Visual Studio ist es nicht. Daher gibt es einen Button in der Tools Leiste, mit dem das gesamte Projekt, das ursprünglich in der Developer Site Collection angelegt wurde, lokal in Visual Studio geöffnet werden kann.

Online in der NAPA App können lediglich CSS, ASPX und JS Dateien angelegt und bearbeitet werden. Des Weiteren können Bilder, die für die App relevant sind hochgeladen werden. Leider ist es aber nicht möglich z.B. Listdefinitionen oder Listinstanzen hinzuzufügen. Daher ist es unumgänglich den Weg Richtung Visual Studio zu gehen. Im nächsten Blogbeitrag zeig ich dann wie wir diese App erweitern.