Designa till en anpassad sida i en modellbaserad app

Den här artikeln innehåller tips om hur du skapar en anpassad sida som kan användas i en modellbaserad app. Med en anpassad sida kan du skapa en sida som liknar en canvas-app i din modellbaserad app.

Kontroller som stöds på en anpassad sida

Anpassad sidredigering stöder en delmängd av appkontroller för arbetsytor. I följande tabell visas de kontroller som stöds för närvarande.

¹ Kontroll är en ny modern kontroll. Kontrollen introducerades för arbetsyteappar i Teams. Kontrollen bygger på Flytande UI-bibliotek omslutet med Power Apps Component Framework.

Stöd för anpassade komponenter för anpassad sida

Du kan lägga till både lågkod (canvas-komponenter) och pro-kod (kodkomponenter) anpassade UX-komponenter i din miljö och göra dem tillgängliga för alla tillverkare. För anpassade sidspecifika UX -utökningsartiklar, se lägg till arbetsytekomponenter till en anpassad sida för din modelldrivna app och lägg till kodkomponenter till en anpassad sida för modellbaserade app.

Generellt sett är en lågkodsansats för utbyggbarhet enklare att utveckla och testa samt har lägre underhållskostnader. Vi rekommenderar att du först utvärderar komponenterna och sedan endast använder kodkomponenter om det finns behov av mer komplex och avancerad anpassning.

Mer information:

• Galleri för arbetsytekomponenter
• Kodkomponenter, exempel
• Kodkomponenter community-resurser

Aktivera responsiv layout med behållarkontroll

Responsiva anpassade sidlayouter definieras genom att bygga en hierarki för kontroll Horisontell layoutbehållare och Vertikal layoutbehållare. De här kontrollerna finns i Power Apps Studio under Layout på fliken Infoga.

Ange minsta skärmhöjd och -bredd för App-objektet för att förhindra rullningsfält på sidnivå och använd ett lodrätt rullningsfält för brödtexten.

MinScreenHeight=200
MinScreenWidth=200

Alternativt kan du justera designstorleken på den anpassade sidan i Inställningar>Visning med Storlek inställd på Anpassad. Ställ därefter in Bredd och Höjd på en mer typisk anpassad sidstorlek för skrivbord som 1080 och 768. Om du ändrar den här inställningen när kontroller har lagts till på skärmen kan vissa layoutegenskaper återställas.

Ange att den översta behållaren ska fylla hela utrymmet och ändra storlek baserat på tillgängligt utrymme.

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

Vågrät inpackning av en behållare med flexibel höjd

Om du vill ha stöd för sidor som justeras från skrivbordet till en smal bredd kan du aktivera dessa egenskaper i en vågrät behållare med flexibel höjd. Utan dessa inställningar klipper sidan bort kontrollen när sidan är smal.

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

Underliggande behållare eller kontroller direkt i den här behållaren bör ha en minimibredd som gör att sidan får plats inom en bredd på 300 pixlar. Tänk även på utfyllnaden i behållaren eller kontrollen samt i överordnade behållare.

Stående inpackning av en behållare med flexibel bredd

Om du vill ha stöd för sidor som justeras från skrivbordet till en smal bredd kan du aktivera dessa egenskaper i en lodrät behållare med flexibel bredd. Utan dessa inställningar klipper sidan bort kontrollen när sidan är smal.

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

Underordnade behållare eller kontroller direkt under den här behållaren bör ställas in med en minsta höjd som gör att sidan får plats inom en bredd på 300 pixlar. Tänk även på utfyllnaden i behållaren eller kontrollen samt i överordnade behållare.

Mer information: Skapa responsiv layout.

Vertikal behållare med fast sidhuvud, flexibelt innehåll, fast sidfot

1. På Vertikal behållare, ange Justera (horisontellt) till Utsträckt

2. Infoga tre kontroller för Horisontell behållare i överordnade Vertikal behållare.

3. På den första och tredje underordnade kontrollen för horisontell behållare stänger du av Utsträckt höjd och minskar höjden till det utrymme som behövs, till exempel Höjd=80.

Vågrät behållare med två jämnstora underbehållare

1. I den överordnade horisontella behållaren ställer du in Justera (vertikal) på Sträck ut.

2. Infoga två kontroller för Vertikal behållare i överordnade Horisontell behållare.

Formatering av anpassade sidkontroller så att de överensstämmer med kontroller i modellstyrda appar

När du skapar den anpassade sidan från den modern appdesignern använder de här funktionerna standardvärdena.

• Tema för den anpassade sidan. Värdena för kontrollerna som används på en anpassad sida matchas automatiskt med standardvärdena för enhetligt gränssnitt. Standardinställningen används både i studio och vid programkörning. Explicit temaval tas bort från redigeringsupplevelsen för anpassade sidor.

• För kontroller måste en annan teckenstorlek användas, beroende på deras placering i sidhierarkin.

  Obs!

  Anpassad sidtext har en uppskalning på 1,33 så du måste dela upp målteckensnitten FontSize med 1,33 för önskad storlek.

  Etikettyp	Målteckensnitt	Teckenstorlek som ska användas
  Sidrubrik	17	12.75
  Vanliga etiketter	14	10,52
  Små etiketter	12	9,02

• Primära och sekundära knappkontroller behöver följande stiländringar:

  Primära knappar

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

  Sekundära knappar

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

Fliknavigering och tangentbordshjälpmedel för anpassade sidor

Anpassade sidor följer samma fliknavigeringsdesign som används av den värdmodellstyrda appen. En visuellt anpassad semantisk HTML-struktur hjälper användare att smidigt navigera på de anpassade sidorna när de använder tangentbord eller skärmläsare. Till skillnad från fristående appar behöver anpassade sidkontroller och andra UX-element inte explicita tilldelningar av fliknummer. Moderna kontroller har ingen TabIndex-egenskap och använder den semantiska HTML-strukturen för navigering.

Olika element som kontroller, komponenter i utformning och kod, behållare med flera kan tabbas in baserat på deras placering i layouten för anpassade sidor. Fliknavigeringen följer Z-ordernavigering. Enskilda tabbstopp i större grupperande element, som komponenter och behållare, nås först innan tabbmarkören flyttas vidare till nästa element i DOM-trädet (Document Object Model).

Här är ett exempel på en navigering med en sida som innehåller kontroller, kod samt arbetsytekomponenter och containrar.

Se även

Översikt över anpassad sida för modellbaserad app

Använda Power Fx på en anpassad sida

Skapa responsiv layout

Lägga till en anpassad sida i en modellbaserad app

Uppgradera Fluent UI-kontroller till moderna kontroller