Bereits im November 2015 kündigte Bill Staples ein neues Mitglied in der Office 365 Familie an – PowerApps:

„PowerApps is an enterprise service for innovators everywhere to connect, create and share business apps with your team on any device in minutes. And PowerApps helps anyone in your organization unlock new business agility.”

Ich wurde im Juni 2017 mit dem Thema konfrontiert – für eine Veranstaltung sollte ein App genutzt werden, die es erlauben sollte, von einem beliebigen Endgerät Daten in SharePoint Listen einzutragen, die während der Veranstaltung dann als Referenz-Informationen herangezogen werden sollte. Die Lösung, die es uns ermöglichte, diese App in recht kurzer Zeit zu erstellen und zur Verfügung zu stellen, war Microsoft PowerApp.

Die App umfasst 3 verschiedene Bereiche, die in der App mit unterschiedlichen Lösungen umgesetzt sind:

 

• Erfassung einer Umfrage. Hier sollen die Benutzer während eines Vortrags verschiedene Fragen beantworten. Die Fragen werden aus einer Liste aus SharePoint gezogen. Die Reihenfolge der Fragen wird über ein Feld in SharePoint festgelegt. Unterfragen können weitere Erläuterungen haben. Auch die Erläuterungen werden aus einer Liste in SharePoint gezogen und zum richtigen Zeitpunkt angezeigt. Die Herausforderung hierbei war es, die Informationen in SharePoint zu finden und den richtigen Fragen zuzuordnen bzw. anzuzeigen.

 

• Nach dem ersten Durchlauf sollen die Teilnehmer am Ende der Veranstaltung die Möglichkeit haben, Ihre Antworten noch einmal zu sichten und Änderungen in der Bewertung vorzunehmen. Hierbei sollten die bestehenden Antworten nicht überschrieben werden, sondern für eine Gegenüberstellung weiterhin zur Verfügung stehen. Hieraus entstand eine zweite Erfassungsmaske – der sogenannte Ausblick:

 

• Die Teilnehmer sollen am Ende der Veranstaltung die Möglichkeit haben, über die App ihr Feedback zur Veranstaltung abzugeben. Die Ergebnisse des Feedbacks sollten in eine Liste in SharePoint zurückgeschrieben werden.

 

Ich denke, an diesen kleinen Beispielen kann man schon gut sehen, welche Möglichkeiten PowerApps bietet. Der Vorteil – die Anwendung war in wenigen Stunden erstellt, lief sowohl auf iPhone, Windows Devices und im Browser. Selbst auf einem Surface Hub konnte die Anwendung sofort ausgeführt werden.

Der Startpunkt für die Erstellung der App war die relativ gute Übersicht auf der PowerApps-Website.

Über das dort verfügbare „geführte Lernen“ findet man schnell einen ersten Einstieg in die Entwicklung von PowerApps.

Am Beispiel der Startseite möchte ich einen ersten Eindruck geben, wie einfach PowerApps zu nutzen ist.

 

Aufbau der Startseite

Nach dem Start von PowerApps bietet PowerApps an, aus den reichlich vorhandenen Beispielanwendungen zu wählen, oder aber eine neue App zu erstellen.
Wählt man hier den Punkt „Neu“, bekommt man eine erste Auswahl, mit welchen Daten man Arbeiten möchte und welches Grundlayout (das man später ändern kann) man beginnen möchte:

 

Im Start-Menü kann man einen neuen Bildschirm erstellen. Wählen Sie hierzu den Unterpunkt „Neuer Bildschirm“. Dort finden Sie auch gleich mehrere Layouts, die Sie nutzen können:

Laden Sie nun als nächstes die für die Anwendung benötigten Bilder in die PowerApp.

Wählen Sie hierzu den Menüpunkt „Datei“ und dort den Unterpunkt „Medien“ aus- Klicken Sie nun auf den Bereich „Bilder“

 

und am rechten Rand die Option „Durchsuchen“.

Wählen Sie nun das einzufügende Bild aus.

Die Bilder werden in den Medienbereich geladen.

 

Nun können Sie die Bilder auf der leeren Seite positionieren. Den passenden Eintrag hierzu finden Sie im Menüpunkt „Einfügen“.

Auf der leeren Seite wird ein Platzhalter für Ihr Bild eingefügt.

Stellen Sie sicher, dass Sie den Platzhalter für das Bild markiert haben (notfalls mit der Maus doppelt auf das Bild klicken). Es öffnet sich am rechten Rand das Eigenschaftenmenü für das Bild.

Geben Sie die Bezeichnung des Bildes in der Eingabeleiste ein (unterhalb der Menüleiste).

 

Danach habe ich noch das zweite Bild auf die erste Seite gebracht und 3 Buttons am unteren Rand eingefügt. Damit war die erste Seite schon fertig.

Für die weitere Arbeit habe ich nun eine zweite Seite eingefügt (Screen4). Da diese Seite auf Daten aus SharePoint zugreifen soll, wird als Vorlage „Formularbildschirm“ ausgewählt.

Da noch keine Datenquellen verbunden sind, wird die Seite wie folgt dargestellt:

 

Klicken Sie auf „Mit Daten verbinden“. Es öffnet sich ein kleines Fenster, das Ihnen die Möglichkeit bietet, eine Datenquelle anzubinden. Ich hatte in SharePoint eine kleine Liste erstellt, die im ersten Schritt nur ein Feld hat: Umfrage (als Ja/Nein-Feld). Dieses sollte dazu genutzt werden, um bei der Konfiguration entscheiden zu können, ob der Umfrage-Button auf der ersten Seite angezeigt werden soll oder nicht.

 

