Información sobre el diseño de formularios de datos en Microsoft PowerAppsUnderstand data-form layout in Microsoft PowerApps

En PowerApps, puede crear fácilmente formularios que sean a la vez atractivos y eficientes.In PowerApps, you can easily create forms that are attractive and efficient to use. Por ejemplo, considere este formulario básico para grabar pedidos de ventas:For example, consider this basic form for recording sales orders:

Pedido de ventas de ejemplo

En este tutorial, se le guiará por los pasos necesarios para crear un formulario.In this tutorial, we'll walk through the steps to create this form. También se examinarán algunos temas avanzados como el cambio de tamaño dinámico de campos para llenar el espacio disponible.We'll also look at some advanced topics, such as dynamic sizing of fields to fill available space.

Antes de comenzarBefore you start

Si es la primera vez que usa PowerApps (o solo ha generado aplicaciones automáticamente), lo más recomendable es compilar una aplicación desde cero antes de profundizar en este tema.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. Mediante la compilación de una aplicación desde cero, se familiarizará con los conceptos necesarios, como agregar orígenes de datos y controles, que se mencionan, pero no se explican, en este tema.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. Cree una aplicación para tableta desde cero.Create a tablet app from scratch.

    Todo lo que se describe en este tema aquí también se aplica a los diseños para teléfono, pero las aplicaciones de teléfono suelen tener solo una columna vertical.Everything discussed in this topic also applies to phone layouts, but phone apps often have only one vertical column.

  2. Agregue la entidad Pedido de ventas en Common Data Service como origen de datos de la aplicación.Add the Sales order entity in the Common Data Service as a data source for the app.

    Fuera de este tutorial, puede utilizar cualquier origen de datos, incluidas las listas de SharePoint y las tablas de Excel.Outside of this tutorial, you can use any data source, including SharePoint lists and Excel tables.

  3. Agregue un control Galería vertical y en su propiedad Elementos, seleccione "Sales order".Add a vertical Gallery control, and set its Items property to 'Sales order'.

    (opcional) Para ajustarse a los ejemplos de este tutorial, cambie el diseño de la galería para que muestre solo el título y subtítulo.(optional) To match the examples in this tutorial, change the gallery's Layout to show only Title and subtitle.

    Lista de pedidos de ventas

  4. En la galería, pulse o haga clic en SO004.In the gallery, click or tap SO004.

    Lista de pedidos de ventas

    Este registro aparecerá en el formulario que se crea siguiendo los pasos que encontrará más adelante en este mismo tema.This record will appear in the form that you build by following steps later in this topic.

Incorporación de una barra de títuloAdd a title bar

  1. Agregue una pantalla en blanco, en la que colocará el formulario.Add a blank screen where you'll put the form.

    Fuera de este tutorial, los controles Galería y Editar formulario se pueden colocar en la misma pantalla, pero habrá más espacio para trabajar con si se colocan en pantallas independientes.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. En la parte superior de la pantalla, agregue un control Etiqueta y en su propiedad Texto escriba esta expresión: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

    La etiqueta muestra el número del pedido de ventas del registro que seleccionó en la galería.The label shows the sales-order number of the record that you selected in the gallery.

  3. (opcional) Dé formato a la etiqueta como se indica a continuación:(optional) Format the label as follows:

    1. Establezca su propiedad Align en Center.Set its Align property to Center.

    2. Establezca su propiedad Size en 20.Set its Size property to 20.

    3. Establezca su propiedad Fill en Navy.Set its Fill property to Navy.

    4. Establezca su propiedad Color en White.Set its Color property to White.

    5. Establezca su propiedad Width en Parent.Width.Set its Width property to Parent.Width.

    6. Establecer sus propiedades X e Y en 0.Set its X and Y properties to 0.

      Barra de título

