Responsive design met containers

Introductie tot Power Apps

Luise Freese

Azure & Power Platform Architect

Waarom responsive?

Dezelfde app opent op telefoons, tablets, laptops
Een vaste lay-out knipt af op kleine schermen, raakt verloren op grote
Responsive = de lay-out past zich aan

Telefoon, tablet en laptop met dezelfde app die van eenkoloms naar meerkoloms lay-out schakelt.

Moderne lay-outcontainers

Illustratie die verticale en horizontale Layout-containers vergelijkt met gestapelde versus naast elkaar geplaatste child-controls.

Verticale lay-outcontainer, stapelt kinderen van boven naar beneden
Horizontale lay-outcontainer, plaatst kinderen van links naar rechts
Moderne controls vullen de beschikbare ruimte

Flexibele breedte en hoogte

FlexibleWidth en FlexibleHeight
Aan: de control rekte zich uit om de container te vullen
Uit: de control houdt een vaste grootte

Gallery1.FlexibleHeight = true    // stretches with screen
Gallery1.FlexibleWidth  = false   // stays at fixed reading width

LayoutMinWidth en LayoutMinHeight

Telefoon vs. tablet met LayoutMinWidth als breakpoint waar de lay-out wisselt van één kolom naar zijpaneel plus content.

Een container heeft genoeg ruimte nodig om goed te lay-outen
LayoutMinWidth = de kleinste breedte vóór herindeling
Activeert een andere lay-out voor telefoon vs. tablet

Weergave-instellingen van de app

Instellingen → Weergave stelt oriëntatie en grootte in
App-lay-out: Fixed zoomt naar één verhouding, Responsive past zich aan het scherm aan
Test op meerdere groottes

Power Apps Studio-instellingenvenster op het tabblad Weergave, met opties voor lay-out, oriëntatie en canvasgrootte

De vooraf gedefinieerde lay-outs

Echte screenshot van het Power Apps Studio-paneel Nieuw scherm met vooraf gedefinieerde lay-outsjablonen: Blank, Split screen, Sidebar, Header and footer, Approval request en Welcome screen, elk met een kleine voorbeeldweergave

+ New screen bevat voorgebouwde lay-outsjablonen
Sidebar, Header and footer, Split screen, al responsive
Aanbevolen startpunt voor je eerste responsive app

Wat je gaat bouwen

Wikkel controls in een Layout-container · Schakel tussen apparaatformaten · Zie de app reageren

Illustratie van een app op telefoon, tablet en laptop, waarbij de galerijlay-out zich aanpast aan elke schermgrootte.

Laten we oefenen!

Introductie tot Power Apps