Klicken Sie auf den Eintrag „Neue Verbindung“. Es öffnet sich ein neues Fenster mit der Auswahl von möglichen Datenquellen. Fast am Ende der Liste finden Sie auch den Eintrag „SharePoint“. Wählen Sie diesen aus,

Wählen sie nun im nächsten Fenster die Option „Direkte Verbindung (Clouddienste) und klicken Sie auf „Erstellen“.

Tragen Sie im nächsten Fenster den Link zu der Website ein, in der sich die Liste befindet und klicken Sie auf „Los“.

Haben Sie den richtigen Link eingetragen, sollte die Liste im nächsten Fenster angezeigt werden. Wählen Sie die Liste aus und klicken Sie auf „Verbinden“.

Klicken Sie nun auf die Liste. Die Felder aus der Liste werden automatisch in das Formular eingetragen – sie können nun im mittleren Bereich das Layout der Seite wählen und im unteren Bereich die Felder, die dargestellt werden.

Wenn Sie den Haken vor dem Feldnamen entfernen, wird das Feld auch auf dem Formular entfernt. Durch Anklicken des Feldtyps können Sie wählen, wie das Feld dargestellt werden soll:

Wählen Sie nun die Felder, die auf der Seite angezeigt werden sollen. Für unseren ersten Versuch genügt es, das Feld „Umfrage“ als einziges Feld anzeigen zu lassen. Sie können zu einem späteren Zeitpunkt auf die Seite zurückkehren und – wenn Sie weitere Felder in der Liste PAConfig ergänzt haben – Felder zu dem Formular hinzufügen.

 Der erste „Code“

Ich hatte mir lange überlegt, wie ich die Möglichkeit, die Konfiguration der App dynamisch zu ermöglichen, diesen Punkt in die App bringen könnte, ohne eine aufwändige Benutzer-Verwaltung erstellen zu müssen. Letztendlich geht es bei PowerApps ja gerade darum, schnell und einfach ans Ziel zu kommen. Ich habe mich für einen kleinen Trick entschieden: ich habe auf das Logo der All for One Steeb AG ein „OnSelect“-Ereignis gelegt. Da es auch nicht wirklich schlimm ist, wenn ein Benutzer einmal in die Einstellungen kommt, war das der schnellste und einfachste Weg.

„Code“ wird hierbei von PowerApps an bestimmte Ereignisse gehängt, die im Eigenschaftenmenü des jeweiligen Objekts abgebildet werden. Klicken Sie hierzu wieder doppelt auf das Bild. Es öffnet sich das Eigenschaftenmenü. Hier finden Sie eine Eigenschaft „OnSelect“.

Tragen Sie in das Feld „OnSelect“ folgenden Code ein „EditForm(EditForm1);;Navigate(Screen4; ScreenTransition.None)“

Eine Beschreibung der einzelnen Befehle finden Sie in kompakter Form auf dieser Website[1].

PowerApps unterstützt Sie bei der Eingabe der Befehle in 2 Punkten. Zum einen wird – sobald Sie eine Formel anfangen – oberhalb des Feldes die Struktur inklusive einer Erklärung der Formel angezeigt. Hierbei ist die Stelle, an der Sie sich innerhalb der Formel gerade befinden schwarz unterlegt. Diese Hilfe hat bei längeren und verschachtelten Formeln einen großen Vorteil, da Sie so die Übersicht behalten, wo Sie sich gerade befinden. Zum anderen wird immer eine Auswahl an entsprechenden Optionen direkt in einer DropDown-Liste angeboten. Einzelne Befehle werden innerhalb des Feldes durch 2 Semikolon getrennt („;;“).

Der erste Befehl EditForm(EditForm1) versetzt das Formular (EditForm1) auf Screen4 in den Edit-Modus.

Mit Navigate(Screenbezeichnung; Transitionart) wird auf die neue Seite (Screen4) gewechselt.

Auf Screen4 müssen Sie nun noch 2 Codezeilen einfügen. Wählen Sie hierzu das „Umschaltfeld“ an. Klicken Sie im Menü den Punkt „Aktion“ aus und wählen Sie die Option „Bei Aktivierung“ aus. Tragen Sie in das Funktions-Feld nun den Wert „Button1_3.Visible=true“. Wählen Sie anschließend den Punkt „Bei Deaktivierung“ aus und tragen Sie in das Funktionsfeld nun den Wert „Button1_3.Visitble=false“ ein. Damit wird der Button „Umfrage“ auf der ersten Seite nun abhängig von der Konfiguration auf Screen4 an oder ausgeschalten.

 

Durch Klicken auf den „Play“-Button am oberen rechten Bildschirmrand können Sie testen, ob Ihre App startet und funktioniert.

 

Das war nun nur ein erster Einstieg in PowerApps. Dieser sollte aber zeigen, wie die Interaktion innerhalb von PowerApps funktioniert, wie die unterschiedlichen „Screens“ genutzt werden und wie mit Code gearbeitet werden kann.
Ich werde in einem kommenden Blog-Eintrag zeigen, wie die App weiter ausgebaut werden kann – und wie man auch etwas kompliziertere Formeln nutzen kann, um die App zu steuern.

 

[1] Formelreferenz: https://powerapps.microsoft.com/de-de/tutorials/formula-reference/