Agregar un formularioAdd a form

  1. Agregue un control Editar formulario y muévalo y cámbielo de tamaño para rellenar la pantalla bajo la etiqueta.Add an Edit form control, and then move and resize it to fill the screen under the label.

    En el paso siguiente, conectará el control de formulario al origen de datos Sales order mediante el panel derecho, no la barra de fórmulas.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. Si usa la barra de fórmulas, el formulario no mostrará cambios de manera predeterminada.If you use the formula bar, the form won't show any fields by default. Siempre puede mostrar todos los campos que desee activando una o varias casillas en el panel derecho.You can always show any fields that you want by selecting one or more check boxes in the right-hand pane.

  2. En el panel derecho, pulse o haga clic en la flecha abajo junto a No se ha seleccionado un origen de datos y después en 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.

    Un conjunto de campos predeterminado del origen de datos Sales order aparecerá en un diseño sencillo de tres columnas.A default set of fields from the Sales order data source will appear in a simple, three-column layout. Sin embargo, muchos están en blanco y es posible que tarden un tiempo en quedarse en sus posiciones finales.However, many are blank, and they may take a few moments to settle into their final positions.

  3. En la propiedad Item del formulario, seleccione Gallery1.Selected.Set the form's Item property to Gallery1.Selected.

    El formulario muestra el registro que seleccionó en la galería, pero es posible que el conjunto de campos predeterminado no coincida con el que desea en el producto final.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. En el panel derecho, oculte todos estos campos, para lo que debe desactivando su casilla: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. Mueva el campo Order status, para lo que debe arrastrarlo a la izquierda y soltarlo en el otro lado 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 pantalla debe ser similar al ejemplo:Your screen should resemble this example:

    Pedido de ventas en un diseño básico de tres columnas

Seleccione una tarjeta de datosSelect a data card

Cada campo mostrado cuenta con una tarjeta de datos correspondiente en el formulario.Each field displayed has a corresponding data card on the form. Esta tarjeta consta de un conjunto de controles para el título de campo, un cuadro de entrada, una estrella (que aparece si el campo es obligatorio) y un mensaje de error de validación.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.

También puede seleccionar tarjetas directamente en el formulario.You can also select cards directly on the form. Cuando se selecciona una tarjeta, aparece un subtítulo negro sobre ella.When a card is selected, a black caption appears above it.

Selección de tarjetas de datos

Nota

Para eliminar una tarjeta (no solo ocultarla), selecciónela y presione Supr.To delete a card (not just hide it), select it, and then press Delete.

Organización de tarjetas en columnasArrange cards in columns

De forma predeterminada, los formularios de las aplicaciones para tableta tienen tres columnas, mientras que las aplicaciones para teléfono tienen una.By default, forms in tablet apps have three columns, and those in phone apps have one. Puede especificar no solo el número de columnas un formulario, sino también si todas las tarjetas deben ajustarse a los bordes de la columna.You can specify not only how many columns a form has but also whether all cards should fit within column borders.

En este gráfico, se ha cambiado el número de columnas del formulario de tres a cuatro con la casilla Ajustar en columnas activada.In this graphic, the number of columns in the form was changed from three to four with the Snap to columns check box selected. Las tarjetas del formulario se han organizado automáticamente para ajustarse al nuevo diseño.The cards in the form were arranged automatically to fit the new layout.

Pedido de ventas en un diseño básico de cuatro columnas

Cambio del tamaño de las tarjetas en varias columnasResize cards across multiple columns

En función de los datos que haya en cada tarjeta, es posible que desee que algunas tarjetas quepan en una sola columna, mientras que otras que abarcan varias columnas.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. Si una tarjeta contiene más datos de los que desea mostrar en una sola columna, puede ensancharla, para lo que debe seleccionarla y, después, arrastrar el controlador de agarre de los bordes izquierdo o derecho de su cuadro de selección.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. Al arrastrar el controlador, la tarjeta se "ajustará" a los límites de la columna.As you drag the handle, the card will "snap" to column boundaries.

Para aumentar la flexibilidad del diseño, pero conservar cierta estructura, puede aumentar el número de columnas a 12.To make your design more flexible but retain some structure, you can increase the number of columns to 12. Con ese cambio, puede configurar fácilmente cada tarjeta para que abarque todo el formulario, la mitad del formulario, un tercio, un cuarto, un sexto, etc.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. Vamos a ver esto en acción.Let's see this in action.

  1. En el panel derecho, defina el número de columnas del formulario, 12.In the right-hand pane, set the number of columns in the form to 12.

    Especificar número de columnas

    El formulario no cambia visiblemente, pero tendrá más puntos de acoplamiento al arrastrar el controlador de agarre derecho o izquierdo.The form doesn't visibly change, but you have more snap points as you drag the left or right grab handle.

  2. Para aumentar el ancho de la tarjeta Order date, arrastre hacia la derecha el controlador de agarre del punto de acoplamiento derecho.Increase the width of the Order date card by dragging the grab handle on the right one snap point to the right.

    La tarjeta abarca cuatro de 12 columnas del formulario (o 1/3 del formulario), en lugar de solo tres de las 12 columnas del formulario (o 1/4 del formulario).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). Cada vez que aumenta el ancho de la tarjeta en un punto de acoplamiento, la tarjeta abarca un 1/12 adicional del formulario.Whenever you increase a card's width by one snap point, the card spans an additional 1/12 of the form.

    Cambiar el tamaño de una tarjeta con arrastrar y colocar

  3. Repita el paso anterior con las tarjetas Order status y Customer purchase order reference.Repeat the previous step with the Order status and Customer purchase order reference cards.

    Las tres tarjetas de la primera fila

  4. Cambie el tamaño de las tarjetas Name y Description para que ocupen seis columnas (o 1/2) del formulario.Resize the Name and Description cards to take up six columns (or 1/2) of the form.

  5. Estire las dos primeras líneas de la dirección de envío para que ocupen todo el formulario:Make the first two lines of the delivery address stretch entirely across the form:

¡Listo!All done. El formulario deseado, en el que se mezclan filas con distintos números de columnas, está listo:We have our desired form, mixing rows with different numbers of columns:

Pedido de ventas en diseño de 12 columnas con cambio de tamaño

Manipulación de los controles de una tarjetaManipulate controls in a card

La dirección de entrega consta de varios datos que se desean mostrar de forma visualmente agrupada al usuario.The delivery address comprises several pieces of information that we want to visually group together for the user. Cada campo permanecerá en su propia tarjeta de datos, pero se pueden manipular los controles de la tarjeta para que se ajusten mejor juntos.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. Seleccione la tarjeta First line of Delivery address, seleccione la etiqueta de dicha tarjeta y elimine las tres primeras palabras del texto.Select the First line of Delivery address card, select the label within that card, and then delete the first three words from the text.

    Dirección de entrega de pedido de venta: cambio de nombre de la etiqueta de la primera línea

  2. Seleccione la tarjeta Second line of Delivery address, seleccione la etiqueta de dicha tarjeta y elimine todo el texto.Select the Second line of Delivery address card, select the label within that card, and then delete all of the text in it.

    Puede ser tentador quitar simplemente el control de etiqueta, y en muchos casos será suficiente.It may be tempting to simply remove the label control and, in many cases, that will work fine. Sin puede que haya fórmulas que dependan de que dicho control esté presente.But formulas might depend on that control being present. El enfoque más seguro es quitar el texto o establecer la propiedad Visible del control en false.The safer approach is to remove the text or to set the Visible property of the control to false.

    Dirección de entrega de pedido de venta: cambio de nombre de la etiqueta de la segunda línea

  3. En la misma tarjeta, mueva el cuadro de entrada de texto sobre la etiqueta para reducir el espacio entre la primera y la segunda línea de la dirección.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.

    El alto de la tarjeta se reduce cuando su contenido ocupa menos espacio.The height of the card shrinks when its contents take up less space.

    Dirección de entrega de pedido de venta: cambio de nombre de la etiqueta de la segunda línea

Ahora se va a prestar atención a la tercera línea de dirección.Now let's turn our attention to the third line of the address. De forma similar al paso anterior, se va a reducir el texto de cada etiqueta para estas tarjetas y a mover el cuadro de entrada de texto a la derecha de cada etiqueta.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. Estos son los pasos para la tarjeta State:Here are the steps for the State card:

PasoStep DescripciónDescription ResultadoResult
11 Seleccione la tarjeta State para que aparezcan controladores de agarre alrededor.Select the State card so that grab handles appear around it. Seleccionar una tarjeta
22 Seleccione la etiqueta de la tarjeta para que aparezcan controladores de agarre alrededor.Select the label within this card so that grab handles appear around it. Seleccionar un control dentro de una tarjeta
33 Coloque el cursor a la derecha del texto y elimine la parte que no sea necesaria.Place the cursor to the right of the text, and then delete the portion that we don't need. Cambiar el texto de un control dentro de una tarjeta
44 Use los controladores de agarre de los lados y cambie el tamaño del control de etiqueta para ajustarlo al nuevo tamaño del texto.Using the grab handles on the sides, size the label control to fit the new text size. Cambiar el tamaño de un control dentro de una tarjeta
55 Seleccione el control de entrada de texto dentro de esta tarjeta.Select the text input control within this card. Seleccionar un control diferente dentro de la tarjeta
66 Con los controladores de agarre de los lados, cambie el tamaño del control de entrada de texto al que desee.Using the grab handles on the sides, size the text input control to the size that you want. Cambiar el tamaño de un control dentro de una tarjeta
77 Arrastre el cuadro de entrada de texto hacia arriba y a la derecha del control de etiqueta y suelte el cuadro de entrada de texto.Drag the text input box up and to the right of the label control, and then drop the text input box. Mover un control dentro de una tarjeta
Las modificaciones en la tarjeta State están completadas.Our modifications to the State card are now complete. Modificaciones en la tarjeta completadas

El resultado de la tercera línea de dirección:The result for the complete third address line:

Dirección de entrega de pedido de ventas: tercera línea más concisa

Tenga en cuenta que muchas de las tarjetas empiezan con fórmulas dinámicas para las propiedades.Note that many of the cards start out with dynamic formulas for their properties. Por ejemplo, el control Entrada de texto cuyo tamaño hemos cambiado y encima del que nos hemos movido tenía una propiedad Ancho basada en el ancho de su control principal.For example, the Text input control that we resized and moved above had a Width property based on the width of its parent. Cuando se mueve o se cambia el tamaño de un control, estas fórmulas dinámicas se reemplazan por valores estáticos.When you move or resize a control, these dynamic formulas are replaced with static values. Si lo desea, puede restaurar las fórmulas dinámicas mediante la barra de fórmulas.If you want, you can restore the dynamic formulas by using the formula bar.

Desactivar Ajustar en columnasTurning off Snap to columns

A veces es conveniente proporcionar un control más preciso que el pueden hacerlo las 12 columnas estándar.Sometimes you'll want finer control than the standard 12 columns can provide. Para estos casos, puede desactivar Ajustar en columnas y colocar las tarjetas manualmente.For these cases, you can turn off Snap to columns and then position cards manually. El formulario seguirá ajustándose a 12 columnas, pero también es posible mantener presionada la tecla Alt para colocar una tarjeta y cambiarla de tamaño manualmente como desee.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.

En este ejemplo, los cuatro componentes que constituyen la tercera línea de la dirección tienen exactamente la misma anchura.In our example, the four components that make up the third line of the address all have exactly the same width. Pero es posible que éste no sea el diseño óptimo, ya que los nombres de ciudad son más largos que los nombres de estado y el cuadro de entrada de texto para países o regiones es corto debido a la longitud de la etiqueta.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.

Para optimizar este espacio, desactive Ajustar en columnas en el panel derecho y, después, mantenga presionada la tecla Alt mientras ajusta el tamaño y coloca estas tarjetas.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. Cada vez que mantenga presionada la tecla Alt, todos los controles mostrarán subtítulos negros.Whenever you hold down the Alt key, all controls show black captions. Este comportamiento es por diseño para mostrar los nombres de los controles.This behavior is by design to show you control names.

Posición y cambio de tamaño con la tecla ALT presionada

Después de colocarlas con cuidado, se logran tamaños adecuados para cada campo y un espaciado horizontal uniforme entre los campos:After careful positioning, the result has appropriate sizes for each field and even spacing horizontally between fields:

