PopUp

PopUp in Power Apps erstellen: Schritt-für-Schritt Anleitung

Ein PopUp ist nützlich, um den BenutzerInnen deiner App zusätzliche Informationen zu geben oder eine Bestätigung für einen Vorgang einzuholen. Häufig verwende ich PopUps, um eine Bestätigung z.B. beim Löschen eines Datensatzes einzufordern. Da es in Power Apps kein eigenes PopUp Steuerelement gibt, musst du dieses selbst erstellen und die dazugehörige Logik hinterlegen. Ich zeige dir Schritt für Schritt, wie du deine Business App mit einem PopUp aufwerten kannst.

Informations PopUp

Schritt 1: Informationsicon einfügen

Um BenutzerInnen mehr Informationen zu bestimmten Bereichen deiner App anzeigen zu können, eignet sich ein Informations PopUp. Dieses soll bei Klick auf ein Informationsicon angezeigt werden.

Füge zuerst ein Informationsicon ein und hinterlege im OnSelect Event eine Variable, über die die Sichtbarkeit des PopUp Fensters gesetzt wird.

Informationsicon
OnSelect =  UpdateContext({varShowPopUp_Info:true})

Schritt 2: Informations PopUp erstellen

Füge ein Container Steuerelement ein, das den gesamten Bildschirm ausfüllt. Färbe dieses Grau und stelle die Transparenz auf 50%, sodass die App noch zu sehen, aber nicht mehr anklickbar ist.

Danach fügst du ein weiteres Container Steuerelement als PopUp Fenster auf dem zuvor eingefügten Container ein. Dieses färbst du weiß und zentrierst es vertikal & horizontal.

Weißer Container
X = (Parent.Width-Self.Width)/2 //horizontal zentrieren
Y = (Parent.Height-Self.Height)/2 //vertikal zentrieren

Danach kannst du weitere Steuerelemente hinzufügen, um das PopUp Fenster zu befüllen. In diesem Beispiel füge ich ein Textfeld sowie eine Schaltfläche (Okay) und ein Abbrechen Icon ein.

Schritt 3: PopUp Sichtbarkeit hinterlegen

Die Sichtbarkeit des PopUp Fensters machst du abhängig von der definierten Variable.

Container Sichtbarkeit (1)
Visible = varShowPopUp_Info //definierte Variable

Bei Klick auf die Schaltfläche sowie auf das Abbrechen Icon soll das PopUp Fenster wieder geschlossen werden. Das erreichst du über das jeweilige OnSelect Event, indem du die Variable entsprechend veränderst.

Abbrechen Icon + Abbrechen Button (2)
OnSelect = UpdateContext({varShowPopUp_Info:false})

PopUp zur Bestätigung der Datenlöschung

Schritt 1: Lösch PopUp erstellen

Du kannst entweder das Informations PopUp kopieren, einfügen und verändern, oder das Lösch PopUp von Grund auf neu erstellen. Füge dazu einen Hintergrundcontainer ein, der Grau und mit 50% Transparenz eingefärbt ist. Füge einen weiteren weißen Container darin ein, der zentriert dargestellt wird. Füge alle notwendigen Steuerelemente hinzu, um das Design deines PopUp Fensters abzuschließen.

In diesem Beispiel füge ich ein Textfeld, ein Abbrechen Icon sowie einen Button zum Abbrechen und einen Button zum Löschen ein.

Schritt 2: Sichtbarkeit des Lösch PopUp festlegen

Um dein Lösch PopUp anzuzeigen, wähle das Papierkorb Symbol aus. Im OnSelect Event hinterlegst du eine Variable, die die Sichtbarkeit des PopUp Containers triggert.

PopUp Container
Visibility = varShowPopUp_Löschen

Papierkorb Icon (1)
OnSelect = UpdateContext({varShowPopUp_Löschen:true})

Um das Lösch PopUp wieder auszublenden, passt du den Code im Abbrechen Icon, im Abbrechen Button und im Löschen Button an.

Abbrechen Icon / Abbrechen Button / Löschen Button (2)
OnSelect = UpdateContext({varShowPopUp_Löschen:false})

Schritt 3: Datensatz Löschen

Um den Datensatz bei der Bestätigung auch wirklich zu löschen, musst du noch die Remove Funktion im Bestätigen Button hinzufügen.

Du kannst auch eine Information am Bildschirm anzeigen lassen, um den Löschvorgang zu bestätigen.

Löschen Button
OnSelect =
Remove(Buchungen;gal_Buchungen.Selected);;
UpdateContext({varShowPopUp_Löschen:false});;
Notify("Der Datensatz wurde erfolgreich gelöscht.";NotificationType.Information;2000)

Ich hoffe, dieses Tutorial hilft dir dabei, deine Business Apps benutzerfreundlicher und moderner zu gestalten.

Melde dich gerne für meinen Newsletter an, in dem ich dir Tipps und Tricks rund um Power Apps & Power Automate zusende.

 Hier gehts zum Detailvideo: