Tarjetas de datosUnderstand data cards

Los controles Card son los componentes fundamentales de los controles Edit form y Display form.Card controls are the building blocks of the Edit form and Display form controls. El formulario representa todo el registro y cada tarjeta representa un único campo de ese registro.The form represents the entire record, and each card represents a single field of that record.

Puede interactuar con las tarjetas más fácilmente en el panel derecho después de seleccionar un control de formulario en el área de trabajo de diseño.You can interact with cards most easily in the right-hand pane after you select a form control in the design workspace. En este panel, puede elegir los campos que desea mostrar, cómo mostrarlos y en qué orden.In that pane, you can choose which fields to show, how to show each field, and in what order to show them. En este ejemplo se muestra un control Formulario de edición en una aplicación que se crea a partir de una lista de SharePoint denominada Assets.This example shows an Edit form control in an app built from a SharePoint list that's named Assets.

Para empezar a trabajar con las tarjetas, consulte cómo agregar un formulario y cómo entender los formularios de datos.To get started with cards, see add a form and understand data forms. En el resto de este tema se explica con más detalle cómo funcionan las tarjetas y cómo puede personalizar o incluso crear las suyas propias.The remainder of this topic goes into more detail about how cards work and how you can customize or even create your own.

Tarjetas predefinidasPredefined cards

PowerApps ofrece un conjunto predefinido de tarjetas para cadenas, números y otros tipos de datos.PowerApps offers a predefined set of cards for strings, numbers, and other data types. En el panel derecho, puede ver las variaciones disponibles y cambiar la tarjeta usada para un campo:In the right-hand pane, you can see the variations available and change the card used for a field:

En este ejemplo, se ha seleccionado una tarjeta con una sola línea de texto, pero el texto de la dirección URL ocupa más de lo que se puede mostrar en una única línea.In this example, a single-line text card is selected, but the URL's text is longer than can be shown on a single line. Vamos a cambiarla a una tarjeta con múltiples líneas de texto para ofrecer a nuestros usuarios más espacio para editar:Let's change this to a multi-line text card to give our users more room to edit:

Algunos de los campos de este origen de datos no se muestran, pero puede mostrar u ocultar un campo seleccionando su casilla.Several fields of this data source aren't being shown, but you can show or hide a field by selecting its checkbox. En este ejemplo se explica cómo mostrar el campo SecurityCode.This example illustrates how to show the SecurityCode field.

Personalizar una tarjetaCustomize a card

Las tarjetas constan de otros controles.Cards comprise other controls. En un control Formulario de edición, el usuario escribe datos en un control Entrada de texto estándar que se agrega desde la pestaña Insertar.In an Edit form control, the user enters data in a standard Text input control that you add from the Insert tab.

Analicemos un ejemplo de cambio de la apariencia de la tarjeta mediante la manipulación de los controles que aparecen en ella.Let's walk through an example of how to change a card's appearance by manipulating controls in it.

  1. En primer lugar, vamos a volver a la tarjeta que insertamos más recientemente para el campo SecurityCode.First, let's return to the card that we inserted most recently, for the SecurityCode field. Seleccione esta tarjeta pulsándola una vez o haciendo clic en ella:Select this card by clicking or tapping it once:

  2. Seleccione el control Text Input situado dentro de la tarjeta pulsando o haciendo clic en el propio control de entrada.Select the Text input control inside the card by clicking or tapping the input control itself.

  3. Mueva este control dentro de la tarjeta arrastrando el cuadro de selección y cambie su tamaño arrastrando los controladores a lo largo del borde del cuadro de selección:Move this control within the card by dragging the selection box, and resize the control by dragging the handles along the edge of the selection box:

Puede cambiar el tamaño de los controles de una tarjeta, moverlos y realizar otras modificaciones, pero no puede eliminarla sin desbloquearla primero.You can resize, move, and make other modifications to controls within a card, but you can't delete it without unlocking it first.

Desbloquear una tarjetaUnlock a card

Además de contener controles, las tarjetas constituyen en sí mismas controles que tienen propiedades y fórmulas, al igual que cualquier otro control.In addition to containing controls, cards themselves are controls that have properties and formulas just like any other control. Cuando decide mostrar un campo en un formulario, el panel derecho crea automáticamente la tarjeta y genera las fórmulas necesarias.When you choose to display a field on a form, the right-hand pane automatically creates the card for you and generates the needed formulas. Podemos ver estas fórmulas en la pestaña Avanzado del panel derecho:We can see these formulas in the Advanced tab of the right-hand pane:

Inmediatamente vemos una de las propiedades más importantes de la tarjeta: DataField.We immediately see one of the most important properties of the card: the DataField property. Esta propiedad indica qué campo del origen de datos puede ver y editar el usuario en esta tarjeta.This property indicates which field of the data source the user sees and can edit in this card.

En la pestaña Avanzado, el banner que aparece en la parte superior indica que las propiedades de esta tarjeta están bloqueadas.On the Advanced tab, the banner at the top indicates that the properties of this card are locked. También aparece un icono de bloqueo junto a las propiedades DataField, DisplayName y Required.A lock icon also appears next to the DataField, DisplayName, and Required properties. El panel derecho fue el que creó estas fórmulas y el bloqueo impide que se realicen cambios accidentales en estas propiedades.The right-hand pane created these formulas, and the lock prevents accidental changes to these properties.

Pulse o haga clic en la pancarta que aparece en la parte superior para desbloquear la tarjeta y poder modificar estas propiedades:Click or tap the banner at the top to unlock the card so that you can modify these properties:

Vamos a modificar DisplayName para agregar un espacio entre Asset e ID.Let's modify the DisplayName to put a space between Asset and ID. Al realizar este cambio, estamos alterando lo que se ha generado automáticamente.By making this change, we're altering what was generated for us. En el panel derecho, esta tarjeta tiene una etiqueta distinta:In the right-hand pane, this card has a different label:

Ahora hemos tomado el control de esta tarjeta y podemos modificarla para que se ajuste a nuestras necesidades.We've now taken control over this card and can modify it further to fit our need. Pero hemos perdido la capacidad que teníamos antes de cambiar la tarjeta de una representación a otra (por ejemplo, de texto de una sola línea a texto de múltiples líneas).But we've lost the ability to change the card from one representation to another (for example, single-line text to multi-line text) as we did before. Hemos transformado la tarjeta predefinida en una "tarjeta personalizada" sobre la que tenemos control.We've transformed the predefined card into a "custom card" that we now control.

Importante: No podrá volver a bloquear una tarjeta una vez que la haya desbloqueado.Important: You can't relock a card if you unlock it. Para volver al estado de bloqueo, quite la tarjeta y vuelva a insertarla en el panel derecho.To get a card back to a locked state, remove it, and reinsert it in the right-hand pane.

Puede cambiar la apariencia y el comportamiento de una tarjeta desbloqueada de varias formas como, por ejemplo, con la adición y eliminación de los controles dentro de ella.You can change the appearance and behavior of an unlocked card in a variety of ways, such as adding and deleting controls within it. Por ejemplo, puede agregar una forma de estrella desde el menú Iconos de la pestaña Insertar.For example, you can add a star shape from the Icons menu on the Insert tab.

Ahora, la estrella forma parte de la tarjeta y se moverá con ella si, por ejemplo, reordena las tarjetas en el formulario.The star is now a part of the card and will travel with it if, for example, you reorder the cards within the form.

Como otro ejemplo, desbloquee la tarjeta ImageURL y, a continuación, agregue un control Image en ella mediante la pestaña Insertar:As another example, unlock the ImageURL card, and then add an Image control to it from the Insert tab:

En la barra de fórmulas, establezca la propiedad Image de este control en TextBox.Text, en la que TextBox es el nombre del control Entrada de texto que contiene la URL:In the formula bar, set the Image property of this control to TextBox.Text, where TextBox is the name of the Text input control that holds the URL:

Sugerencia: presione la tecla Alt para mostrar el nombre de cada control.Tip: Press the Alt key to show the name of each control.

Ahora ya podemos ver las imágenes y editar sus direcciones URL.And now we can see the images and edit their URLs. Observe que podríamos haber usado Parent.Default como la propiedad Image, pero no se habría actualizado si el usuario hubiera cambiado la dirección URL.Note that we could have used Parent.Default as the Image property, but it wouldn't have updated if the user changed the URL.

Podemos hacer lo mismo en la segunda pantalla de esta aplicación, en la que usamos un control Formulario de presentación para mostrar los detalles de un registro.We can do the same thing on the second screen of this app, where we use a Display form control to display the details of a record. En este caso, es posible que queramos ocultar la etiqueta (establezca la propiedad Visible de la etiqueta, no la tarjeta, en false) porque el usuario no editará la dirección URL en esa pantalla:In this case, we may want to hide the label (set the Visible property of the label, not the card, to false) because the user won't edit the URL on that screen:

Interactuar con un formularioInteract with a form

Después de desbloquear una tarjeta, puede cambiar la forma en que interactúa con el formulario que la contiene.After you unlock a card, you can change how it interacts with the form that contains it.

Más adelante se muestran algunas directrices sobre cómo deben funcionar los controles con su tarjeta y cómo deben funcionar las tarjetas con el formulario.Below are some guidelines for how controls should work with their card and how the cards should work with the form. Se trata únicamente de directrices.These are only guidelines. Como ocurre con todos los controles de PowerApps, puede crear fórmulas que hagan referencia a cualquier otro control de PowerApps, y lo mismo ocurre para las tarjetas y los controles dentro de estas.As with any control in PowerApps, you can create formulas that reference any other control in PowerApps, and that's no less true for cards and controls within cards. Sea creativo: puede crear una aplicación de muchas maneras.Be creative: you can create an app in many ways.

Propiedad DataFieldDataField property

La propiedad más importante de la tarjeta es DataField.The most important property on the card is the DataField property. Esta propiedad controla la validación, qué campo se actualiza y otros aspectos de la tarjeta.This property drives validation, what field is updated, and other aspects of the card.

Información que entraInformation flowing in

Como contenedor, el formulario pone ThisItem a disposición de todas las tarjetas que incluye.As a container, the form makes ThisItem available to all cards within it. Este registro contiene todos los campos del registro actual de interés.This record contains all of the fields for the current record of interest.

La propiedad Default de todas las tarjetas debe establecerse como ThisItem.FieldName.The Default property of every card should be set to ThisItem.FieldName. En determinadas circunstancias, es posible que le interese transformar este valor cuando lo especifique.Under certain circumstances, you might want to transform this value on the way in. Por ejemplo, es posible que desee dar formato a una cadena o traducir el valor de un idioma a otro.For example, you might want to format a string or translate the value from one language to another.

Todos los controles de la tarjeta deben hacer referencia a Parent.Default para tener acceso al valor del campo.Each control within the card should reference Parent.Default to get at the field's value. Esta estrategia proporciona un nivel de encapsulación para la tarjeta, de forma que la propiedad Default de esta pueda cambiar sin que lo hagan sus fórmulas internas.This strategy provides a level of encapsulation for the card so that the card's Default property can change without changing the internal formulas of the card.

De forma predeterminada, las propiedades DefaultValue y Required se toman de los metadatos del origen de datos basándose en la propiedad DataField.By default, DefaultValue and Required properties are taken from the data source's metadata based on the DataField property. Puede reemplazar estas fórmulas con su propia lógica, integrando los metadatos del origen de datos mediante el uso de la función DataSourceInfo.You can override these formulas with your own logic, integrating the data source's metadata by using the DataSourceInfo function.

Información que saleInformation flowing out

Después de que el usuario modifique un registro usando los controles de las tarjetas, la función SubmitForm guarda esos cambios en el origen de datos.After the user modifies a record by using controls in the cards, the SubmitForm function saves those changes to the data source. Cuando se ejecuta esa función, el control de formulario lee los valores de la propiedad DataField de cada tarjeta para saber qué campo debe cambiar.When that function runs, the form control reads the values of each card's DataField property to know what field to change.

El control de formulario también lee el valor de la propiedad Update de cada tarjeta.The form control also reads the value of each card's Update property. Este valor se almacenará en el origen de datos para este campo.This value will be stored in the data source for this field. Este es el lugar para aplicar otra transformación, quizás para revertir la transformación que se ha aplicado en la fórmula Default de la tarjeta.This is the place to apply another transform, perhaps to reverse the transform that was applied in the card's Default formula.

La propiedad Valid se toma de los metadatos del origen de datos, basándose en la propiedad DataField.The Valid property is driven from the metadata of the data source, based on the DataField property. También depende de la propiedad Required y de si la propiedad Update contiene un valor.It's also based on the Required property and whether the Update property contains a value. Si el valor de la propiedad Update no es válido, la propiedad Error proporciona un mensaje de error descriptivo.If the value on the Update property isn't valid, the Error property provides a user-friendly error message.

Si la propiedad DataField de una tarjeta está en blanco, la tarjeta sencillamente es un contenedor de controles.If the DataField property of a card is blank, the card is just a container of controls. Sus propiedades Valid y Update no participan cuando se envía el formulario.Its Valid and Update properties don't participate when the form is submitted.

Examinar un ejemploDissecting an example

Echemos un vistazo a los controles que componen una tarjeta de entrada de datos básica.Let's look at the controls that make up a basic data-entry card. Se ha aumentado el espacio entre controles para mostrar cada uno de ellos de forma más clara:The space between controls has been increased to show each more clearly:

Mantenga presionada la tecla Alt para mostrar los nombres de los controles que componen esta tarjeta:Hold down the Alt key to show the names of the controls that make up this card:

Cuatro controles hacen que esta tarjeta funcione:Four controls make this card work:

NombreName TipoType DescripciónDescription
TextRequiredStarTextRequiredStar Control EtiquetaLabel control Muestra una estrella, que se utiliza habitualmente en los formularios de entrada de datos para indicar que un campo es obligatorio.Displays a star, which is commonly used on data-entry forms to indicate that a field is required.
TextFieldDisplayNameTextFieldDisplayName Control EtiquetaLabel control Muestra el nombre descriptivo de este campo.Displays the user-friendly name of this field. Este nombre puede diferir de lo que aparece en el esquema del origen de datos.This name can differ from what is in the data source's schema.
InputTextInputText Control Input textInput text control Muestra el valor inicial del campo y permite al usuario cambiar dicho valor.Displays the initial value of the field and allows the user to change that value.
TextErrorMessageTextErrorMessage Control EtiquetaLabel control Muestra un mensaje de error descriptivo al usuario si se produce un problema con la validación.Displays a user-friendly error message to the user if a problem occurs with validation. También garantiza que el campo tiene un valor si es necesario.Also ensures that the field has a value if one is required.

Para rellenar estos controles con datos, se pueden tomar sus propiedades de las propiedades de la tarjeta a través de estas fórmulas claves.To populate these controls with data, their properties can be driven from the properties of the card, through these key formulas. Tenga en cuenta que ninguna de estas fórmulas hace referencia a un campo específico.Note that none of these formulas refers to a specific field. En su lugar, toda la información procede de la tarjeta.Instead, all information comes from the card.

Propiedad de controlControl property FórmulaFormula DescripciónDescription
TextRequiredStar.VisibleTextRequiredStar.Visible Parent.RequiredParent.Required La estrella solo aparece si el campo es obligatorio.The star appears only if the field is required. "Required" es una fórmula controlada por usted o los metadatos del origen de datos.Required is a formula that's driven by you or the metadata of the data source.
TextFieldDisplayName.TextTextFieldDisplayName.Text Parent.DisplayNameParent.DisplayName El control de cuadro de texto muestra el nombre descriptivo, proporcionado por usted o los metadatos del origen de datos, y que se establece en la propiedad DisplayName de la tarjeta.The text-box control shows the user-friendly name, which you or the data source's metadata provides, and which is set on the card's DisplayName property.
InputText.DefaultInputText.Default Parent.DefaultParent.Default Inicialmente, el control de entrada de texto muestra el valor del campo del origen de datos, según lo proporcionado por el valor predeterminado de la tarjeta.The text-input control initially shows the value of the field from the data source, as provided by the card's default value.
TextErrorMessage.TextTextErrorMessage.Text Parent.ErrorParent.Error Si se produce un problema de validación, la propiedad Error de la tarjeta proporciona el correspondiente mensaje de error.If a validation problem occurs, the card's Error property provides an appropriate error message.

Para extraer información de estos controles y volver a insertarla en el origen de datos, tenemos las siguientes fórmulas clave:To pull information out of these controls and push it back into the data source, we have the following key formulas:

Nombre del controlControl name FórmulaFormula DescripciónDescription
DataCard.DataFieldDataCard.DataField "ApproverEmail""ApproverEmail" El nombre del campo que el usuario puede mostrar y editar en esta tarjeta.The name of the field that the user can display and edit in this card.
DataCard.UpdateDataCard.Update InputText.TextInputText.Text El valor que se valida y se vuelve a insertar en el origen de datos cuando se ejecuta SubmitForm.The value to validate and push back into the data source when SubmitForm runs.