Dirección de entrega de pedido de venta: tercera línea en la posición correcta

En resumen, ¿cuáles son las diferencias cuando la opción Ajustar en columnas está activada y desactivada?In summary, what are the differences when Snap to columns is on versus off?

ComportamientoBehavior Ajustar en columnas activadaSnap to columns On Ajustar en columnas desactivadaSnap to columns Off
El cambio de tamaño se ajusta aResize snaps to Número de columnas que selecciona:Number of columns you select:
1, 2, 3, 4, 6 o 121, 2, 3, 4, 6, or 12
12 columnas12 columns
Se puede invalidar el ajuste de cambio de tamañoResize snap can be overriden NoNo Sí, con la tecla AltYes, with Alt key
Se cambia el diseño de las tarjetas automáticamente entre filas (se explica más adelante)Cards automatically re-layout between rows (more on this later) Yes NoNo

Establecer ancho y altoSet width and height

Como con todo en PowerApps, el diseño del formulario se rige por las propiedades de los controles de tarjeta.As with everything in PowerApps, the form's layout is governed by properties on the card controls. Como ya se ha descrito, para cambiar los valores de estas propiedades tiene que arrastrar controles a ubicaciones diferentes o arrastrar los controladores de agarre para cambiar el tamaño de los controles.As already described, you can change the values of these properties by dragging controls to different locations or dragging grab handles to resize controls. Pero encontrará situaciones en las que deseará conocer y manipular estas propiedades con mayor precisión, especialmente al usar fórmulas para que los formularios sean dinámicos.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.

Diseño básico: X, Y y AnchoBasic Layout: X, Y, and Width

Las propiedades X e Y controlan la posición de las tarjetas.The X and Y properties control the position of cards. Cuando se trabaja con controles en el lienzo en blanco, estas propiedades proporcionan una posición absoluta.When we work with controls on the raw canvas, these properties provide an absolute position. En un formulario, estas propiedades tienen un significado diferente:In a form, these properties have a different meaning:

  • X: orden dentro de una fila.X: Order within a row.
  • Y: número de fila.Y: Row number.

De forma similar a los controles en el lienzo, la propiedad Ancho especifica la anchura mínima de la tarjeta (más información sobre el aspecto mínimo en un momento).Similar to controls on the canvas, the Width property specifies the minimum width of the card (more on the minimum aspect in a moment).

Aquí se ven las propiedades X, Y y Ancho de las tarjetas en el formulario:Let's take a look at the X, Y, and Width properties of the cards in our form:

Formulario de pedido de ventas: coordenadas X e Y

Filas desbordantesOverflowing rows

¿Qué ocurre si las tarjetas de una fila son demasiado anchas para caber en ella?What happens if the cards on a row are too wide to fit on that row? Por lo general, no es necesario que se preocupe por esta posibilidad.Normally you don't need to worry about this possibility. Con la opción Ajustar en columnas activada, estas tres propiedades se ajustarán automáticamente para que todo quepa en las filas sin desbordarse.With Snap to columns on, these three properties will automatically be adjusted so that everything fits nicely within rows without overflowing.

Sin embargo, con la opción Ajustar en columnas desactivada o con una propiedadAncho basada en fórmula en una o varias de las tarjetas, puede que se desborde una fila.But with Snap to columns turned off or a formula-based Width on one or more of your cards, overflowing a row can happen. En este caso, las tarjetas se ajustarán automáticamente para que se cree otra fila.In this case, the cards will automatically wrap so that, effectively, another row is created. Por ejemplo, se cambia manualmente la propiedad Ancho de la tarjeta Referencia de pedido de compra de cliente (primera fila, tercer elemento) a 500:For example, let's manually change the Width property of our Customer purchase order reference card (first row, third item) to 500:

Cambio de tamaño manual de la tarjeta, redistribución a una nueva fila

Las tres tarjetas de la fila superior ya no caben horizontalmente y que se ha creado una fila para ajustar lo que desborda.The three cards on the top row no longer fit horizontally, and another row has been created to wrap the overflow. La coordenada Y de todas estas tarjetas sigue siendo la misma, 0, mientras que las tarjetas Nombre y Descripción siguen teniendo 1 como valor de Y.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. Las tarjetas que tienen diferentes valores de Y no se combinan en filas.Cards that have different Y values aren't merged across rows.

