In PowerApps è possibile creare in tutta semplicità moduli interessanti ed efficienti da usare. Si consideri, ad esempio, questo modulo di base per registrare ordini di vendita:

Ordine di vendita di esempio

Questa esercitazione illustra i passaggi per creare questo modulo. Verranno esaminati anche alcuni argomenti avanzati, ad esempio il ridimensionamento dinamico dei campi per riempire lo spazio disponibile.

Prima di iniziare

Se non si ha familiarità con PowerApps oppure se le app sono state generate solo automaticamente, è opportuno creare un'app da zero prima di approfondire questo argomento. Creando un'app da zero, si acquisirà familiarità con i concetti necessari, ad esempio l'aggiunta di origini dati e controlli, che sono menzionati ma non illustrati in questo argomento.

Aggiungere una raccolta

  1. Creare un'app per tablet da zero.

    Tutte le operazioni descritte in questo argomento si applicano anche ai layout del telefono, ma le app del telefono hanno spesso una sola colonna verticale.

  2. Aggiungere l'entità Sales order nel Common Data Service come origine dati per l'app.

    Fuori dall'ambito di questa esercitazione, è possibile usare qualsiasi origine dati, compresi gli elenchi di SharePoint e le tabelle di Excel.

  3. Aggiungere un controllo Raccolta verticale e impostarne la proprietà Items su Sales order.

    (facoltativo) Per trovare gli esempi in questa esercitazione, modificare il Layout della raccolta in modo da mostrare solo Titolo e sottotitolo.

    Elenco di ordini di vendita

  4. Nella raccolta, fare clic o toccare SO004.

    Elenco di ordini di vendita

    Questo record verrà visualizzato nel modulo che si compilerà seguendo i passaggi elencati più avanti in questo argomento.

Aggiungere una barra del titolo

  1. Aggiungere una schermata vuota in cui verrà inserito il modulo.

    Fuori dall'ambito di questa esercitazione, è possibile inserire i controlli Galleria e Modulo di modifica nella stessa schermata, ma si avrà più spazio per lavorare se vengono inseriti in schermate separate.

  2. Nella parte superiore della nuova schermata aggiungere un controllo Etichetta e impostare la relativa proprietà Text su questa espressione:
    "Sales Order " & Gallery1.Selected.SalesOrderId

    L'etichetta mostra il numero di ordini di vendita del record selezionato nella raccolta.

  3. (facoltativo) Formattare l'etichetta come indicato di seguito:

    1. Impostarne la proprietà Align su Center.
    2. Impostarne la proprietà Size su 20.
    3. Impostarne la proprietà Fill su Navy.
    4. Impostarne la proprietà Color su White.
    5. Impostarne la proprietà Width su Parent.Width.
    6. Impostarne le proprietà X e Y su 0.

    Barra del titolo

Aggiungere un modulo

  1. Aggiungere un controllo Modulo di modifica, quindi spostarlo e ridimensionarlo in modo da riempire lo schermo sotto l'etichetta.

    Nel passaggio successivo, connettere il controllo modulo all'origine dati Sales order usando il riquadro di destra, non la barra della formula. Se si usa la barra della formula, il modulo non mostra nessun campo per impostazione predefinita. Per visualizzare tutti i campi desiderati, selezionare una o più caselle di controllo nel riquadro di destra.

  2. Nel riquadro di destra scegliere o toccare la freccia GIÙ accanto al testo Non sono state selezionate origini dati e scegliere o toccare Sales order.

    Viene visualizzato un set predefinito di campi dell'origine dati Sales order in un semplice layout a tre colonne. Tuttavia, molte sono vuote, e potrebbe volerci qualche minuto per visualizzare le posizioni finali.

  3. Impostare la proprietà Item del modulo su Gallery1.Selected.

    Il modulo mostra il record selezionato nella raccolta, ma il set di campi predefinito potrebbe non corrispondere al risultato desiderato nel prodotto finale.

  4. Nel riquadro di destra, nascondere ciascuno di questi campi deselezionando la relativa casella di controllo:

    • Sales order ID
    • Account
    • Sales person
    • Account contact
  5. Spostare il campo Order status trascinandolo a sinistra e quindi rilasciandolo sull'altro lato del campo Customer purchase order reference.

    La schermata sarà simile a questo esempio:

    Ordine di vendita in un layout di base a tre colonne

Selezionare una scheda di dati

Ciascun campo visualizzato dispone di una scheda di dati corrispondente nel modulo. Questa scheda comprende un set di controlli per campo titolo, una casella di input, una stella (visualizzata se il campo è obbligatorio) e un messaggio di errore di convalida.

È anche possibile selezionare le schede direttamente nel modulo. Se selezionata, viene visualizzato un sottotitolo nero sopra la scheda.

Scelta della scheda di dati

Nota: per eliminare una scheda (non solo nasconderla), selezionarla e quindi premere CANC.

Organizzare le schede in colonne

Per impostazione predefinita, i moduli nelle app per tablet hanno tre colonne e quelli nelle app per telefoni ne hanno una sola. È possibile specificare non solo il numero di colonne in un modulo, ma anche se tutte le schede devono rientrare nei bordi della colonna.

In questa immagine, il numero di colonne nel modulo è stato modificato da tre a quattro con la casella di controllo Blocca sulle colonne selezionata. Le schede del modulo sono state disposte automaticamente per adattarle al nuovo layout.

Ordine di vendita in un layout di base a quattro colonne

Ridimensionare le schede tra più colonne

A seconda dei dati contenuti in ogni scheda, è consigliabile adattare alcune schede in una singola colonna e disporne altre su più colonne. Se una scheda contiene più dati di quanti se ne vogliano visualizzare in una singola colonna, è possibile ampliare la scheda selezionandola e trascinando il quadratino di ridimensionamento sul bordo sinistro o destro della casella di selezione. Quando si trascina il quadratino, la scheda verrà "bloccata" sui limiti della colonna.

Per rendere la progettazione più flessibile, ma conservare una determinata struttura, è possibile aumentare il numero di colonne a 12. Con tale modifica, è possibile configurare facilmente ogni scheda in modo da comprendere l'intero modulo, metà modulo, un terzo, un quarto, un-sesto e così via. Vediamolo in azione.

  1. Nel riquadro di destra, impostare il numero di colonne nel modulo su 12.

    Specificare il numero di colonne

    Il modulo non cambia visibilmente, ma sono disponibili più punti di bloccaggio quando si trascina il quadratino di ridimensionamento di sinistra o destra.

  2. Aumentare la larghezza della scheda Ridimensionare la scheda Data ordine trascinando il quadratino di ridimensionamento a destra di un punto di bloccaggio a destra.

    La scheda si estende su quattro delle 12 colonne del modulo (o su 1/3 del modulo), anziché solo tre di 12 colonne del modulo (o 1/4 del modulo). Ogni volta che si aumenta la larghezza di una scheda di un punto di bloccaggio, essa si estende per un ulteriore 1/12 del modulo.

    Ridimensionare una scheda con trascinare e rilasciare

  3. Ripetere il passaggio precedente con le schede Order status e Customer purchase order reference.

    Tre schede nella prima riga

  4. Ridimensionare le schede Nome e Descrizione in modo da occupare sei colonne (o 1/2) del modulo.

  5. Estendere le prime due righe dell'indirizzo di recapito per tutta la larghezza del modulo:

Ecco fatto! È stato creato il modulo desiderato, combinando le righe con diversi numeri di colonne:

Ordine di vendita nel layout a 12 colonne con ridimensionamento

Modificare i controlli in una scheda

L'indirizzo di recapito comprende diverse informazioni che si vogliono raggruppare visivamente insieme per l'utente. Ogni campo rimarrà nella propria scheda di dati, ma è possibile gestire i controlli all'interno della scheda per adattarli meglio insieme.

  1. Selezionare la scheda First line of Delivery address selezionare l'etichetta all'interno di tale scheda, quindi eliminare le prime tre parole dal testo.

    Indirizzo di recapito dell'ordine di vendita che rinomina l'etichetta della prima riga

  2. Selezionare la scheda Second line of Delivery address selezionare l'etichetta all'interno di tale scheda, quindi eliminare tutto il testo.

    Si può essere tentati di rimuovere il controllo etichetta e in molti casi funzionerà bene. Tuttavia, le formule potrebbero dipendere dalla presenza di tale controllo. L'approccio più sicuro è quello di rimuovere il testo o impostare la proprietà del controllo Visible su false.

    Indirizzo di recapito dell'ordine di vendita che rinomina l'etichetta della seconda riga

  3. Nella stessa scheda, spostare la casella di input di testo sull'etichetta per ridurre lo spazio tra la prima e la seconda riga dell'indirizzo.

    L'altezza della scheda si riduce quando il relativo contenuto richiede meno spazio.

    Indirizzo di recapito dell'ordine di vendita che rinomina l'etichetta della seconda riga

Ora è possibile concentrare l'attenzione sulla terza riga dell'indirizzo. Analogamente a quanto appena fatto, abbreviare il testo di ogni etichetta per tali schede e disporre la casella di input di testo in modo che sia a destra di ogni etichetta. Ecco la procedura per la scheda Stato:

Passaggio Descrizione Risultato
1 Selezionare la scheda Stato in modo che i quadratini di ridimensionamento appaiano intorno a essa. Selezionare una scheda
2 Selezionare l'etichetta in questa scheda in modo che i quadratini di ridimensionamento appaiano intorno a essa. Selezionare un controllo all'interno di una scheda
3 Posizionare il cursore a destra del testo e quindi eliminare la parte che non è più necessaria. Modificare il testo all'interno di un controllo in una scheda
4 Usando i quadratini di ridimensionamento sui lati, ridimensionare il controllo etichetta per adattarlo al nuovo formato di testo. Ridimensionare un controllo all'interno di una scheda
5 Selezionare il controllo di input di testo all'interno di questa scheda. Selezionare un controllo diverso nella scheda
6 Usando i quadratini di ridimensionamento sui lati, ridimensionare il controllo input di testo per adattarlo alle dimensioni desiderate. Ridimensionare un controllo all'interno di una scheda
7 Trascinare la casella di input di testo in alto e a destra del controllo etichetta e rilasciarla. Spostare un controllo all'interno di una scheda
Le modifiche alla scheda Stato sono ora complete. Le modifiche alla scheda sono ora complete

Il risultato per l'indirizzo completo della terza riga:

Indirizzo di recapito dell'ordine di vendita con una terza riga più concisa

Notare che molte delle schede iniziano con formule dinamiche per le loro proprietà. Ad esempio, il controllo di input di testo che è stato precedentemente ridimensionato e spostato, aveva una proprietà Width basata sulla larghezza dell'elemento padre. Quando si sposta o si ridimensiona un controllo, queste formule dinamiche vengono sostituite con valori statici. È possibile eventualmente ripristinare le formule dinamiche usando la barra della formula.

Attivare o disattivare il bloccaggio sulle colonne

In alcuni casi sarà possibile fornire un controllo più preciso rispetto alle 12 colonne standard. In questi casi è possibile disattivare Blocca sulle colonne e posizionare le schede manualmente. Il modulo continuerà a bloccare sulle 12 colonne, ma è possibile anche tenere premuto il tasto ALT per posizionare manualmente e ridimensionare una scheda in base alle esigenze.

In questo esempio i quattro componenti che costituiscono la terza riga dell'indirizzo hanno tutti esattamente la stessa larghezza. Ma questa potrebbe non essere la migliore disposizione, perché i nomi di città sono più lunghi delle abbreviazioni degli stati e la casella Input di testo per paesi/aree è corta a causa della lunghezza dell'etichetta.

Per ottimizzare lo spazio, disattivare Blocca sulle colonne nel riquadro destro e quindi tenere premuto il tasto ALT durante il ridimensionamento e il posizionamento di tali schede. Ogni volta che si tiene premuto il tasto ALT, tutti i controlli mostrano sottotitoli di colore nero. Questo comportamento è intenzionale e ha lo scopo di mostrare i nomi dei controlli.

Posizionamento e ridimensionamento con il tasto ALT premuto

Dopo un attento posizionamento, il risultato ha dimensioni appropriate per ogni campo e anche una spaziatura orizzontalmente uniforme tra i campi:

La terza riga dell'indirizzo di recapito dell'ordine di vendita è posizionata in modo esatto

In sintesi, quali sono le differenze quando Blocca sulle colonne è attivato o In sintesi, quali sono le differenze quando il bloccaggio sulle colonne è disattivato?disattivato?

