Fallbeispiel
Stellen wir uns folgendes Praxisbeispiel vor: Der Benutzer soll in einer App ein Formular ausfüllen, muss jedoch zuvor auf eine „Weiter“-Schaltfläche klicken, um zum nächsten Schritt zu gelangen. Bevor die App jedoch wirklich fortfährt, soll der Benutzer zunächst bestätigen, dass er einen wichtigen Hinweis gelesen und verstanden hat. Zu diesem Zweck erscheint ein Popup-Fenster mit dem Text „Bitte bestätigen Sie die Kenntnisnahme.“ und zwei Buttons: „Bestätigen“ und „Abbrechen“. Erst wenn der Benutzer auf „Bestätigen“ klickt, wird die Aktion ausgeführt (z.B. die Navigation zur nächsten Seite oder das Speichern der Daten). Klickt er hingegen auf „Abbrechen“, wird der Vorgang abgebrochen (optional) und das Popup geschlossen, ohne dass die kritische Aktion ausgeführt wird. Dieses Szenario – eine Bestätigungsabfrage vor dem Fortfahren – werden wir nun Schritt für Schritt in einer Canvas App umsetzen.
Die Beispiel-App enthält einen Startbildschirm, der, bevor damit gearbeitet werden kann, mit dem Popup Fenster und dem Bestätigen gestartet werden muss, bevor es weitergeht.
Schritt-für-Schritt Anleitung
Im Folgenden bauen wir ein solches Bestätigungs-Popup ausschließlich mit Power Fx und Standard-Steuerelementen nach (es sind keine externen Komponenten notwendig). Die Lösung besteht im Wesentlichen daraus, dass wir ein Container-/Overlay-Element erstellen, das je nach Bedarf ein- oder ausgeblendet wird. Eine Variable steuert die Sichtbarkeit dieses Popups. Beim Klick auf „Weiter“ wird die Variable gesetzt, sodass das Popup erscheint; die Buttons im Popup setzen die Variable wieder zurück und führen ggf. die gewünschte Aktion aus. Gehen wir nun Schritt für Schritt vor:
1. Popup-Layout vorbereiten: Zunächst fügen wir auf dem betreffenden Screen der Canvas App die Steuerelemente für das Popup hinzu.
- Ein Container erstellen, das den gesamten Bildschirm abdeckt – dieses dient als verdunkelnder Hintergrund.
- Setzen wir die Füllfarbe des Containers auf eine halbtransparente Farbe, z.B. RGBA(214,223,240,0.5), um den Hintergrund abzudunkeln (Grau halbtransparent)
2. Nun fügen wir in den ersten Container einen weiteren Container hinzu, der als eigentliches Dialogfenster dient.
- Der Container erhält eine helle Hintergrundfarbe (z.B. Weiß) und optional einen Rand, damit er sich visuell abhebt.
- Wir richten den Container ca. mittig auf dem Bildschirm aus. Das Ergebnis stellt einen weißen Platzhalter vor abgedunkeltem Hintergrund dar.
3. Bestätigungstext und Buttons hinzufügen: Als Nächstes platzieren wir die Inhalte in den Popup-Container.
- Wir fügen Sie ein Label (Beschriftung) in den Container ein und setzen dessen Text-Eigenschaft auf den gewünschten Hinweistext, z.B. “Bitte bestätigen Sie die Kenntnisnahme der Geschäftsbedingungen”.
- Darunter fügen wir zwei Button-Steuerelemente ein: einen für „Bestätigen“ (dieser löst die kritische Aktion aus) und einen für „Abbrechen“ (zum Schließen ohne Aktion).
4. Sichtbarkeit mit Variable steuern: Nun definieren wir eine Variable, mit der das Popup ein- und ausgeblendet wird. In Power Apps Canvas Apps können wir dafür entweder eine globale Variable (Set-Funktion) oder eine Kontextvariable (UpdateContext) verwenden. In diesem Beispiel nutzen wir eine Kontextvariable.
- Wir initialisieren diese Variable zu Beginn beim Klick auf die Schaltfläche „Start“ als false (ausgeblendet).
- Wir weisen dem Container bei Visible (Sichtbarkeit) die Variable varShowPopupStart zu.
- Solange varShowPopupStart = false ist, bleiben diese Elemente unsichtbar. Wird varShowPopupStart auf true gesetzt, werden das Rechteck und der Container angezeigt, sodass das Popup erscheint.
5. Interaktionen konfigurieren: Im letzten Schritt hinterlegen wir die Power Fx Formeln für die Buttons und die auslösende Aktion:
- Mit dem Klick auf die Schaltfläche „Start“ soll das Popup Fenster erscheinen.
- Start-Button (Aktion auslösen): Bei dem Button, der die kritische Aktion einleitet (in unserem Fall der Start-Button), soll nicht sofort navigiert werden, sondern zunächst das Popup erscheinen. Setzen wir dazu in der OnSelect-Eigenschaft der Schaltfläche die Variable auf true:
- Button Start: Eigenschaft -> Onselect -> UpdateContext({varShowPopUpStart:true})
6. Das Popup Fenster kommt zum Vorschein: Um das Fenster wieder zu schließen, soll auf den Button „Bestätigen“ geklickt werden müssen. Damit das Funktioniert, muss die Variable verändert werden auf den Wert true.
- Button „Bestätigen“: Eigenschaft -> Onselect -> UpdateContext({varShowPopUpStart:false})
Das Popup Fenster verschwindet daraufhin wieder.
Als weiterführende Idee: Dieses Verhalten lässt sich ggf. auch auf die Schaltflächen „Antrag Mitarbeiter“ und „Genehmiger Login“ anwenden.