Ladebildschirm

Ladebildschirm in Power Apps – Bessere Performance & Nutzererfahrung!

Kennst du das auch? Du drückst auf einen Button in deiner App und nichts passiert – außer dass die App langsam und träge reagiert. Damit Nutzer sehen, wann deine App arbeitet, baue am besten einen Ladebildschirm ein. Ich zeige dir Schritt für Schritt, wie du einen Ladebildschirm erstellst und damit die Benutzerfreundlichkeit wesentlich erhöhst. Zusätzlich kannst du dadurch auch verhindern, dass während des Ladens andere Aktionen ausgeführt werden.

Warum ein Ladebildschirm wichtig ist

Ein Ladebildschirm hilft dabei, Nutzer über die Aktivität der App zu informieren und schafft Transparenz während Lade- oder Verarbeitungsprozessen. Besonders bei komplexen und zeitaufwändigen Abläufen sorgt er für eine bessere Nutzererfahrung.

Schritt 1: Komponente erstellen

Komponenten in Power Apps sind Steuerelemente, die wir selbst erstellen können und die wieder verwendbar sind.  Sie eignen sich perfekt für einen Ladebildschirm.

Ich empfehle, einen leicht transparenten Hintergrund zu erstellen, der die gesamte App-Oberfläche überdeckt. So verhinderst du, dass BenutzerInnen während des Verarbeitungsprozesses andere Steuerelemente anklicken können.

Schritt 2: Spinner und dynamischen Text hinzufügen

Füge zusätzlich einen weißen Container hinzu, den du mittig zentrierst. Darauf kannst du jetzt einen Spinner und ein Textfeld hinzufügen. Du kannst für den Spinner z.B. die modernen Steuerelemente aktivieren, oder dir SVG animierte Bilder über externe Tools generieren (z.B. https://loading.io/). Für den anzuzeigenden Text empfehle ich, eine benutzerdefinierte Eigenschaft zu verwenden, um individuelle Texte aus der App anzuzeigen.

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

Schritt 3: Komponente in der App nutzen

Füge die erstellte Komponente auf deinen Bildschirm ein. Den Text für die benutzerdefinierte Eigenschaft kannst du jetzt individuell anpassen. Steuere die Sichtbarkeit der Komponente über eine Variable, die du zu Beginn deines Codes aktivierst und am Ende deines Codes wieder deaktivierst.

comp_Ladebildschirm
Visible = var_Laden
Ladetext = "Dein Antrag wird erstellt..."

Codebeispiel
OnSelect =
Set(var_Laden;true);;

//Dein Code

Set(var_Laden;false);;

Ich hoffe, diese Anleitung hilft dir, Ladebildschirme in Power Apps gezielt einzusetzen, um Wartezeiten transparenter zu gestalten und die Nutzererfahrung zu verbessern.

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: