Skab Responsivt Layout i Power Apps

I en verden, hvor brugere tilgår applikationer fra et utal af enheder – fra små smartphones til store desktop-skærme – er det afgørende, at din app kan tilpasse sig. Et responsivt design handler ikke kun om æstetik; det handler om funktionalitet og brugervenlighed. Når du bygger apps i Power Apps, kan du skabe løsninger, der dynamisk tilpasser sig den tilgængelige skærmplads, hvilket sikrer en optimal oplevelse, uanset enhedens størrelse eller orientering. Denne guide vil dykke ned i de nødvendige trin og teknikker for at opnå et fuldt responsivt layout i dine Power Apps, fra de indledende indstillinger til avancerede formelbaserede justeringer og brugen af intelligente containerkontroller.

Traditionelt set vælger man i Power Apps, om en app er skræddersyet til en telefon eller en tablet, hvilket definerer lærredets standardstørrelse og -form. Selvom dette er et godt udgangspunkt, vil en app designet til en telefon ofte virke overdimensioneret i et stort browservindue, uden at udnytte de ekstra pixels til at vise mere indhold eller flere kontroller. Målet med responsivt design er at give dine kontroller mulighed for at reagere på forskellige enheds- eller vinduesstørrelser, hvilket skaber en mere naturlig og intuitiv brugeroplevelse. Dette opnås ved at justere specifikke indstillinger og skrive udtryk og formler i hele din app, der dynamisk tilpasser elementernes størrelse og placering.

Deaktivering af 'Skaler til Pasform'

Det første og mest fundamentære skridt mod at gøre din Power App responsiv er at deaktivere indstillingen 'Skaler til pasform'. Denne indstilling er som standard aktiveret og tvinger din app til at skalere hele layoutet for at passe til skærmen, hvor appen kører. Selvom det lyder praktisk, forhindrer det kontroller i at tilpasse sig dynamisk. Når du slår denne indstilling fra, vil 'Lås billedformat' også automatisk blive deaktiveret, da du ikke længere designer til en specifik skærmform, men i stedet ønsker fleksibilitet. Du kan dog stadig vælge, om din app skal understøtte enhedsrotation. Ved at fravælge 'Skaler til pasform' åbner du døren for at definere, hvordan hver enkelt kontrol i din app skal opføre sig, når skærmstørrelsen ændres, i stedet for at lade hele appen strække sig eller skrumpe.

Forstå App- og Skærmdimensioner

For at dine app-layouts skal kunne reagere på ændringer i skærmdimensionerne, skal du skrive formler, der bruger skærmens Width- og Height-egenskaber. Disse egenskaber, som du finder under 'Avanceret' i højre rude, når du vælger en skærm, har ofte standardformler, der ser sådan ud:

• Width = Max(App.Width, App.DesignWidth)
• Height = Max(App.Height, App.DesignHeight)

Her refererer App.Width og App.Height til dimensionerne af den faktiske enhed eller browser, hvor din app kører. Disse værdier ændres dynamisk, hvis brugeren ændrer størrelsen på browservinduet eller roterer enheden. Skærmens Width- og Height-formler genberegnes, når disse værdier ændres.

App.DesignWidth og App.DesignHeight er de dimensioner, du oprindeligt specificerede i 'Visning'-ruden under indstillinger. Hvis du f.eks. vælger 'Telefon'-layout i portrætretning, vil DesignWidth være 640 og DesignHeight være 1136. Disse designmål kan betragtes som de minimale dimensioner, din app er designet til. Hvis det faktiske tilgængelige område er mindre end disse minimumsdimensioner, sikrer formlerne for skærmens Width og Height, at værdierne ikke bliver mindre end disse minimumsgrænser. I sådanne tilfælde vil brugeren skulle scrolle for at se alt indholdet på skærmen.

Brug Formler til Dynamisk Layout

Den sande magi ved responsivt design ligger i brugen af formler til at placere og dimensionere hver kontrol i din app, i stedet for at bruge faste (konstante) koordinatværdier. Disse formler udtrykker hver controls position og størrelse i forhold til den samlede skærmstørrelse eller i forhold til andre kontroller på skærmen. Det er vigtigt at bemærke, at når du først begynder at skrive formler for en controls X, Y, Width og Height egenskaber, vil disse formler blive overskrevet med konstante værdier, hvis du efterfølgende trækker i kontrollen i lærrededitoren. Undgå derfor at trække i kontroller, når du har implementeret dynamiske layoutformler.

I det simpleste tilfælde kan en kontrol fylde en hel skærm. For at opnå dette sætter du kontrollens egenskaber til disse værdier:

• X: 0
• Y: 0
• Width: Parent.Width
• Height: Parent.Height

Disse formler bruger Parent-operatoren. For en kontrol placeret direkte på en skærm refererer Parent til skærmen. Med disse egenskabsværdier vises kontrollen i øverste venstre hjørne af skærmen (0, 0) og har samme Width og Height som skærmen.

Hvis du f.eks. ønsker, at en kontrol kun skal fylde den øverste halvdel af skærmen, kan du sætte dens Height-egenskab til Parent.Height / 2, mens de andre formler forbliver uændrede. Hvis du derefter ønsker en anden kontrol til at fylde den nederste halvdel af samme skærm, kan du gøre det på mindst to måder. For enkelhedens skyld kan du vælge denne tilgang:

Denne konfiguration opnår den ønskede effekt, men kræver redigering af flere formler, hvis du ændrer mening om kontrollernes relative størrelser. En mere robust tilgang er at skrive formlerne for den nederste kontrol i forhold til den øverste kontrol (og sig selv):

Med disse formler behøver du kun at ændre Height-egenskaben for den øverste kontrol for at udtrykke en anden brøkdel af skærmens højde. Den nederste kontrol vil automatisk flytte sig og ændre størrelse i overensstemmelse hermed.

Almindelige Formelmønstre for Kontrolplacering

At mestre et responsivt design handler om at forstå og anvende almindelige formelmønstre. Her er nogle eksempler på, hvordan du kan udtrykke layoutforhold mellem en kontrol (C) og dens overordnede kontrol (Parent) eller en søskendekontrol (D):

Forhold mellem kontrol C og dens overordnede kontrol (Parent)

Forhold mellem kontrol C og søskendekontrol D

Hierarkisk Layout med Containere og Gallerier

Når du konstruerer skærme med mange kontroller, bliver det mere praktisk (og ofte nødvendigt) at placere kontroller i forhold til en overordnet kontrol snarere end direkte i forhold til skærmen eller en søskendekontrol. Ved at organisere dine kontroller i en hierarkisk struktur kan du gøre dine formler lettere at skrive og vedligeholde.

Gallerier

Hvis du bruger et galleri i din app, skal du placere kontroller inde i galleriets skabelon. Du kan placere disse kontroller ved at skrive formler, der bruger Parent-operatoren, som i dette tilfælde vil referere til galleriskabelonen. I formler på kontroller inden for en galleriskabelon skal du bruge Parent.TemplateHeight og Parent.TemplateWidth egenskaberne; brug ikke Parent.Width og Parent.Height, som refererer til galleriets samlede størrelse.

Container Kontrol

Du kan bruge Layout container-kontrollen som en overordnet kontrol. Overvej f.eks. en header øverst på en skærm. Det er almindeligt at have en header med en titel og flere ikoner, som dine brugere kan interagere med. Du kan konstruere en sådan header ved hjælp af Container-kontrollen, der indeholder en Label-kontrol og to Icon-kontroller:

For Header-kontrollen refererer Parent til skærmen. For de andre kontroller refererer Parent til Header-kontrollen. Når disse formler er skrevet, kan du justere størrelsen eller positionen af Header-kontrollen ved at ændre formlerne for dens egenskaber. Børnekontrollernes størrelser og positioner vil automatisk justere sig derefter.

Auto-layout Container Kontroller

En yderst effektiv funktion er de Auto-layout container-kontroller, der automatisk placerer børnekomponenterne. Disse containere bestemmer børnekomponenternes position, så du aldrig behøver at indstille X, Y for en komponent inde i containeren. Desuden kan de fordele den tilgængelige plads til deres børnekomponenter baseret på indstillingerne og bestemmer både den lodrette og vandrette justering af børnekomponenterne. Dette forenkler designprocessen markant og gør komplekse responsive layouts meget nemmere at implementere og vedligeholde.

Komponenter

Hvis du bruger funktionen 'Komponenter', kan du konstruere genanvendelige byggeklodser til brug i hele din app. Ligesom med Container-kontrollen, skal kontroller, du placerer inden i en komponent, basere deres positions- og størrelsesformler på Parent.Width og Parent.Height, som refererer til komponentens størrelse. Dette sikrer, at dine komponenter er responsive, uanset hvor de placeres i din app.

Tilpasning af Layout til Enhedsstørrelse og Orientering

Du har nu lært at bruge formler til at ændre hver controls størrelse som reaktion på den tilgængelige plads, mens kontrollerne holdes justeret i forhold til hinanden. Men du vil måske også foretage mere væsentlige layoutændringer som reaktion på forskellige enhedsstørrelser og orienteringer. Når en enhed roteres fra portræt til landskab, vil du f.eks. måske skifte fra et lodret layout til et vandret. På en større enhed kan du præsentere mere indhold eller omarrangere det for at give et mere tiltalende layout. På en mindre enhed skal du muligvis opdele indholdet på tværs af flere skærme.

Enhedsorientering

De standardformler for en skærms Width og Height-egenskaber, som beskrevet tidligere, giver ikke nødvendigvis en god oplevelse, hvis en bruger roterer en enhed. For eksempel har en app designet til en telefon i portrætretning en DesignWidth på 640 og en DesignHeight på 1136. Den samme app på en telefon i landskabsorientering vil have disse egenskabsværdier:

• Skærmens Width-egenskab er sat til Max(App.Width, App.DesignWidth). Appens Width (1136) er større end dens DesignWidth (640), så formlen evaluerer til 1136.
• Skærmens Height-egenskab er sat til Max(App.Height, App.DesignHeight). Appens Height (640) er mindre end dens DesignHeight (1136), så formlen evaluerer til 1136.

Med en skærmhøjde på 1136 og en enhedshøjde (i denne orientering) på 640 skal brugeren scrolle skærmen lodret for at se alt dens indhold, hvilket måske ikke er den oplevelse, du ønsker. For at tilpasse skærmens Width- og Height-egenskaber til enhedens orientering kan du bruge disse formler:

• Width = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))
• Height = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))

Disse formler bytter appens DesignWidth- og DesignHeight-værdier ud, baseret på om enhedens bredde er mindre end dens højde (portrætretning) eller mere end dens højde (landskabsorientering). Efter at du har justeret skærmens Width- og Height-formler, vil du måske også omarrangere kontroller inden for din skærm for bedre at udnytte den tilgængelige plads. For eksempel, hvis hver af to kontroller optager halvdelen af skærmen, kan du stable dem lodret i portræt, men arrangere dem side om side i landskab. Du kan bruge skærmens Orientation-egenskab til at bestemme, om skærmen er orienteret lodret eller vandret. Som et eksempel, hvor de øverste og nederste kontroller tilpasser sig orienteringen:

Skærmstørrelser og Breakpoints

Du kan yderligere tilpasse dit layout baseret på enhedens størrelse. Skærmens Size-egenskab klassificerer den aktuelle enhedsstørrelse. Størrelsen er et positivt heltal, og ScreenSize-typen giver navngivne konstanter for at hjælpe med læsbarheden. Denne tabel viser de mest almindelige konstanter:

Brug disse størrelser til at træffe beslutninger om din apps layout. For eksempel, hvis du ønsker, at en kontrol skal være skjult på en telefon-størrelse enhed, men synlig ellers, kan du sætte kontrollens Visible-egenskab til denne formel:

Parent.Size >= ScreenSize.Medium

Denne formel evaluerer til sand, når størrelsen er medium eller større, og falsk ellers. Hvis du ønsker, at en kontrol skal optage en anden brøkdel af skærmbredden baseret på skærmstørrelsen, sæt kontrollens Width-egenskab til denne formel:

Parent.Width * Switch( Parent.Size, ScreenSize.Small, 0.5, ScreenSize.Medium, 0.3, 0.25 )

Denne formel sætter kontrollens bredde til halvdelen af skærmbredden på en lille skærm, tre tiendedele af skærmbredden på en medium skærm og en fjerdedel af skærmbredden på alle andre skærme.

Brugerdefinerede Breakpoints

Skærmens Size-egenskab beregnes ved at sammenligne skærmens Width-egenskab med værdierne i appens SizeBreakpoints-egenskab. Denne egenskab er en enkeltkolonne-tabel med tal, der angiver de bredde-breakpoints, der adskiller de navngivne skærmstørrelser. I en app oprettet til tablet eller web er standardværdien i appens SizeBreakpoints-egenskab [600, 900, 1200]. I en app oprettet til telefoner er værdien [1200, 1800, 2400] (værdierne for telefonapps er fordoblet, fordi sådanne apps bruger koordinater, der effektivt er dobbelt så store som de koordinater, der bruges i andre apps).

