Responsive App

Responsive Design: So passt sich jede App an alle Bildschirmgrößen an!

Heute möchte ich dir zeigen, wie du deine App mithilfe von Responsive Design in Power Apps automatisch an verschiedene Bildschirmgrößen und Endgeräte anpassen kannst.

Responsive Design bedeutet, dass deine App nicht nur auf Desktop-Bildschirmen, sondern auch auf Laptops, Tablets und Smartphones gleichermaßen gut aussieht und dabei alle Funktionalitäten beibehält.

Wie du das erreichst?

Im ersten Schritt musst du „Skalierung anpassen“ auf Aus stellen, um die App am gesamten verfügbaren Bildschirm anzeigen zu lassen.

Dann fügst du dir Horizontale und oder Vertikale Container ein, um deine Steuerelemente darin unterzubringen. Container sind notwendig, da du eingefügte Steuerelemente hier mit einer flexiblen Breite versehen und somit direkt auf die verfügbare Bildschirmbreite  (Screen.Size) anpassen kannst.

Weiters kannst du die Anzahl der Spalten (1), die Schriftgröße (2) und sogar die Sichtbarkeit (3) von Steuerelementen abhängig von der Bildschirmgröße gestalten (Screen.Size).

(1) Anzahl der Spalten in der Galerie über: WrapCount = RoundDown(Scr_Galerie.Size/2;0)
(2) Die Schriftgröße über: Size = Switch(Scr_Galerie.Size;4;45;3;40;2;35;1;25)
(3) Die Sichtbarkeit über: Visible = Scr_Galerie.Size>1

Um die Datacards eines Bearbeitungsformular am gesamten verfügbaren Bildschirm anzeigen zu lassen müssen wir in allen im Eigenschaftenfenster die "Breite anpassen" auf Ein stellen. Um alle Datacards schnell und einfach anzupassen per gehaltener Strg Taste zwei Datacards in der Strukturansicht auswählen, dann mit Strg+A alle Datacards selektieren und im Eigenschaftenfenster den Regler bei „Breite anpassen“ auf Ein stellen.

Die Füllabschnitte geben an, wie viel vom verfügbaren Platz das entsprechende Steuerelement einnimmt. (z.B. 2 von 3 = 2/3 also etwa 66%)

In meinem Video zeige ich dir die einzelnen Schritte genau, sodass du deine eigene Responsive App erstellen kannst.
Also, tauch mit mir ein in die Welt des Responsive Design in Power Apps!

Wenn du mehr darüber erfahren möchtest, wie du nicht nur Responsive Design in Power Apps umsetzen kannst, sondern komplette Anwendungen, dann melde dich hier zum Newsletter an, in dem ich dir Tipps und Tricks rund um Power Apps zusende.

 Schaue dir gerne auch mein Detailvideo an: