Designe en brugerdefineret side til din modelbaserede app

Artikel
04/18/2023

Denne artikel indeholder tip til design af en brugerdefineret side til brug i en modelbaseret app.

Vigtigt

Brugerdefinerede sider er en ny funktion med væsentlige produktændringer, og den har i øjeblikket en række kendte begrænsninger, som er skitseret i Kendte problemer med brugerdefinerede sider.

Understøttede kontrolelementer på en brugerdefineret side

Oprettelse af brugerdefineret side understøtter i øjeblikket et delsæt af kontrolelementer i en lærredapp. I tabellen nedenfor vises de kontrolelementer, der understøttes i øjeblikket.

Kontrol	Type af kontrolelement	Noter
Etiket¹	Skærm
Tekstfelt¹	Input
Datovælger¹	Input
Knap¹	Input
Kombinationsfelt¹	Input
Afkrydsningsfelt¹	Input
Til/fra-knap¹	Input
Gruppe med alternativknapper¹	Input
Skyder¹	Input
Klassificering¹	Input
Lodret beholder	Layout	Ny dynamisk beholder i vandret layout
Vandret beholder	Layout	Ny dynamisk beholder i vandret layout
RTF-editor	Input
Galleri	Liste
Ikon	Medier
Billede	Medier
Rediger formular	Input
Visningsformular	Input
Kodekomponenter	Brugerdef	Føje kodekomponenter til en brugerdefineret side
Lærredkomponenter (forhåndsversion)	Brugerdef	Føje lærredkomponenter til en brugerdefineret side

¹ Kontrolelementet er et nyt, moderne kontrolelement. Kontrolelementet blev introduceret for lærredapps i Teams. Kontrolelementet er baseret på Brugergrænsefladebibliotek til Fluent i Power Apps Component Framework.

Understøttelse af brugerdefinerede komponenter til brugerdefineret side

Du kan både føje brugerdefinerede UX-komponenter med lav kode (lærredkomponenter) og professionel kode (kodekomponenter) til miljøet og gøre dem tilgængelige for alle oprettere. Du kan se specifikke artikler om brugerdefinerede siders UX-udvidelsesmuligheder under Føje lærredkomponenter til en brugerdefineret side for din modelbaserede app og Føje kodekomponenter til en brugerdefineret side for din modelbaserede app.

Generelt er det nemmere at oprette, teste og reducere vedligeholdelsesomkostningerne, hvis du bruger udvidelsesmuligheder med lave kode. Det anbefales, at du først evaluerer lærredkomponenter og derefter bruger kodekomponenter, hvis der er behov for mere kompleks og avanceret tilpasning.

Flere oplysninger:

Aktivere responsivt layout med kontrolelement af typen objektbeholder

Responsivt brugerdefineret sidelayout defineres ved at bygge et hierarki over kontroelementer af typerne objektbeholdere til vandret layout og objektbeholdere til lodret layout. Disse kontrolelementer findes i lærredappsdesigneren under Layout under fanen Indsæt.

Angiv minimumskærmens højde og bredde i appobjektet for at forhindre rullepaneler på sideniveau og bruge et lodret rullepanel til brødtekst.

MinScreenHeight=200
MinScreenWidth=200

Den brugerdefinerede sidedesignstørrelse kan også justeres i indstillinger > Vis med Størrelsen angivet til Brugerdefineret. Angiv derefter Bredde og Højde til en mere typisk brugerdefineret sidestørrelse på skrivebordet, f.eks. bredde 1080 og højde 768. Hvis du ændrer indstillingen, efter at kontrolelementerne er føjet til skærmen, kan det medføre, at nogle layoutegenskaber nulstilles.

Indstil den øverste beholder til at fylde hele pladsen og tilpasse størrelsen på den tilgængelige plads.

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

Vandret tekstombrydning i en fleksibel højdebeholder

Hvis du vil understøtte sider, der justeres fra skrivebordet ned til en smalle bredde, skal du aktivere egenskaberne på en vandret beholder med fleksibel højde. Uden disse indstillinger klipper siden i kontrolelementer, når siden er indsnævret.

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

Underordnede objektbeholdere eller kontrolelementer direkte under denne objektbeholder skal angives til at have en minimumbredde, der gør det muligt for siden at være inden for en bredde på 300 px. Overvej udfyldningen på beholderen eller kontrolelementet samt de overordnede objektbeholdere.

