Responsive Design: App automatisch an Bildschirmgröße anpassen! | Power Apps
Vložit
- čas přidán 16. 07. 2024
- 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? Durch den geschickten Einsatz von flexiblen Containern in Power Apps, die sich sowohl in der Breite als auch in der Höhe an den verwendeten Bildschirm anpassen können.
Ich zeige dir genau, wie diese Container funktionieren, sodass sich alle Steuerelemente darin automatisch verkleinern, wenn die Bildschirmgröße abnimmt. Wir können sogar für ganz kleine Bildschirme einzelne Steuerelemente ausblenden, um den verfügbaren Platz effektiv zu nutzen.
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 und Design zusende: www.powerappstrainer.de/newsl...
Hier gehts zum Blogbeitrag: www.powerappstrainer.de/blog/...
________
LINKS zu den Power Apps Videos
► Shopping App: • IT Helpdesk mit Einkau...
► Galerie & Formular: • Galerie mit Bearbeitun...
► Kataloge & Formulare: • Formulare und Kataloge...
________
Timestamps:
0:00 Ziel des Videos
0:54 App erstellen
1:18 Was bedeutet responsive?
1:53 Skalierung anpassen
2:45 Vertikaler Container
3:24 Responsive Design Container
4:39 Responsive Header
8:29 Flexible Breite
9:38 User Profilbild
11:00 Screen Size (Bild ausblenden)
12:19 Schriftgröße Responsive
13:24 Responsive Galerie / Katalog
20:27 Responsive Formular
24:03 Galerie & Formular auf einem Bildschirm - Věda a technologie
Habe ich zwar anders gelöst, aber deine Variante werde ich wohl adaptieren. Danke für diese geilen Tipps
Freut mich, dass dir das gefällt. Wie hast du es gelöst? LG Kai
@@KaiWeissmann vor deinem Video kannte ich switch nicht und habe enige if then schleifen drin 🙂
Auch kannte ich den Sinn der Container nicht und habe das Layout mit Formeln dynamisch gemacht. Also Icon A ist in der Position von Icon B abhängig etc. Bild ausblenden bei Bildschirm unter xxx Pixeln etc.
Mir war das mit screensize 1-4 auch nicht bekannt.
Aber wie gesagt. das macht einiges leichter und ich schau mal ob ich meine App dementsprechend anpassen werde (Funktioniert ja trotzdem :-D )
Hast du noch ne idee, wie man Ladezeiten beschleunigen kann? Ich lade aktuell eine Terminliste.
Vergangene Termine kann man sich mit einem toggle einblenden lassen. Terminarten ebenfalls. Es gibt quasi ein "Filtermenü" bei mir.
"Sort(
Filter(
'Kletterteam-Termine';
(
If(
tog_Archiv;
//Archiv sichtbar
(
tog_Film && Art.Value = "Film" ||
tog_DAV && Art.Value = "DAV" ||
tog_Tour && Art.Value = "Tour" ||
tog_Hallenklettern && Art.Value = "Hallenklettern" ||
tog_Geburtstag && Art.Value = "Geburtstag"
) &&
(
StartsWith('Aufsicht 1'.Value; txt_NachAufsichtFiltern_1.Text) ||
StartsWith('Aufsicht 2'.Value; txt_NachAufsichtFiltern_1.Text) ||
If(tog_ohneAufsicht; IsBlank('Aufsicht 1');"")
);
//Archiv nicht sichtbar
(
tog_Film && Art.Value = "Film" ||
tog_DAV && Art.Value = "DAV" ||
tog_Tour && Art.Value = "Tour" ||
tog_Hallenklettern && Art.Value = "Hallenklettern" ||
tog_Geburtstag && Art.Value = "Geburtstag"
) &&
(
StartsWith('Aufsicht 1'.Value; txt_NachAufsichtFiltern_1.Text) ||
StartsWith('Aufsicht 2'.Value; txt_NachAufsichtFiltern_1.Text) ||
If(tog_ohneAufsicht; IsBlank('Aufsicht 1');"")
) &&
('Datum von' > Today() - 2 || 'Datum bis' > Today() - 2)
)
)
);
'Datum von';
SortOrder.Ascending
)
"
Super, freut mich, dass du da einiges mitnehmen konntest.
Ladezeiten kannst du beschleunigen, indem du möglichst wenig Daten in die App lädst und sie möglichst klein hältst (wenig Screens, wenig Steuerelemente). Außerdem solltest du soweit möglich alles delegieren, d.h. Berechnungen in der Datenquelle und nicht in der App vornehmen.
LG Kai
Wieder etwas gelernt und für mich umgesetzt. 👍🏆
Freut mich, dass das Video hilfreich war :)
Ober geil wieder.
Wahnsinn was so alles machbar ist und sooo kompliziert ist es nun auch nicht
Ich hätte noch eine Idee wie eine Seite der Fuhrpark-App aussehen könnte/sollte ist aber schwierig zu beschreiben
Ich würde eine Seite mit einer horizontalen Galerie bevorzugen, wo links die Stunden des Tages zu sehen sind und rechts davon alle Autos aufgelistet sind, die es im Fuhrpark gibt und die entsprechenden Stunden wo das Fahrzeug belegt ist. Quasi ein rotes Rechteck neben der 14, wenn das Fahrzeug um 14Uhr belegt ist und ein grünes wenn es frei ist. So hätte man alle Autos und deren Belegung auf einen Blick
Freut mich, dass dir das Video gefällt :)
Genau dieses Video müsstest du mal für VBA User Forms machen.
Gibt es hier auch die Möglichkeit die Oberfläche an verschiedenen Bildschirmauflösungen variabel anzupassen + die Funktionalitäten auf der Oberfläche weiter zu nutzen ohne das die Elemente bsp. abgeschnitten werden und nicht mehr korrekt angezeigt werden.
Ich würde im VBA die Positionen der Elemente abhängig von der Bildschirmgröße positionieren.
Die Bildschirmgröße kannst du ja abfragen
'Excel-Fenster
breite = Application.Width
höhe = Application.Height
Anhand der Daten kannst du dein Userform in der Größe anpassen und auch die Elemente.
Hallo Kai.
Wie immer ein sehr gutes Video!
Ich arbeite gerade an einem Programm für meine Familie und nutze dabei alle deine Videos.
Jetzt wollte ich ein Login Fenster bauen, welches auch responsive ist.
Nur leider klappt das designen über die vertikalen Container nicht so wirklich, da ich ja mehrere Elemente über-/ und nebeneinander setzen muss.
Kannst du dazu auch mal ein Video machen?
Vielen Dank für die Videos ♥♥
Hallo, freut mich sehr, dass dir die Videos weiterhelfen! Das klingt nach einem interessanten Anwendungsfall. Kannst du das auftretende Problem nochmal etwas genauer beschreiben? LG Kai
Height spricht man "/haɪt/" aus.
Ist das Powerzeugs echt so schlecht, es müsste einfach von Hause aus Responsive sein!! Von mir aus noch über eine Checkbox, aber das ich da soviel tun muss?!?!?!
Deine Variablennamen sind eine Katastrophe, kannst du bitte alles ausschreiben, das würde es schonmal verbessern und dann noch den technischen Anteil ans Ende, kein Unterstrich und PascalCase verwenden, also nicht "Scr_Galerie" sondern "GalerieScreen" und für Variablen camelCase! #protipp #bitte