Du kan tilpasse din apps breakpoints ved at ændre værdierne i appens SizeBreakpoints-egenskab. Vælg 'App' i trævisningen, vælg SizeBreakpoints i egenskabslisten, og rediger derefter værdierne i formellinjen. Du kan oprette så mange breakpoints, som din app har brug for, men kun størrelser 1 til 4 svarer til navngivne skærmstørrelser. I formler kan du referere til størrelser ud over 'ExtraLarge' ved deres numeriske værdier (5, 6 osv.). Du kan også specificere færre breakpoints. For eksempel har din app muligvis kun brug for tre størrelser (to breakpoints), så de mulige skærmstørrelser vil være 'Small', 'Medium' og 'Large'.

Kendte Begrænsninger

Selvom Power Apps giver kraftfulde værktøjer til responsivt design, er der et par kendte begrænsninger, du bør være opmærksom på:

• Designlærredet reagerer ikke på størrelsesformler: Når du designer din app i Power Apps Studio, vil lærredet ikke dynamisk tilpasse sig de formler, du opretter for X, Y, Width og Height. For at teste den responsive adfærd skal du gemme og udgive din app og derefter åbne den på forskellige enheder eller i browservinduer med forskellige størrelser og orienteringer. Dette er afgørende for at validere dit responsive design.
• Træk og slip overskriver formler: Hvis du skriver udtryk eller formler i en controls X, Y, Width og Height egenskaber, vil disse udtryk eller formler blive overskrevet, hvis du senere trækker kontrollen til et andet sted eller ændrer størrelsen på kontrollen ved at trække i dens kant. Vær derfor forsigtig med at foretage manuelle justeringer, når du har implementeret formelbaseret layout. Det er bedst at foretage alle justeringer direkte i formellinjen.

Ofte Stillede Spørgsmål

Her er svar på nogle af de mest almindelige spørgsmål vedrørende responsivt design i Power Apps:

Hvad er responsivt design i Power Apps?

Responsivt design i Power Apps betyder, at din app automatisk tilpasser sit layout, størrelse og placering af kontroller baseret på den skærmstørrelse og orientering, den kører på. Dette sikrer en optimal og brugervenlig oplevelse på tværs af forskellige enheder som telefoner, tablets og desktops.

Hvorfor skal jeg deaktivere 'Skaler til pasform'?

'Skaler til pasform' er en standardindstilling, der skalerer hele appen proportionalt for at passe til skærmen. Ved at deaktivere denne indstilling får du mulighed for at kontrollere individuelle elementers størrelse og placering med formler, hvilket giver dig fuld kontrol over det responsive layout, i stedet for blot at strække eller krympe hele grænsefladen.

Hvordan bruger jeg formler til at placere kontroller?

Du bruger formler i egenskaber som X, Y, Width og Height for dine kontroller. I stedet for faste talværdier bruger du udtryk som Parent.Width / 2 eller ControlName.Y + ControlName.Height + 10. Dette gør, at kontrollerne dynamisk justerer sig i forhold til deres forælder eller søskendekontroller.

Hvad er forskellen på Parent.Width og Parent.TemplateWidth i et galleri?

Når du arbejder med kontroller inde i en galleriskabelon, refererer Parent.Width og Parent.Height til galleriets samlede dimensioner. Derimod refererer Parent.TemplateWidth og Parent.TemplateHeight til dimensionerne af den enkelte skabelonrække/-kolonne inden i galleriet. Det er vigtigt at bruge Parent.TemplateWidth og Parent.TemplateHeight for at opnå responsivitet inden for hvert gallerielement.

Kan jeg have forskellige layouts til stående og liggende orientering?

Ja, absolut. Du kan bruge skærmens Orientation-egenskab (f.eks. Parent.Orientation = Layout.Vertical eller Layout.Horizontal) i dine formler til at definere forskellige layouts for stående og liggende orientering. Dette giver dig mulighed for at omarrangere kontroller, f.eks. at stable dem lodret i portræt og side om side i landskab.

Hvordan definerer jeg mine egne skærmstørrelser (breakpoints)?

Du kan tilpasse din apps breakpoints ved at ændre værdierne i appens SizeBreakpoints-egenskab. Du finder denne egenskab ved at vælge 'App' i trævisningen og derefter 'SizeBreakpoints' i egenskabslisten. Her kan du angive en tabel med numeriske værdier, der definerer, hvornår appen skal skifte mellem forskellige skærmstørrelser (f.eks. Small, Medium, Large).

Hvis du vil læse andre artikler, der ligner Skab Responsivt Layout i Power Apps, kan du besøge kategorien Teknologi.