Lodret tekstombrydning med en beholder med fleksible bredder

Hvis du vil understøtte sider, der justeres fra skrivebordet ned til en smalle bredde, skal du aktivere egenskaberne på en lodret beholder med fleksibel bredde. Uden disse indstillinger klipper siden i kontrolelementer, når siden er indsnævret.

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

Underordnede objektbeholdere eller kontrolelementer direkte under denne objektbeholder skal angives til at have en minimumhøjde, der gør det muligt for siden at være inden for en bredde på 300 px. Overvej udfyldningen på beholderen eller kontrolelementet samt de overordnede objektbeholdere.

Flere oplysninger: Bygge responsivt layout.

Lodret objektbeholder med fast sidehoved, fleksibel brødtekst, fast sidefod

Angive Juster (vandret) til Træk på den lodrette beholder
Indsætte tre kontrolelementer af typen Vandret objektbeholder i den overordnede lodrette beholder
I det første og tredje underordnede kontrolelement af typen vandret objektbeholder skal du slå Stræk højde fra og reducere højden til den nødvendige plads, for eksempel Højde=80.

Vandret objektbeholder med to ligestillede underordnede objektbeholdere

Angiv Juster (lodret) til Træk i den overordnede vandrette objektbeholder.
Indsæt to kontrolelementer af typen Lodret objektbeholder i den overordnede vandrette beholder.

Formatere brugerdefinerede sidekontrolelementer, så de justeres i forhold til kontrolelementer i modelbaserede apps

Når du opretter den brugerdefinerede side fra den moderne appdesigner, bruger disse funktioner standardværdierne.

Tema for den brugerdefinerede side. Temaværdier for de kontrolelementer, der bruges på en brugerdefineret side, angives automatisk, så de svarer til det blå standardtema i Unified Interface. Dette standardtema bruges både i studiet og under kørsel af programmet. Valg af eksplicitte temaer fjernes, når du opretter brugerdefinerede sider.
Kontrolelementer skal bruge en anden skriftstørrelse, som er baseret på deres placering i sidehierarkiet.

Bemærk

Brugerdefineret sidetekst indeholder en opskalering på 1,33, så du skal dividere den ønskede FontSize med 1,33 for at få den ønskede størrelse.

Etikettype Ønsket FontSize FontSize, der skal bruges

Sidetitel 17 12.75

Normale etiketter 14 10.52

Små etiketter 12 9.02

Etikettype	Ønsket FontSize	FontSize, der skal bruges
Sidetitel	17	12.75
Normale etiketter	14	10.52
Små etiketter	12	9.02

Der skal foretages følgende formateringsændringer af primære og sekundære knapper:

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

Brugerdefinerede sider følger det samme fanenavigationsdesign som det, der bruges af den modelbaserede værtsapp. En semantisk HTML-struktur, der er visuelt justeret, hjælper brugere med at navigere problemfrit i de brugerdefinerede sider, når de bruger et tastatur eller en skærmlæser. Bemærk, at i modsætning til enkeltstående lærredapps, behøver kontrolelementer af typen brugerdefinerede sider og andre UX-elementer ikke at blive tildelt eksplicitte fanenumre. Moderne kontrolelementer har ikke en TabIndex-egenskab og bruger den semantiske HTML-struktur til navigation.

Du kan bruge tabulatortasten til at komme til forskellige elementer, for eksempel kontrolelementer, lærred- og kodekomponenter, objektbeholdere osv., på baggrund af deres placering i det brugerdefinerede sidelayout. Fanenavigation følger navigation i Z-rækkefølge. For de enkelte tabulatorstop i større grupperingselementer, for eksempel komponenter, navigeres der først til objektbeholdere, før tabulatortasten går videre til det næste element i DOM-træet (Document Object Model).

Her er et eksempel på navigation på en side, der indeholder kontrolelementer, kode og lærredkomponenter og samt objektbeholdere.

Bemærk

I overlappende kontrolelementer og elementer på den brugerdefinerede side flettes DOM ikke, så tabulatorstop er muligvis ikke synkroniseret med et visuelt layout. Det samme gælder for placering af dynamiske elementer, der bruger formler.