Este comportamiento se puede usar para crear un diseño totalmente dinámico en el que las tarjetas se colocan en función de un orden Z, rellenando el mayor espacio posible antes de pasar a la siguiente fila.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. Para lograr este efecto, asigne a todas las tarjetas el mismo valor de Y y use X para el orden de las tarjetas.To achieve this effect, give all the cards the same Y value, and use X for the order of the cards.

Rellenar espacios: WidthFit (AjusteDeAncho)Filling spaces: WidthFit

El desbordamiento del último ejemplo creaba un espacio después de Estado de pedido, que era la segunda tarjeta de la primera fila.The overflow in the last example created a space after the Order status card, which was the second card in the first row. Se podrían ajustar manualmente los valores de la propiedad Ancho de las dos tarjetas restantes para llenar este espacio, pero este método es tedioso.We could manually adjust the Width properties of the two remaining cards to fill this space, but this approach is tedious.

Como alternativa, use la propiedad WidthFit (AjusteDeAncho).As an alternative, use the WidthFit property. Si esta propiedad establecida en True en una o varias tarjetas de una fila, el espacio restante de la fila se dividirá uniformemente entre ellas.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. A este comportamiento es a lo que se debe que antes se indicara que la propiedad Ancho de una tarjeta es un mínimo y que lo que se ve en realidad puede ser más ancho.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. Esta propiedad nunca hará que una tarjeta encoja, solo que se expanda.This property will never cause a card to shrink, only expand.

Si en WidthFit (AjusteDeAncho) se selecciona true en la tarjeta Order status, rellena el espacio disponible, mientras que la primera tarjeta permanece sin cambios:If we set WidthFit to true on the Order status card, it fills the available space, while the first card remains unchanged:

WidthFit (AjusteDeAncho) establecida en True en la segunda tarjeta

Si WidthFit (AjusteDeAncho) también se establece en true en la tarjeta Fecha de pedido, ambas tarjetas se dividirán uniformemente el espacio disponible:If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

WidthFit (AjusteDeAncho) establecida en True en la primera y segunda tarjeta

Observe que los controles de agarre en estas tarjetas tienen en cuenta el ancho adicional proporcionado por WidthFit (AjusteDeAncho), no el ancho mínimo proporcionado por la propiedad Ancho.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. Puede resultar confuso manipular la propiedad Ancho con la propiedad WidthFit (AjusteDeAncho) activada; puede desactivarla, realizar cambios en Ancho y volver a activarla.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.

¿Cuando podría ser útil WidthFit (AjusteDeAncho)?When might WidthFit be useful? Si tiene un campo que se usa solo en determinadas situaciones, puede establecer su propiedad Visible en false y las restantes tarjetas de la fila rellenarán automáticamente el espacio alrededor de ella.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. Puede usar una fórmula que muestre un campo solo cuando otro campo tenga un valor determinado.You might want to use a formula that shows a field only when another field has a particular value.

En este caso, se establecerá la propiedad Visible del campo Estado de pedido en un valor false estático:Here, we'll set the Visible property of the Order status field to a static false:

WidthFit (AjusteDeAncho) establecida en True en la primera tarjeta con Estado de pedido invisible

Con la segunda tarjeta eliminada en la práctica, la tercera tarjeta ahora puede volver a la misma fila que la primera.With the second card effectively removed, the third card can now return to the same row as the first card. La primera tarjeta aún tiene la propiedad WidthFit (AjusteDeAncho) establecida en true, por lo que es la única que se expande para rellenar el espacio disponible.The first card still has WidthFit set to true, so it alone expands to fill the available space.

Dado que Order status no se ve, no se puede seleccionar fácilmente en el lienzo.Because Order status is invisible, you can't select it as easily on the canvas. Sin embargo, puede seleccionar cualquier control, visible o no, de la lista jerárquica de controles en el lado izquierdo de la pantalla.However, you can select any control, visible or not, in the hierarchical list of controls on the left side of the screen.