Comportamento Blocca sulle colonne attivato Blocca sulle colonne disattivato
Ridimensionare il bloccaggio a Numero di colonne selezionate:
1, 2, 3, 4, 6 o 12
12 colonne
Il ridimensionamento del bloccaggio può essere sottoposto a override No Sì, con il tasto ALT
Le schede modificano automaticamente il layout tra le righe (vedere altre informazioni più avanti in questo articolo) No

Impostare larghezza e altezza

Analogamente a quanto accade con tutti gli elementi di PowerApps, il layout del modulo è disciplinato dalle proprietà sui controlli della scheda. Come già descritto, è possibile modificare i valori di queste proprietà trascinando i controlli in posizioni diverse o i quadratini di ridimensionamento per ridimensionare i controlli. Ma ci saranno casi in cui si vorrà comprendere e modificare queste proprietà in maniera più precisa, in particolare quando si preparano i moduli dinamici con formule.

Layout di base: X, Y e Width

Le proprietà X e Y controllano la posizione delle schede. Quando si usano i controlli sull'area di disegno non elaborata queste proprietà forniscono una posizione assoluta. In un modulo, queste proprietà hanno un significato diverso:

  • X: ordine all'interno di una riga.
  • Y: numero di riga.

Analogamente ai controlli nell'area di disegno, la proprietà Width specifica la larghezza minima della scheda (altre informazioni sull'aspetto minimo tra qualche secondo).

Diamo un'occhiata alle proprietà X, Y, e Width delle schede nel modulo:

Coordinate X e Y del modulo dell'ordine di vendita

Overflow delle righe

Cosa accade se le schede in una riga sono troppo grandi per adattarsi a tale riga? In genere non occorre preoccuparsi di questa possibilità. Con l'opzione Blocca sulle colonne attiva, queste tre proprietà verranno automaticamente modificate in modo che tutto si adatti perfettamente all'interno delle righe senza provocare l'overflow.

Ma con Blocca sulle colonne disattivato o con la proprietà Width basata su una formula in una o più schede, può verificarsi l'overflow di una riga. In questo caso le schede eseguiranno automaticamente il wrapping per creare in modo efficace una nuova riga. Ad esempio, modificare manualmente la proprietà Width della scheda Customer purchase order reference (prima riga, terzo elemento) su 500:

Ridimensionamento manuale della carta, ridisporre in una nuova riga

Le tre schede nella parte superiore non si adattano più in senso orizzontale ed è stata creata un'altra riga per eseguire il wrapping dell'overflow. La coordinata Y per tutte queste schede è sempre uguale a 0 e le schede Nome e Descrizione hanno ancora una coordinata Y pari a 1. Le schede con diversi valori di Y non verranno unite tra le righe.

È possibile usare questo comportamento per creare un layout completamente dinamico in cui le schede vengono posizionate in base a un ordine Z, riempiendo il più possibile lo spazio prima di passare alla riga successiva. Per ottenere questo effetto, assegnare a tutte le schede lo stesso valore Y e usare X per l'ordine delle schede.

Spazi di riempimento: WidthFit

L'overflow nell'ultimo esempio ha creato uno spazio dopo la seconda scheda Order status, cioè la seconda scheda nella prima riga. È possibile regolare manualmente le proprietà Width delle due schede rimanenti per riempire lo spazio, ma questo approccio è difficile.

In alternativa, usare la proprietà WidthFit. Se questa proprietà è impostata su true per una o due schede in una riga, qualsiasi spazio rimanente sulla riga sarà diviso uniformemente tra di esse. È per questo comportamento che è stato detto in precedenza che la proprietà Width di una scheda è un minimo e ciò che effettivamente si vede può essere più ampio. Questa proprietà non causerà la riduzione di una scheda, ma solo la sua espansione.

Se si imposta WidthFit su true nella scheda Order status, riempie lo spazio disponibile mentre la prima scheda rimane invariata:

WidthFit impostato su true nella seconda scheda

Se si imposta anche WidthFit su true nella scheda Order date, entrambe le schede suddivideranno in modo uniforme lo spazio disponibile:

WidthFit impostato su true nella prima e nella seconda scheda

