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. Una pagina personalizzata ti consente di creare una pagina simile a un'app canvas nella tua app basata su modello.

Controlli supportati in una pagina personalizzata

La creazione di pagine personalizzate supporta un subset di controlli app canvas. Nella tabella seguente sono elencati 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 Fluent UI, incapsulata tramite 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, vai a 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:

• Galleria dei 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 in Power Apps Studio in 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 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 ritaglierà il controllo quando la pagina è stretta.

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

I contenitori o i controlli secondari direttamente all'interno di questo contenitore devono essere impostati con una larghezza minima che consenta alla pagina di rientrare in una larghezza di 300 pixel. Considera anche la spaziatura interna del contenitore o del controllo, nonché dei contenitori superiori.

Disposizione verticale di un contenitore di 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 ritaglierà il controllo quando la pagina è stretta.

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

I contenitori o i controlli figlio direttamente contenuti in questo contenitore devono essere impostati con un'altezza minima tale da consentire alla pagina di adattarsi a una larghezza di 300 pixel. Considera anche la spaziatura interna del contenitore o del controllo, nonché dei contenitori superiori.

Ulteriori informazioni: Creare layout reattivi.

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

1. Nel Contenitore verticale, imposta Allinea (orizzontale) su Allunga

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

3. Nel primo e nel terzo controllo contenitore orizzontale figlio, imposta Adatta altezza su disattivato e riduci l'altezza allo spazio necessario, ad esempio Altezza=80.

Contenitore orizzontale con due contenitori figli di uguali dimensioni

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 di destinazione	FontSize da utilizzare
  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 seguono la stessa struttura di navigazione a schede usata dall'app basata su modello che le ospita. 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. 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. La navigazione tramite tabulatore segue la navigazione secondo l'ordine Z. I singoli punti di tabulazione all’interno di elementi di raggruppamento più grandi, come componenti e contenitori, vengono raggiunti per primi prima che il focus passi all’elemento successivo nell’albero DOM (Document Object Model).

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

Vedi anche

Panoramica della pagina personalizzata di un'app basata su modello

Utilizzare PowerFx in una pagina personalizzata

Creare layout reattivo

Aggiungere una pagina personalizzata a un'app basata su modello

Aggiornare i controlli dell'interfaccia utente Fluent ai controlli moderni