AltoHeight

La propiedad Alto rige la altura de cada tarjeta.The Height property governs the height of each card. Las tarjetas tienen el equivalente de WidthFit (AjusteDeAncho) para Alto, y siempre se establece en true.Cards have the equivalent of WidthFit for Height, and it's always set to true. Imagine que un existe una propiedad HeightFit (AjusteDeAlto), pero no lo busca en el producto porque dicha propiedad aún no está expuesta.Imagine that a HeightFit property exists, but don't look for it in the product because such a property isn't yet exposed.

No se puede desactivar este comportamiento, por lo que cambiar la altura de las tarjetas puede ser complicado.You can't turn off this behavior, so changing the heights of cards can be challenging. Todas las tarjetas de una fila parecen tener la misma altura que la tarjeta más alta.All cards within a row appear to be the same height as the tallest card. La fila podría ser similar a la siguiente:You might look at a row like this:

WidthFit (AjusteDeAncho) establecida en true en la primera tarjeta con estado de pedido invisible

¿Qué tarjeta determina la altura de la fila?Which card is making the row tall? En el gráfico anterior, la tarjeta Importe total está seleccionada y parece alta, pero su propiedad Alto está establecida en 80 (la misma altura que la primera fila).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). Para reducir el alto de una fila, debe reducir la propiedad Alto de la tarjeta más alta de dicha fila, pero dicha tarjeta no se puede identificar sin examinar la propiedad Alto de cada tarjeta.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.

AutoHeight (AlturaAutomática)AutoHeight

U na tarjeta también puede ser más alta de lo esperable si contiene un control cuya propiedad AutoHeight (AlturaAutomática) está establecida en true.A card might also be taller than you expect if it contains a control for which the AutoHeight property is set to true. Por ejemplo, muchas tarjetas contienen una etiqueta que muestra un mensaje de error si el valor del campo provoca un problema de validación.For example, many cards contain a label that displays an error message if the field's value causes a validation problem.

Si no hay texto para mostrar (no hay error), la etiqueta se contrae a una altura de valor cero.Without any text to display (no error), the label collapses to zero height. Si no lo supiera, no se daría cuenta de que está ahí, que es como debería ser:If you didn't know any better, you wouldn't know it was there, and that's as it should be:

Las tarjetas que contienen controles con AutoHeight (AlturaAutomática) establecida en True se muestran sin altura

A la izquierda de la pantalla, la lista de controles muestra ErrorMessage1 (MensajeDeError1), que es el control de etiqueta.On the left side of the screen, the list of controls shows ErrorMessage1, which is our label control. Al actualizar una aplicación, puede seleccionar este control para darle cierta altura y mostrar controladores de agarre con los que se puede colocar y ajustar su tamaño.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. Una "A" en un cuadro azul indica que el control tiene la propiedad AutoHeight (AlturaAutomática) establecido en true:The "A" in a blue box indicates that the control has AutoHeight set to true:

Durante la creación, los controles de AutoHeight (AlturaAutomática) muestran cierta altura, lo que hace que arrastrarlos y colocarlos sea más fácil.

La propiedad Texto de este control está establecida en Parent.Error, que se usa para obtener información de error dinámica basada en reglas de validación.The Text property of this control is set to Parent.Error, which is used to obtain dynamic error information based on validation rules. Con fines meramente ilustrativos, vamos a establecer de manera estática la propiedad Texto de este control, lo que aumentará su altura (y, por extensión, la de la tarjeta) para acomodarse a la longitud del texto: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 mensaje de error, el control y la tarjeta crecen de forma automática

Si el mensaje de error es un poco más largo, de nuevo el control y la tarjeta crecen para darle cabida.Let's make the error message a little longer, and again the control and the card grow to accommodate. Tenga en cuenta que la fila en general crece a lo alto, conservando la alineación vertical entre las tarjetas:Note that the row overall grows in height, retaining vertical alignment between the cards:

Con un mensaje de error más largo, el control y la tarjeta crecen aún más; observe que las tarjetas en la misma fila crecen todas juntas