Utforme en egendefinert side for den modelldrevne appen

Artikkel
03/15/2023

Denne artikkelen inneholder tips om hvordan du utformer en egendefinert side for bruk i en modelldrevet app.

Viktig

Egendefinerte sider er en ny funksjon med omfattende produktendringer og har for øyeblikket en rekke kjente begrensninger beskrevet i Kjente problemer med egendefinert side.

Støttede kontroller på en egendefinert side

Redigering av egendefinerte sider støtter for øyeblikket et delsett med kontroller for lerretsapper. Tabellen nedenfor viser kontrollene som støttes for øyeblikket.

Ctrl	Kontrolltype	Merknader
Etikett¹	Vis
Tekstboks¹	Inndata
Datovelger¹	Inndata
Knapp¹	Inndata
Kombinasjonsboks¹	Inndata
Avmerkingsboks¹	Inndata
Veksleknapp¹	Inndata
Alternativknappgruppe¹	Inndata
Glidebryter¹	Inndata
Rangering¹	Inndata
Loddrett beholder	Oppsett	Ny, responsiv vannrett oppsettbeholder
Vannrett beholder	Oppsett	Ny, responsiv vannrett oppsettbeholder
Redigeringsprogram for rik tekst	Inndata
Galleri	Vis
Ikon	Medier
Bilde	Medier
Redigeringsskjema	Inndata
Visningsskjema	Inndata
Kodekomponenter	Tilpass	Legge til kodekomponenter på en egendefinert side
Lerretskomponenter (forhåndsversjon)	Tilpass	Legge til lerretskomponenter på en egendefinert side

¹ Kontrollen er en ny, moderne kontroll. Kontrollen ble innført for lerretsapper i Teams. Kontrollen er basert på Fluent UI-biblioteket wrappet med Power Apps Component Framework.

Støtte for egendefinerte komponenter for egendefinert side

Du kan legge til komponenter for egendefinert brukeropplevelse med både lite kode (lerretskomponenter) og fullstendig kode (kodekomponenter) i miljøet og gjøre dem tilgjengelige for alle utviklere. Når det gjelder artikler om utvidelse av brukeropplevelsen som spesifikt gjelder egendefinerte sider, kan du se legge til lerretskomponenter på en egendefinert side for den modelldrevne appen og legge til kodekomponenter på en egendefinert side for den modelldrevne appen.

Generelt sett er utvidelse med lite kode enklere å bygge, teste, og den har lavere vedlikeholdskostnader. Vi anbefaler at du evaluerer lerretskomponenter først og deretter bruker kodekomponenter bare hvis det er behov for mer kompleks og avansert tilpassing.

Mer informasjon:

Aktivere responsivt oppsett med beholder-kontroll

Responsive, egendefinerte sideoppsett defineres ved å bygge et hierarki av kontroller for Horizontal layout container og Vertical layout container. Disse kontrollene finnes i lerretsapputformingen under Oppsett i Sett inn-fanen.

Angi minimum skjermhøyde og -bredde på App-objektet for å hindre rullefelt på sidenivå og bruke et loddrett rullefelt for brødtekst.

MinScreenHeight=200
MinScreenWidth=200

Den egendefinerte sideutformingsstørrelsen kan eventuelt justeres i Innstillinger > Vis med Størrelse satt til Egendefinert. Deretter setter du Bredde og Høyde til en mer vanlig egendefinert sidestørrelse på skrivebordet, for eksempel bredde 1080 og høyde 768. Hvis du endrer denne innstillingen etter at kontroller er lagt til på skjermen, kan det føre til at noen oppsettegenskaper tilbakestilles.

Angi at den øverste beholderen skal fylle hele plassen, og endre størrelse basert på tilgjengelig plass.

X=0
Y=0
Width=Parent.Width
Height=Parent.Height

Horisontal bryting av en beholder med fleksibel høyde

Hvis du vil støtte sider som justerer fra skrivebordet og ned til en smal bredde, aktiverer du disse egenskapene i en vannrett beholder med fleksibel høyde. Uten disse innstillingene vil siden klippe ut kontroller når siden er smal.

Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True

Underordnede beholdere eller kontroller direkte under denne beholderen bør settes til å ha en minimumsbredde som gjør at siden får plass innenfor en bredde på 300 piksler. Vurder utfyllingen av beholderen eller kontrollen samt overordnede beholdere.

Vertikal innpakning av en beholder med fleksibel bredde

Hvis du vil støtte sider som justerer fra skrivebordet og ned til en smal bredde, aktiverer du disse egenskapene i en vertikal beholder med fleksibel bredde. Uten disse innstillingene vil siden klippe ut kontroller når siden er smal.

Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True

Underordnede beholdere eller kontroller direkte under denne beholderen bør settes til å ha en minimumshøyde som gjør at siden får plass innenfor en bredde på 300 piksler. Vurder utfyllingen av beholderen eller kontrollen samt overordnede beholdere.

Mer informasjon: Bygge responsivt oppsett.

Loddrett beholder med fast topptekst, fleksibel brødtekst, fast bunntekst

Sett Juster (vannrett) til Strekk i Loddrett beholder.
Sett inn tre kontroller for Vannrett beholder i overordnet Loddrett beholder.
For den første og tredje underordnede kontrollen for vannrett beholder deaktiverer du Strekkhøyde og reduserer høyden og plassen som trengs, for eksempel Height=80.

Vannrett beholder med to like underordnede beholdere

Sett Juster (loddrett) to Strekk for den overordnede vannrette beholderen.
Sett inn to kontroller for Loddrett beholder i overordnet Vannrett beholder.

Tilpasse kontroller på egendefinert side til kontroller i modelldrevne apper

Når du lager den egendefinerte siden i den moderne apputformingen, bruker disse funksjonene standardverdiene.

Tema for den egendefinerte siden. Temaverdier for kontrollene som brukes på en egendefinert side, angis automatisk slik at de samsvarer med det blå standardtemaet for Enhetlig grensesnitt. Dette standardtemaet brukes både i studioet og ved kjøretid for programmet. Eksplisitt valg av tema fjernes fra redigeringsopplevelsen for egendefinert side.
Kontroller må bruke en annen skriftstørrelse, som er basert på plasseringen deres i sidehierarkiet.

Obs!

Tekst på egendefinert side har en oppskalering på 1,33, så du må dele FontSize-målet på 1,33 for å få ønsket størrelse.

Etikettype FontSize-mål FontSize som skal brukes

Sidetittel 17 12.75

Vanlige etiketter 14 10.52

Små etiketter 12 9.02

Etikettype	FontSize-mål	FontSize som skal brukes
Sidetittel	17	12.75
Vanlige etiketter	14	10.52
Små etiketter	12	9.02

Primære og sekundære knappekontroller må ha følgende stilendringer:

Primære knapper

Color=RGBA(255, 255, 255, 1)
Fill=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

Sekundære knapper

Color=RGBA(41,114,182,1)
Fill=RGBA(255, 255, 255, 1)
BorderColor=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

Egendefinerte sider følger samme tabulatornavigeringsutforming som brukes av den driftende modelldrevne appen. Semantisk HTML-struktur som er visuelt justert, hjelper brukere å navigere sømløst på de egendefinerte sidene når de bruker et tastatur eller en skjermleser. Vær oppmerksom på at i motsetning til frittstående lerretsapper, trenger ikke kontroller på egendefinert side og andre brukeropplevelseselementer eksplisitt tilordning av tabulatornumre. Moderne kontroller har ikke egenskapen TabIndex og bruker den semantiske HTML-strukturen til navigasjon.

Det går an å tabulatornavigere til ulike elementer, for eksempel kontroller, lerret og kodekomponenter, beholdere og så videre, basert på posisjonen deres i oppsettet for egendefinert side. Tabulatornavigeringen følger navigering i Z-rekkefølge. Individuelle tabulatorstopp i større grupperingselementer, for eksempel komponenter og beholdere, navigeres først før tabulatoren flyttes ut til neste element i DOM-treet (Document Object Model).

Her er et eksempel på navigering der siden inneholder kontroller, kode, lerretskomponenter og beholdere.

Obs!

Overlappende kontroller og elementer på den egendefinerte siden får ikke DOM slått sammen, slik at tabulatorstopp kanskje ikke er synkronisert i forhold til det visuelle oppsettet. Det samme gjelder for plassering av dynamiske elementer ved hjelp av formler.