Si noti che i quadratini di ridimensionamento in queste schede prendono in considerazione la larghezza extra fornita da WidthFit, non la larghezza minima fornita dalla proprietà Width. Può essere fuorviante modificare la proprietà Width mentre WidthFit è attivato; è possibile disattivarlo, apportare modifiche a Widthe quindi riattivarlo.

Quando potrebbe essere utile WidthFit? Se un campo viene usato solo in alcune situazioni, è possibile impostare la relativa proprietà Visible su false e le altre schede sulla riga riempiranno automaticamente lo spazio intorno a esso. Si potrebbe voler usare una formula che mostra un campo solo quando un altro campo ha un valore specifico.

In questo caso si imposterà la proprietà Visible del campo Order status su uno statico false:

WidthFit impostato su true nella prima scheda con stato dell'ordine invisibile

Con la seconda scheda rimossa in modo efficace, la terza scheda può ora restituire alla stessa riga come la prima scheda. La prima scheda ha ancora WidthFit impostato su true, quindi si espande da sola per riempire lo spazio disponibile.

Dal momento che la scheda Order status è invisibile, non è possibile selezionarla nell'area di disegno. Tuttavia, è possibile selezionare qualsiasi controllo, visibile o non, nell'elenco gerarchico dei controlli sul lato sinistro della schermata.

Altezza

La proprietà Height determina l'altezza di ogni scheda. Le schede hanno l'equivalente di WidthFit per Height, ed è sempre impostato su true. Si immagini che esista una proprietà HeightFit, ma non la si cerchi nel prodotto perché tale proprietà non è ancora esposta.

Non è possibile disabilitare questo comportamento, pertanto modificare l'altezza delle schede può risultare complesso. Tutte le schede in una riga vengono visualizzate come se avessero la stessa altezza della scheda più alta. Potrebbe essere visualizzata una riga simile alla seguente:

WidthFit impostato su true nella prima scheda con stato dell'ordine invisibile

Quale scheda sta creando l'altezza della riga? Nel grafico precedente è selezionata la scheda Total amount che appare alta, ma la relativa proprietà Height è impostata su 80 (come l'altezza della prima riga). Per ridurre l'altezza di una riga, è necessario ridurre la proprietà Height della scheda più alta in tale riga e non è possibile identificare la scheda più alta senza rivedere la proprietà Height di ogni scheda.

AutoHeight

Una scheda può essere più alta del previsto se contiene un controllo per il quale la proprietà AutoHeight è impostata su true. Ad esempio, molte schede contengono un'etichetta che visualizza un messaggio di errore se il valore del campo comporta un problema di convalida.

Senza il testo da visualizzare (nessun errore), l'etichetta comprime l'altezza portandola a zero. Se si non conoscono risultati migliori, non si sa come si è verificato, ed è così che dovrebbe essere:

Le schede che contengono i controlli con AutoHeight impostati su true non mostrano nessuna altezza

A sinistra dello schermo, l'elenco dei controlli mostra ErrorMessage1, che è il controllo etichetta in uso. Quando si aggiorna un'app, è possibile selezionare questo controllo per assegnarle un'altezza e visualizzare i quadratini di ridimensionamento con cui è possibile posizionare e ridimensionare il controllo. La "A" in una casella blu indica che il controllo ha AutoHeight impostato su true:

In fase di creazione i controlli di AutoHeight mostrano delle altezze che rendono più semplice trascinare e rilasciare

La proprietà Text di questo controllo è impostata su Parent.Error, che si usa per ottenere informazioni sugli errori dinamici basati su nessuna regola di convalida. A scopo illustrativo, impostiamo in modo statico la proprietà Text di questo controllo, che ne aumenta l'altezza (e, di conseguenza, l'altezza della scheda) per contenere la lunghezza del testo:

Con un messaggio di errore, il controllo e la scheda aumentano automaticamente

Rendiamo il messaggio di errore un po' più lungo, e il controllo e la scheda aumenteranno nuovamente. Notare che la riga complessiva cresce in altezza, mantenendo l'allineamento verticale tra le schede:

Con un messaggio di errore più lungo, il controllo e la scheda aumentano ulteriormente, e notare che le schede sulla stessa riga aumentano tutte insieme