PopUp Formular

PopUp Formular – Galerie & Formular auf einem Screen

Galerien und Formulare gehören zu den wichtigsten Steuerelementen in Power Apps. Häufig stellt sich jedoch die Frage: Wie verbindest du beide möglichst benutzerfreundlich miteinander?

Viele Apps nutzen dafür separate Screens – einen für die Galerie und einen weiteren für das Formular. Das funktioniert zwar gut, allerdings geht dabei oft der Kontext verloren, weil Benutzer:innen ständig zwischen Bildschirmen wechseln müssen.

Eine deutlich modernere Lösung ist ein PopUp Formular direkt auf dem gleichen Screen. Dadurch bleibt die Galerie sichtbar, der Kontext erhalten und du bekommst gleichzeitig mehr Freiheit beim Design deiner Oberfläche.

Ich zeige dir Schritt für Schritt, wie du in Power Apps ein PopUp erstellst, darin ein Formular einfügst und dieses mit deiner Galerie verbindest. Außerdem lernst du, wie du das PopUp ein- und ausblendest und wie du Datensätze anlegen und bestehende Einträge bearbeiten kannst.

Ausgangslage

Ich starte dieses Tutorial mit meiner App zum Thema Galerie Design.

Moderne Galerie in Power Apps erstellen – UI Tutorial

Schritt 1: Buttons zum Öffnen des PopUps erstellen

Damit Benutzer:innen das PopUp öffnen können, brauchst du zwei Möglichkeiten:

• Einen Button zum Anlegen (1) neuer Datensätze.
• Einen Button zum Bearbeiten (2) bestehender Datensätze.

Für das Anlegen (1) eignet sich ein Button außerhalb der Galerie, zum Beispiel im Header deiner App.

Anlegen-Button
OnSelect =
ResetForm(Form_Schulung);;
NewForm(Form_Schulung);;
Set(varPopUp;true)

Für das Bearbeiten (2) kannst du direkt beim jeweiligen Datensatz in der Galerie einen Button einfügen.

Bearbeiten-Button
OnSelect = 
ResetForm(Form_Schulung);;
EditForm(Form_Schulung);;
Set(varPopUp;true)

Schritt 2: PopUp erstellen

Füge einen Container ein, der als Hintergrund fungiert und den gesamten Bildschirm abdeckt.

Die Hintergrundfarbe kannst du grau mit einer entsprechenden Transparenz machen, sodass für Benutzer:innen der Kontext zur Galerie bestehen bleibt.

Container_Hintergrund
Fill = RGBA(214; 221; 224; 0,8)
Visible = varPopUp

Füge jetzt einen weiteren Container innerhalb des Hintergrundcontainers ein. Diesen machst du weiß und zentrierst ihn mittig über die X und Y Eigenschaft.

Container_PopUp
X = (Parent.Width - Self.Width) /2
Y = (Parent.Height - Self.Height) /2

Schritt 3: Formular im PopUp einfügen

Füge innerhalb des PopUp Containers eine Überschrift sowie ein Bearbeitungsformular ein. Verbinde das Formular mit der zugrundeliegenden SharePoint Liste und passe die Felder entsprechend deiner Anforderungen an. Zusätzlich musst du den gewählten Datensatz der Galerie hinterlegen, um die Bearbeitung zu ermöglichen.

Form_Schulung
Item = Gallery_Schulungskatalog.Selected
OnSuccess = Set(varPopUp;false)

Schritt 4: Speichern und Abbrechen Buttons hinzufügen

Um den Datensatz im Formular zu speichern, brauchst du einen Speichern-Button, der das Formular an die Datenquelle übermittelt.

Speichern-Button (1)
OnSelect = SubmitForm(Form_Schulung)

Zusätzlich solltest du den Benutzer:innen auch die Möglichkeit geben, das PopUp ohne Speicherung zu schließen.

Füge dazu einen Schließen-Button oder auch ein Schließen-Icon ein.  

Schließen-Button (2)
OnSelect = Set(varPopUp;false)

Ich hoffe, diese Anleitung hilft dir dabei, moderne und benutzerfreundliche Formulare in Power Apps umzusetzen.

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

 Hier geht's zum Detailvideo: