Informazioni sul layout dei moduli dati in Microsoft PowerAppsUnderstand data-form layout in Microsoft PowerApps

In PowerApps è possibile creare in tutta semplicità moduli interessanti ed efficienti da usare.In PowerApps, you can easily create forms that are attractive and efficient to use. Si consideri, ad esempio, questo modulo di base per registrare ordini di vendita:For example, consider this basic form for recording sales orders:

Ordine di vendita di esempio

Questa esercitazione illustra i passaggi per creare questo modulo.In this tutorial, we'll walk through the steps to create this form. Verranno esaminati anche alcuni argomenti avanzati, ad esempio il ridimensionamento dinamico dei campi per riempire lo spazio disponibile.We'll also look at some advanced topics, such as dynamic sizing of fields to fill available space.

Prima di iniziareBefore you start

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.If you're new to PowerApps (or have only generated apps automatically), you'll want to build an app from scratch before you dive into this topic. 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.By building an app from scratch, you'll become familiar with required concepts, such as adding data sources and controls, that are mentioned but not explained in this topic.

  1. Creare un'app per tablet da zero.Create a tablet app from scratch.

    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.Everything discussed in this topic also applies to phone layouts, but phone apps often have only one vertical column.

  2. Aggiungere l'entità Sales order nel Common Data Service come origine dati per l'app.Add the Sales order entity in the Common Data Service as a data source for the app.

    Fuori dall'ambito di questa esercitazione, è possibile usare qualsiasi origine dati, compresi gli elenchi di SharePoint e le tabelle di Excel.Outside of this tutorial, you can use any data source, including SharePoint lists and Excel tables.

  3. Aggiungere un controllo Raccolta verticale e impostarne la proprietà Items su Sales order.Add a vertical Gallery control, and set its Items property to 'Sales order'.

    (facoltativo) Per trovare gli esempi in questa esercitazione, modificare il Layout della raccolta in modo da mostrare solo Titolo e sottotitolo.(optional) To match the examples in this tutorial, change the gallery's Layout to show only Title and subtitle.

    Elenco di ordini di vendita

  4. Nella raccolta, fare clic o toccare SO004.In the gallery, click or tap SO004.

    Elenco di ordini di vendita

    Questo record verrà visualizzato nel modulo che si compilerà seguendo i passaggi elencati più avanti in questo argomento.This record will appear in the form that you build by following steps later in this topic.

Aggiungere una barra del titoloAdd a title bar

  1. Aggiungere una schermata vuota in cui verrà inserito il modulo.Add a blank screen where you'll put the form.

    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.Outside of this tutorial, you can put the Gallery and Edit form controls on the same screen, but you'll have more room to work with if you put them on separate screens.

  2. Nella parte superiore della nuova schermata aggiungere un controllo Etichetta e impostare la relativa proprietà Text su questa espressione:At the top of the new screen, add a Label control, and set its Text property to this expression:
    "Sales Order " & Gallery1.Selected.SalesOrderId"Sales Order " & Gallery1.Selected.SalesOrderId

    L'etichetta mostra il numero di ordini di vendita del record selezionato nella raccolta.The label shows the sales-order number of the record that you selected in the gallery.

  3. (facoltativo) Formattare l'etichetta come indicato di seguito:(optional) Format the label as follows:

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

      Barra del titolo

Aggiungere un moduloAdd a form

  1. Aggiungere un controllo Modulo di modifica, quindi spostarlo e ridimensionarlo in modo da riempire lo schermo sotto l'etichetta.Add an Edit form control, and then move and resize it to fill the screen under the label.

    Nel passaggio successivo, connettere il controllo modulo all'origine dati Sales order usando il riquadro di destra, non la barra della formula.In the next step, you'll connect the form control to the Sales order data source by using the right-hand pane, not the formula bar. Se si usa la barra della formula, il modulo non mostra nessun campo per impostazione predefinita.If you use the formula bar, the form won't show any fields by default. Per visualizzare tutti i campi desiderati, selezionare una o più caselle di controllo nel riquadro di destra.You can always show any fields that you want by selecting one or more check boxes in the right-hand pane.

  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.In the right-hand pane, click or tap the down arrow next to No data source selected, and then click or tap Sales order.

    Viene visualizzato un set predefinito di campi dell'origine dati Sales order in un semplice layout a tre colonne.A default set of fields from the Sales order data source will appear in a simple, three-column layout. Tuttavia, molte sono vuote, e potrebbe volerci qualche minuto per visualizzare le posizioni finali.However, many are blank, and they may take a few moments to settle into their final positions.

  3. Impostare la proprietà Item del modulo su Gallery1.Selected.Set the form's Item property to 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.The form shows the record that you selected in the gallery, but the default set of fields might not match what you want in your final product.

  4. Nel riquadro di destra, nascondere ciascuno di questi campi deselezionando la relativa casella di controllo:In the right-hand pane, hide each of these fields by clearing its checkbox:

    • Sales order IDSales order ID
    • AccountAccount
    • Sales personSales person
    • Account contactAccount contact
  5. Spostare il campo Order status trascinandolo a sinistra e quindi rilasciandolo sull'altro lato del campo Customer purchase order reference.Move the Order status field by dragging it to the left and then dropping it on the other side of the Customer purchase order reference field.

    La schermata sarà simile a questo esempio:Your screen should resemble this example:

    Ordine di vendita in un layout di base a tre colonne

Selezionare una scheda di datiSelect a data card

Ciascun campo visualizzato dispone di una scheda di dati corrispondente nel modulo.Each field displayed has a corresponding data card on the form. 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.This card comprises a set of controls for the field title, an input box, a star (which appears if the field is required), and a validation error message.

È anche possibile selezionare le schede direttamente nel modulo.You can also select cards directly on the form. Se selezionata, viene visualizzato un sottotitolo nero sopra la scheda.When a card is selected, a black caption appears above it.

Scelta della scheda di dati

Nota: per eliminare una scheda (non solo nasconderla), selezionarla e quindi premere CANC.Note: To delete a card (not just hide it), select it, and then press Delete.

Organizzare le schede in colonneArrange cards in columns

Per impostazione predefinita, i moduli nelle app per tablet hanno tre colonne e quelli nelle app per telefoni ne hanno una sola.By default, forms in tablet apps have three columns, and those in phone apps have one. È possibile specificare non solo il numero di colonne in un modulo, ma anche se tutte le schede devono rientrare nei bordi della colonna.You can specify not only how many columns a form has but also whether all cards should fit within column borders.

In questa immagine, il numero di colonne nel modulo è stato modificato da tre a quattro con la casella di controllo Blocca sulle colonne selezionata.In this graphic, the number of columns in the form was changed from three to four with the Snap to columns check box selected. Le schede del modulo sono state disposte automaticamente per adattarle al nuovo layout.The cards in the form were arranged automatically to fit the new layout.

Ordine di vendita in un layout di base a quattro colonne

Ridimensionare le schede tra più colonneResize cards across multiple columns

A seconda dei dati contenuti in ogni scheda, è consigliabile adattare alcune schede in una singola colonna e disporne altre su più colonne.Depending on the data in each card, you might want some cards to fit in a single column and other cards to span multiple columns. 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.If a card contains more data than you want to show in a single column, you can widen the card by selecting it and then dragging the grab handle on the left or right border of its selection box. Quando si trascina il quadratino, la scheda verrà "bloccata" sui limiti della colonna.As you drag the handle, the card will "snap" to column boundaries.

Per rendere la progettazione più flessibile, ma conservare una determinata struttura, è possibile aumentare il numero di colonne a 12.To make your design more flexible but retain some structure, you can increase the number of columns to 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.With that change, you can easily configure each card to span the entire form, half of the form, one-third, one-quarter, one-sixth, and so forth. Vediamolo in azione.Let's see this in action.

  1. Nel riquadro di destra, impostare il numero di colonne nel modulo su 12.In the right-hand pane, set the number of columns in the form to 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.The form doesn't visibly change, but you have more snap points as you drag the left or right grab handle.

  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.Increase the width of the Order date card by dragging the grab handle on the right one snap point to the right.

    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).The card spans four of the form's 12 columns (or 1/3 of the form), instead of only three of the form's 12 columns (or 1/4 of the form). 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.Whenever you increase a card's width by one snap point, the card spans an additional 1/12 of the form.

    Ridimensionare una scheda con trascinare e rilasciare

  3. Ripetere il passaggio precedente con le schede Order status e Customer purchase order reference.Repeat the previous step with the Order status and Customer purchase order reference cards.

    Tre schede nella prima riga

  4. Ridimensionare le schede Nome e Descrizione in modo da occupare sei colonne (o 1/2) del modulo.Resize the Name and Description cards to take up six columns (or 1/2) of the form.
  5. Estendere le prime due righe dell'indirizzo di recapito per tutta la larghezza del modulo:Make the first two lines of the delivery address stretch entirely across the form:

Ecco fatto!All done. È stato creato il modulo desiderato, combinando le righe con diversi numeri di colonne:We have our desired form, mixing rows with different numbers of columns:

Ordine di vendita nel layout a 12 colonne con ridimensionamento

Modificare i controlli in una schedaManipulate controls in a card

L'indirizzo di recapito comprende diverse informazioni che si vogliono raggruppare visivamente insieme per l'utente.The delivery address comprises several pieces of information that we want to visually group together for the user. Ogni campo rimarrà nella propria scheda di dati, ma è possibile gestire i controlli all'interno della scheda per adattarli meglio insieme.Each field will remain in its own data card, but we can manipulate the controls within the card to make them fit better together.

  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.Select the First line of Delivery address card, select the label within that card, and then delete the first three words from the text.

    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.Select the Second line of Delivery address card, select the label within that card, and then delete all of the text in it.

    Si può essere tentati di rimuovere il controllo etichetta e in molti casi funzionerà bene.It may be tempting to simply remove the label control and, in many cases, that will work fine. Tuttavia, le formule potrebbero dipendere dalla presenza di tale controllo.But formulas might depend on that control being present. L'approccio più sicuro è quello di rimuovere il testo o impostare la proprietà del controllo Visible su false.The safer approach is to remove the text or to set the Visible property of the control to 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.In the same card, move the text input box over the label to reduce the space between the first and second lines of the address.

    L'altezza della scheda si riduce quando il relativo contenuto richiede meno spazio.The height of the card shrinks when its contents take up less space.

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

Ora è possibile concentrare l'attenzione sulla terza riga dell'indirizzo.Now let's turn our attention to the third line of the address. 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.Similar to what we just did, let's shorten the text of each label for these cards and arrange the Text input box to be to the right of each label. Ecco la procedura per la scheda Stato:Here are the steps for the State card:

PassaggioStep DescrizioneDescription RisultatoResult
11 Selezionare la scheda Stato in modo che i quadratini di ridimensionamento appaiano intorno a essa.Select the State card so that grab handles appear around it. Selezionare una scheda
22 Selezionare l'etichetta in questa scheda in modo che i quadratini di ridimensionamento appaiano intorno a essa.Select the label within this card so that grab handles appear around it. Selezionare un controllo all'interno di una scheda
33 Posizionare il cursore a destra del testo e quindi eliminare la parte che non è più necessaria.Place the cursor to the right of the text, and then delete the portion that we don't need. Modificare il testo all'interno di un controllo in una scheda
44 Usando i quadratini di ridimensionamento sui lati, ridimensionare il controllo etichetta per adattarlo al nuovo formato di testo.Using the grab handles on the sides, size the label control to fit the new text size. Ridimensionare un controllo all'interno di una scheda
55 Selezionare il controllo di input di testo all'interno di questa scheda.Select the text input control within this card. Selezionare un controllo diverso nella scheda
66 Usando i quadratini di ridimensionamento sui lati, ridimensionare il controllo input di testo per adattarlo alle dimensioni desiderate.Using the grab handles on the sides, size the text input control to the size that you want. Ridimensionare un controllo all'interno di una scheda
77 Trascinare la casella di input di testo in alto e a destra del controllo etichetta e rilasciarla.Drag the text input box up and to the right of the label control, and then drop the text input box. Spostare un controllo all'interno di una scheda
Le modifiche alla scheda Stato sono ora complete.Our modifications to the State card are now complete. Le modifiche alla scheda sono ora complete

Il risultato per l'indirizzo completo della terza riga:The result for the complete third address line:

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à.Note that many of the cards start out with dynamic formulas for their properties. Ad esempio, il controllo di input di testo che è stato precedentemente ridimensionato e spostato, aveva una proprietà Width basata sulla larghezza dell'elemento padre.For example, the Text input control that we resized and moved above had a Width property based on the width of its parent. Quando si sposta o si ridimensiona un controllo, queste formule dinamiche vengono sostituite con valori statici.When you move or resize a control, these dynamic formulas are replaced with static values. È possibile eventualmente ripristinare le formule dinamiche usando la barra della formula.If you want, you can restore the dynamic formulas by using the formula bar.

Attivare o disattivare il bloccaggio sulle colonneTurning off Snap to columns

In alcuni casi sarà possibile fornire un controllo più preciso rispetto alle 12 colonne standard.Sometimes you'll want finer control than the standard 12 columns can provide. In questi casi è possibile disattivare Blocca sulle colonne e posizionare le schede manualmente.For these cases, you can turn off Snap to columns and then position cards manually. 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.The form will continue snapping to 12 columns, but you can also hold down the Alt key to manually position and size a card as you wish.

In questo esempio i quattro componenti che costituiscono la terza riga dell'indirizzo hanno tutti esattamente la stessa larghezza.In our example, the four components that make up the third line of the address all have exactly the same width. 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.But this may not be the best layout, as city names are longer than state abbreviations, and the Text input box for countries/regions is short due to the length of its label.

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.To optimize this space, turn off Snap to columns in the right-hand pane and then hold down the Alt key while sizing and positioning these cards. Ogni volta che si tiene premuto il tasto ALT, tutti i controlli mostrano sottotitoli di colore nero.Whenever you hold down the Alt key, all controls show black captions. Questo comportamento è intenzionale e ha lo scopo di mostrare i nomi dei controlli.This behavior is by design to show you control names.

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:After careful positioning, the result has appropriate sizes for each field and even spacing horizontally between fields:

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?In summary, what are the differences when Snap to columns is on versus off?

ComportamentoBehavior Blocca sulle colonne attivatoSnap to columns On Blocca sulle colonne disattivatoSnap to columns Off
Ridimensionare il bloccaggio aResize snaps to Numero di colonne selezionate:Number of columns you select:
1, 2, 3, 4, 6 o 121, 2, 3, 4, 6, or 12
12 colonne12 columns
Il ridimensionamento del bloccaggio può essere sottoposto a overrideResize snap can be overriden NoNo Sì, con il tasto ALTYes, with Alt key
Le schede modificano automaticamente il layout tra le righe (vedere altre informazioni più avanti in questo articolo)Cards automatically re-layout between rows (more on this later) Yes NoNo

Impostare larghezza e altezzaSet width and height

Analogamente a quanto accade con tutti gli elementi di PowerApps, il layout del modulo è disciplinato dalle proprietà sui controlli della scheda.As with everything in PowerApps, the form's layout is governed by properties on the card controls. 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.As already described, you can change the values of these properties by dragging controls to different locations or dragging grab handles to resize controls. 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.But you'll discover situations in which you'll want to understand and manipulate these properties more precisely, especially when making your forms dynamic with formulas.

Layout di base: X, Y e WidthBasic Layout: X, Y, and Width

Le proprietà X e Y controllano la posizione delle schede.The X and Y properties control the position of cards. Quando si usano i controlli sull'area di disegno non elaborata queste proprietà forniscono una posizione assoluta.When we work with controls on the raw canvas, these properties provide an absolute position. In un modulo, queste proprietà hanno un significato diverso:In a form, these properties have a different meaning:

  • X: ordine all'interno di una riga.X: Order within a row.
  • Y: numero di riga.Y: Row number.

Analogamente ai controlli nell'area di disegno, la proprietà Width specifica la larghezza minima della scheda (altre informazioni sull'aspetto minimo tra qualche secondo).Similar to controls on the canvas, the Width property specifies the minimum width of the card (more on the minimum aspect in a moment).

Diamo un'occhiata alle proprietà X, Y, e Width delle schede nel modulo:Let's take a look at the X, Y, and Width properties of the cards in our form:

Coordinate X e Y del modulo dell'ordine di vendita

Overflow delle righeOverflowing rows

Cosa accade se le schede in una riga sono troppo grandi per adattarsi a tale riga?What happens if the cards on a row are too wide to fit on that row? In genere non occorre preoccuparsi di questa possibilità.Normally you don't need to worry about this possibility. 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.With Snap to columns on, these three properties will automatically be adjusted so that everything fits nicely within rows without overflowing.

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.But with Snap to columns turned off or a formula-based Width on one or more of your cards, overflowing a row can happen. In questo caso le schede eseguiranno automaticamente il wrapping per creare in modo efficace una nuova riga.In this case, the cards will automatically wrap so that, effectively, another row is created. Ad esempio, modificare manualmente la proprietà Width della scheda Customer purchase order reference (prima riga, terzo elemento) su 500:For example, let's manually change the Width property of our Customer purchase order reference card (first row, third item) to 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.The three cards on the top row no longer fit horizontally, and another row has been created to wrap the 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.The Y coordinate for all these cards is still the same at 0, and the Name and Description cards still have a Y of 1. Le schede con diversi valori di Y non verranno unite tra le righe.Cards that have different Y values aren't merged across rows.

È 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.You can use this behavior to create a fully dynamic layout, where cards are placed based on a Z-order, filling across as much as possible before moving to the next row. Per ottenere questo effetto, assegnare a tutte le schede lo stesso valore Y e usare X per l'ordine delle schede.To achieve this effect, give all the cards the same Y value, and use X for the order of the cards.

Spazi di riempimento: WidthFitFilling spaces: WidthFit

L'overflow nell'ultimo esempio ha creato uno spazio dopo la seconda scheda Order status, cioè la seconda scheda nella prima riga.The overflow in the last example created a space after the Order status card, which was the second card in the first row. È possibile regolare manualmente le proprietà Width delle due schede rimanenti per riempire lo spazio, ma questo approccio è difficile.We could manually adjust the Width properties of the two remaining cards to fill this space, but this approach is tedious.

In alternativa, usare la proprietà WidthFit.As an alternative, use the WidthFit property. 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.If this property is set to true for one or more cards in a row, any remaining space on the row will be evenly divided between them. È 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.This behavior is why we said earlier that the Width property of a card is a minimum, and what is actually seen can be wider. Questa proprietà non causerà la riduzione di una scheda, ma solo la sua espansione.This property will never cause a card to shrink, only expand.

Se si imposta WidthFit su true nella scheda Order status, riempie lo spazio disponibile mentre la prima scheda rimane invariata:If we set WidthFit to true on the Order status card, it fills the available space, while the first card remains unchanged:

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:If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

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.Note that grab handles on these cards take into account the extra width provided by WidthFit, not the minimum width provided by the Width property. Può essere fuorviante modificare la proprietà Width mentre è attivata la proprietà WidthFit. È quindi possibile disattivarla, apportare modifiche a Widthe quindi riattivarla.It can be confusing to manipulate the Width property while WidthFit is turned on; you may want to turn it off, make changes to Width, and then turn it back on.

Quando potrebbe essere utile WidthFit?When might WidthFit be useful? 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.If you have a field that is used only in certain situations, you can set its Visible property to false, and the other cards on the row will automatically fill the space around it. Si potrebbe voler usare una formula che mostra un campo solo quando un altro campo ha un valore specifico.You might want to use a formula that shows a field only when another field has a particular value.

In questo caso si imposterà la proprietà Visible del campo Order status su uno statico false:Here, we'll set the Visible property of the Order status field to a static 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.With the second card effectively removed, the third card can now return to the same row as the first card. La prima scheda ha ancora WidthFit impostato su true, quindi si espande da sola per riempire lo spazio disponibile.The first card still has WidthFit set to true, so it alone expands to fill the available space.

Dal momento che la scheda Order status è invisibile, non è possibile selezionarla nell'area di disegno.Because Order status is invisible, you can't select it as easily on the canvas. Tuttavia, è possibile selezionare qualsiasi controllo, visibile o non, nell'elenco gerarchico dei controlli sul lato sinistro della schermata.However, you can select any control, visible or not, in the hierarchical list of controls on the left side of the screen.

AltezzaHeight

La proprietà Height determina l'altezza di ogni scheda.The Height property governs the height of each card. Le schede hanno l'equivalente di WidthFit per Height, ed è sempre impostato su true.Cards have the equivalent of WidthFit for Height, and it's always set to true. Si immagini che esista una proprietà HeightFit, ma non la si cerchi nel prodotto perché tale proprietà non è ancora esposta.Imagine that a HeightFit property exists, but don't look for it in the product because such a property isn't yet exposed.

Non è possibile disabilitare questo comportamento, pertanto modificare l'altezza delle schede può risultare complesso.You can't turn off this behavior, so changing the heights of cards can be challenging. Tutte le schede in una riga vengono visualizzate come se avessero la stessa altezza della scheda più alta.All cards within a row appear to be the same height as the tallest card. Potrebbe essere visualizzata una riga simile alla seguente:You might look at a row like this:

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

Quale scheda sta creando l'altezza della riga?Which card is making the row tall? 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).In the previous graphic, the Total amount card is selected and appears tall, but its Height property is set to 80 (same as the height of the first row). 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.To reduce the height of a row, you must reduce the Height of the tallest card in that row, and you can't identify the tallest card without reviewing the Height property of each card.

AutoHeightAutoHeight

Una scheda può essere più alta del previsto se contiene un controllo per il quale la proprietà AutoHeight è impostata su true.A card might also be taller than you expect if it contains a control for which the AutoHeight property is set to true. Ad esempio, molte schede contengono un'etichetta che visualizza un messaggio di errore se il valore del campo comporta un problema di convalida.For example, many cards contain a label that displays an error message if the field's value causes a validation problem.

Senza il testo da visualizzare (nessun errore), l'etichetta comprime l'altezza portandola a zero.Without any text to display (no error), the label collapses to zero height. Se si non conoscono risultati migliori, non si sa come si è verificato, ed è così che dovrebbe essere:If you didn't know any better, you wouldn't know it was there, and that's as it should be:

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.On the left side of the screen, the list of controls shows ErrorMessage1, which is our label control. 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.As you update an app, you can select this control to give it some height and show grab handles with which you can position and size the control. La "A" in una casella blu indica che il controllo ha AutoHeight impostato su true:The "A" in a blue box indicates that the control has AutoHeight set to 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.The Text property of this control is set to Parent.Error, which is used to obtain dynamic error information based on validation rules. 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:For illustration purposes, let's statically set the Text property of this control, which will increase its height (and, by extension, the height of the card) to accommodate the length of the text:

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.Let's make the error message a little longer, and again the control and the card grow to accommodate. Notare che la riga complessiva cresce in altezza, mantenendo l'allineamento verticale tra le schede:Note that the row overall grows in height, retaining vertical alignment between the cards:

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