Progettare una pagina personalizzata per un'app basata su modello

Questo articolo fornisce suggerimenti sulla progettazione di una pagina personalizzata da utilizzare in un'app basata su modello.

Controlli supportati in una pagina personalizzata

La creazione di pagine personalizzate attualmente supporta un sottoinsieme di controlli di app canvas. La tabella seguente elenca i controlli attualmente supportati.

¹ Il controllo è un nuovo controllo moderno. Il controllo è stato introdotto per app canvas in Teams. Il controllo si basa sulla libreria dell'interfaccia utente Fluent in Power Apps Component Framework.

Supporto dei componenti personalizzati per la pagina personalizzata

Puoi aggiungere componenti UX personalizzati con uso limitato di codice (componenti canvas) e con uso intensivo di codice al tuo ambiente e renderli disponibili per tutti i creatori. Per articoli sull'estendibilità UX specifici delle pagine personalizzate, vedi Aggiungere componenti canvas a una pagina personalizzata per un'app basata su modello e Aggiungere componenti di codice a una pagina personalizzata per un'app basata su modello.

In generale, l'approccio all'estendibilità con uso limitato di codice è più semplice da creare e testare e comporta costi di manutenzione inferiori. Consigliamo di valutare prima i componenti canvas e quindi di utilizzare i componenti di codice solo se è necessaria una personalizzazione più complessa e avanzata.

Ulteriori informazioni:

• Raccolta di componenti canvas
• Esempi di componenti di codice
• Risorse della community sui componenti di codice

Abilitare il layout reattivo con il controllo Contenitore

I layout di pagina personalizzati reattivi vengono definiti generando una gerarchia di controlli Contenitore layout orizzontale e Contenitore layout verticale. Questi controlli si trovano nella finestra di progettazione app canvas sotto Layout nella scheda Inserisci.

Imposta l'altezza e la larghezza minime dello schermo nell'oggetto App per impedire le barre di scorrimento a livello di pagina e utilizzare una barra di scorrimento del corpo verticale.

MinScreenHeight=200
MinScreenWidth=200

Facoltativamente, la dimensione della progettazione della pagina personalizzata può essere regolata in Impostazioni > Schermo con Dimensione impostato su Personalizza. Quindi imposta Larghezza e Altezza su una dimensione di pagina personalizzata desktop più tipica come larghezza 1080 e altezza 768. La modifica di questa impostazione dopo l'aggiunta dei controlli allo schermo può causare il ripristino di alcune proprietà del layout.

Imposta il contenitore più in alto per riempire l'intero spazio e ridimensionare in base allo spazio disponibile.

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

Disposizione testo orizzontale di un contenitore ad altezza flessibile

Per supportare la regolazione delle pagine dal desktop fino a una larghezza ridotta, abilita queste proprietà su un contenitore orizzontale con altezza flessibile. Senza queste impostazioni, la pagina taglierà i controlli quando la pagina è ridotta.

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

I contenitori o i controlli figlio direttamente sotto questo contenitore devono essere impostati per avere una larghezza minima che consenta alla pagina di adattarsi a una larghezza di 300 px. Considera il riempimento nel contenitore o nel controllo, nonché nei contenitori padre.

Disposizione testo verticale di un contenitore a larghezza flessibile

Per supportare la regolazione delle pagine dal desktop fino a una larghezza ridotta, abilita queste proprietà su un contenitore verticale con larghezza flessibile. Senza queste impostazioni, la pagina taglierà i controlli quando la pagina è ridotta.

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

I contenitori o i controlli figlio direttamente sotto questo contenitore devono essere impostati per avere un'altezza minima che consenta alla pagina di adattarsi a una larghezza di 300 px. Considera il riempimento nel contenitore o nel controllo, nonché nei contenitori padre.

Ulteriori informazioni: Creare layout reattivi.

Contenitore verticale con intestazione fissa, corpo flessibile, piè di pagina fisso

1. In Vertical Container, imposta Allinea (orizzontale) su Estendi

2. Inserisci tre controlli Contenitore orizzontale nel controllo Contenitore verticale padre

3. Nel primo e nel terzo contenitore orizzontale figlio, disattiva Altezza estensione e riduci l'altezza allo spazio necessario, ad esempio Altezza=80.

Horizontal container con due contenitori figlio pari

1. Nel contenitore verticale padre, imposta Allinea (verticale) su Estendi.

2. Inserisci due controlli Contenitore verticale nel controllo Contenitore orizzontale padre.

Applicare uno stile ai controlli delle pagine personalizzate per allinearli ai controlli di app basate su modello

Per la creazione della pagina personalizzata nella finestra di progettazione app moderna, queste funzionalità utilizzano i valori predefiniti.

• Tema per la pagina personalizzata. I valori del tema per i controlli utilizzati in una pagina personalizzata vengono impostati automaticamente in modo che corrispondano al tema blu predefinito di Unified Interface. Questo tema predefinito viene utilizzato sia in Studio che durante il runtime dell'applicazione. La selezione esplicita del tema viene rimossa dall'esperienza di creazione di pagine personalizzate.

• I controlli devono utilizzare una dimensione di carattere diversa, che si basa sulla posizione degli stessi nella gerarchia della pagina.

  Nota

  L'upscaling del testo della pagina personalizzata è 1,33, quindi è necessario dividere il FontSize target per 1,33 per ottenere la dimensione desiderata.

  Tipo di etichetta	FontSize target	FontSize da usare
  Titolo pagina	17	12.75
  Etichette normali	14	10.52
  Etichette piccole	12	9.02

• I controlli dei pulsanti primari e secondari richiedono le seguenti modifiche di stile:

  Pulsanti primari

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

  Pulsanti secondari

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

Spostamento tramite tabulazioni e accessibilità da tastiera per pagine personalizzate

Le pagine personalizzate hanno lo stesso design di spostamento tramite tabulazione utilizzato dall'app basata su modello di hosting. La struttura HTML semantica visivamente allineata consente agli utenti di spostarsi senza problemi nelle pagine personalizzate quando utilizzano una tastiera o un'utilità per la lettura dello schermo. Tieni presente che, a differenza delle app canvas autonome, i controlli delle pagine personalizzate e altri elementi UX non necessitano di assegnazioni di numeri di scheda esplicite. I controlli moderni non hanno una proprietà TabIndex e utilizzano la struttura HTML semantica per lo spostamento.

A vari elementi come controlli, canvas e componenti di codice, contenitori e così via è possibile applicare tabulazioni in base alla relativa posizione nel layout di pagina personalizzato. Lo spostamento tramite tabulazione segue lo spostamento con ordine Z. Le singole tabulazioni in elementi di raggruppamento più grandi come componenti e contenitori vengono applicate prima che la tabulazione si sposti all'elemento successivo nell'albero DOM (Document Object Model).

Ecco un esempio di spostamento con la pagina contenente controlli, codice, contenitori e componenti canvas.

Vedi anche

Panoramica della pagina personalizzata di un'app basata su modello

Utilizzare Power Fx in una pagina personalizzata

Creare layout reattivo

Aggiungere una pagina personalizzata a un'app basata su modello