Comprendre les cartes de donnéesUnderstand data cards

Les contrôles Card sont les blocs de construction des contrôles Edit form et Display form.Card controls are the building blocks of the Edit form and Display form controls. Le formulaire représente l’ensemble de l’enregistrement dont chaque carte représente un seul champ.The form represents the entire record, and each card represents a single field of that record.

Une fois que vous avez sélectionné un contrôle de formulaire dans l’espace de travail de conception, vous pouvez interagir avec les cartes plus facilement dans le volet de droite.You can interact with cards most easily in the right-hand pane after you select a form control in the design workspace. Dans ce volet, vous pouvez choisir les champs à afficher, leur affichage et l’ordre dans lequel les afficher.In that pane, you can choose which fields to show, how to show each field, and in what order to show them. Cet exemple montre un contrôle Edit form dans une application créée à partir d’une liste SharePoint nommée Assets.This example shows an Edit form control in an app built from a SharePoint list that's named Assets.

Pour commencer avec les cartes, consultez les pages relatives à l’ajout d’un formulaire et à la compréhension des formulaires de données.To get started with cards, see add a form and understand data forms. Le reste de cette rubrique explique plus en détail le fonctionnement des cartes et la manière dont vous pouvez les personnaliser ou même créer les vôtres.The remainder of this topic goes into more detail about how cards work and how you can customize or even create your own.

Cartes prédéfiniesPredefined cards

PowerApps propose un ensemble prédéfini de cartes pour les chaînes, les nombres et d’autres types de données.PowerApps offers a predefined set of cards for strings, numbers, and other data types. Dans le volet de droite, vous pouvez voir les variations disponibles et modifier la carte utilisée pour un champ :In the right-hand pane, you can see the variations available and change the card used for a field:

Dans cet exemple, une carte de texte à ligne unique est sélectionnée, mais le texte de l’URL est plus long que le contenu qui peut être affiché sur une seule ligne.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. Remplaçons-la par une carte de texte multiligne pour laisser à nos utilisateurs davantage de place pour apporter des modifications :Let's change this to a multi-line text card to give our users more room to edit:

Plusieurs champs de cette source de données ne sont pas affichés, mais vous pouvez afficher ou masquer un champ en activant sa case à cocher.Several fields of this data source aren't being shown, but you can show or hide a field by selecting its checkbox. Cet exemple montre comment afficher le champ SecurityCode.This example illustrates how to show the SecurityCode field.

Personnaliser une carteCustomize a card

Les cartes comportent d’autres contrôles.Cards comprise other controls. Dans un contrôle Edit form, l’utilisateur entre des données dans un contrôle Text input standard que vous ajoutez à partir de l’onglet Insertion.In an Edit form control, the user enters data in a standard Text input control that you add from the Insert tab.

Examinons un exemple montrant comment modifier l’apparence d’une carte en manipulant les contrôles qu’elle contient.Let's walk through an example of how to change a card's appearance by manipulating controls in it.

  1. Tout d’abord, revenons au champ SecurityCode de la dernière carte que nous avons insérée.First, let's return to the card that we inserted most recently, for the SecurityCode field. Sélectionnez cette carte en cliquant ou en appuyant dessus une seule fois :Select this card by clicking or tapping it once:

  2. Sélectionnez le contrôle Text input à l’intérieur de la carte en cliquant ou en appuyant sur le contrôle d’entrée.Select the Text input control inside the card by clicking or tapping the input control itself.

  3. Déplacez ce contrôle dans la carte en faisant glisser la zone de sélection et redimensionnez-le en faisant glisser les poignées le long du bord de la zone de sélection :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:

Vous pouvez redimensionner et déplacer le contrôle au sein d’une carte et y apporter d’autres modifications, mais vous ne pouvez pas le supprimer sans l’avoir déverrouillé au préalable.You can resize, move, and make other modifications to controls within a card, but you can't delete it without unlocking it first.

Déverrouiller une carteUnlock a card

En plus de contenir des contrôles, les cartes sont elles-mêmes des contrôles qui ont des propriétés et des formules comme tout autre contrôle.In addition to containing controls, cards themselves are controls that have properties and formulas just like any other control. Lorsque vous choisissez d’afficher un champ sur un formulaire, le volet de droite crée automatiquement la carte et génère les formules nécessaires.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. Ces formules sont visibles dans l’onglet Avancé du volet de droite :We can see these formulas in the Advanced tab of the right-hand pane:

Nous voyons immédiatement l’une des propriétés les plus importantes de la carte : la propriété DataField.We immediately see one of the most important properties of the card: the DataField property. Cette propriété indique le champ de la source de données que l’utilisateur voit et peut modifier dans cette carte.This property indicates which field of the data source the user sees and can edit in this card.

Sous l’onglet Avancé, la bannière en haut indique que les propriétés de cette carte sont verrouillées.On the Advanced tab, the banner at the top indicates that the properties of this card are locked. Une icône de cadenas apparaît également à côté des propriétés DataField, DisplayName et Required.A lock icon also appears next to the DataField, DisplayName, and Required properties. Le volet de droite a créé ces formules et le verrouillage empêche toute modification accidentelle de ces propriétés.The right-hand pane created these formulas, and the lock prevents accidental changes to these properties.

Cliquez ou appuyez sur la bannière en haut pour déverrouiller la carte afin de pouvoir modifier ces propriétés :Click or tap the banner at the top to unlock the card so that you can modify these properties:

Nous allons modifier la propriété DisplayName pour insérer un espace entre Asset et ID.Let's modify the DisplayName to put a space between Asset and ID. En apportant cette modification, nous allons modifier ce qui a été généré.By making this change, we're altering what was generated for us. Dans le volet de droite, cette carte a un libellé différent :In the right-hand pane, this card has a different label:

Nous contrôlons désormais cette carte et nous pouvons la modifier davantage selon nos besoins.We've now taken control over this card and can modify it further to fit our need. Toutefois, nous avons perdu la capacité de modifier la carte d’une représentation à une autre (par exemple, passer du texte sur une ligne à un texte multiligne) comme auparavant.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. Nous avons transformé la carte prédéfinie en « carte personnalisée » que nous contrôlons désormais.We've transformed the predefined card into a "custom card" that we now control.

Important

Vous ne pouvez pas verrouiller à nouveau une carte que vous avez déverrouillée.You can't relock a card if you unlock it. Pour revenir à un état verrouillé, supprimez la carte, puis insérez-la à nouveau dans le volet de droite.To get a card back to a locked state, remove it, and reinsert it in the right-hand pane.

Vous pouvez modifier l’apparence et le comportement d’une carte déverrouillée de diverses façons, notamment en ajoutant et supprimant les contrôles qu’elle contient.You can change the appearance and behavior of an unlocked card in a variety of ways, such as adding and deleting controls within it. Par exemple, vous pouvez ajouter une forme d’étoile à partir du menu Icônes sous l’onglet Insertion.For example, you can add a star shape from the Icons menu on the Insert tab.

L’étoile fait maintenant partie de la carte et se déplace avec cette dernière si, par exemple, vous réorganisez les cartes dans le formulaire.The star is now a part of the card and will travel with it if, for example, you reorder the cards within the form.

Voici un autre exemple : déverrouillez la carte ImageURL, puis ajoutez un contrôle Image à partir de l’onglet Insertion :As another example, unlock the ImageURL card, and then add an Image control to it from the Insert tab:

Dans la barre de formule, définissez la propriété Image de ce contrôle sur TextBox.Text, où TextBox correspond au nom du contrôle Text input qui contient l’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:

Conseil

Appuyez sur la touche Alt pour afficher le nom de chaque contrôle.Press the Alt key to show the name of each control.

Nous pouvons à présent voir les images et modifier leurs URL.And now we can see the images and edit their URLs. Notez que vous auriez pu utiliser Parent.Default en tant que propriété Image, mais qu’elle n’aurait pas été mise à jour si l’utilisateur avait modifié l’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.

Vous pouvez faire la même chose sur le deuxième écran de cette application, sur lequel vous utilisez un contrôle Display form pour afficher les détails d’un enregistrement.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. Dans ce cas, vous pouvez choisir de masquer l’étiquette (en définissant la propriété Visible de l’étiquette, et non pas de la carte, sur false), car l’utilisateur ne modifie pas l’URL sur cet écran :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:

Interagir avec un formulaireInteract with a form

Une fois la carte déverrouillée, vous pouvez modifier la manière dont elle interagit avec le formulaire qui la contient.After you unlock a card, you can change how it interacts with the form that contains it.

Voici quelques conseils concernant le fonctionnement des contrôles avec leur carte et des cartes avec le formulaire.Below are some guidelines for how controls should work with their card and how the cards should work with the form. Il s’agit uniquement de lignes directrices.These are only guidelines. Comme pour n’importe quel contrôle dans PowerApps, vous pouvez créer des formules qui font référence à un autre contrôle dans PowerApps. Cela vaut également pour les cartes et les contrôles figurant dans celles-ci.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. Soyez créatif : il existe de multiples manières de créer une application.Be creative: you can create an app in many ways.

Propriété DataFieldDataField property

La propriété la plus importante sur la carte est la propriété DataField.The most important property on the card is the DataField property. Cette propriété détermine la validation, le champ mis à jour et d’autres aspects de la carte.This property drives validation, what field is updated, and other aspects of the card.

Informations entrantesInformation flowing in

En tant que conteneur, le formulaire rend la propriété ThisItem disponible pour toutes les cartes qu’il contient.As a container, the form makes ThisItem available to all cards within it. Cet enregistrement contient tous les champs de l’enregistrement actuel.This record contains all of the fields for the current record of interest.

La propriété Default de chaque carte doit être définie sur ThisItem.FieldName.The Default property of every card should be set to ThisItem.FieldName. Dans certaines circonstances, vous voudrez peut-être transformer cette valeur.Under certain circumstances, you might want to transform this value on the way in. Par exemple, vous souhaiterez peut-être formater une chaîne ou traduire la valeur d’une langue à une autre.For example, you might want to format a string or translate the value from one language to another.

Chaque contrôle au sein de la carte doit faire référence à Parent.Default pour accéder à la valeur du champ.Each control within the card should reference Parent.Default to get at the field's value. Cette stratégie offre un niveau d’encapsulation de la carte permettant de modifier sa propriété Default sans modifier les formules internes de la carte.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.

Par défaut, les propriétés DefaultValue et Required sont issues des métadonnées de la source de données en fonction de la propriété DataField.By default, DefaultValue and Required properties are taken from the data source's metadata based on the DataField property. Vous pouvez remplacer ces formules par votre propre logique, en intégrant les métadonnées de la source de données à l’aide de la fonction DataSourceInfo.You can override these formulas with your own logic, integrating the data source's metadata by using the DataSourceInfo function.

Informations sortantesInformation flowing out

Une fois que l’utilisateur modifie un enregistrement à l’aide des contrôles dans les cartes, la fonction SubmitForm enregistre ces modifications dans la source de données.After the user modifies a record by using controls in the cards, the SubmitForm function saves those changes to the data source. Lorsque cette fonction s’exécute, le contrôle de formulaire lit les valeurs de la propriété DataField de chaque carte afin de savoir quel champ modifier.When that function runs, the form control reads the values of each card's DataField property to know what field to change.

Le contrôle de formulaire lit également la valeur de la propriété Update de chaque carte.The form control also reads the value of each card's Update property. Cette valeur est stockée dans la source de données de ce champ.This value will be stored in the data source for this field. C’est ici que vous pouvez appliquer une autre transformation, par exemple pour rétablir celle qui a été appliquée dans la formule Default de la carte.This is the place to apply another transform, perhaps to reverse the transform that was applied in the card's Default formula.

La propriété Valid est générée par les métadonnées de la source de données, en fonction de la propriété DataField.The Valid property is driven from the metadata of the data source, based on the DataField property. Elle dépend également de la propriété Required et du fait que la propriété Update contienne une valeur ou non.It's also based on the Required property and whether the Update property contains a value. Si la valeur de la propriété Update n’est pas valide, la propriété Error fournit un message d’erreur convivial.If the value on the Update property isn't valid, the Error property provides a user-friendly error message.

Si la propriété DataField d’une carte est vide, la carte constitue un simple conteneur de contrôles.If the DataField property of a card is blank, the card is just a container of controls. Ses propriétés Valid et Update ne participent pas lorsque le formulaire est envoyé.Its Valid and Update properties don't participate when the form is submitted.

Exemple détailléDissecting an example

Examinons les contrôles qui composent une carte de saisie de données de base.Let's look at the controls that make up a basic data-entry card. L’espace entre les contrôles a été augmenté pour afficher chaque élément plus clairement :The space between controls has been increased to show each more clearly:

Maintenez la touche Alt enfoncée pour afficher les noms des contrôles qui composent cette carte :Hold down the Alt key to show the names of the controls that make up this card:

Quatre contrôles font fonctionner cette carte :Four controls make this card work:

NomName TypeType DescriptionDescription
TextRequiredStarTextRequiredStar Contrôle LabelLabel control Affiche un astérisque, symbole couramment utilisé dans les formulaires de saisie de données pour indiquer qu’un champ est obligatoire.Displays a star, which is commonly used on data-entry forms to indicate that a field is required.
TextFieldDisplayNameTextFieldDisplayName Contrôle LabelLabel control Affiche le nom convivial de ce champ.Displays the user-friendly name of this field. Ce nom peut être différent de celui figurant dans le schéma de la source de données.This name can differ from what is in the data source's schema.
InputTextInputText Contrôle Input textInput text control Affiche la valeur initiale du champ et permet à l’utilisateur de modifier cette valeur.Displays the initial value of the field and allows the user to change that value.
TextErrorMessageTextErrorMessage Contrôle LabelLabel control Affiche un message d’erreur convivial pour l’utilisateur en cas de problème lié à la validation.Displays a user-friendly error message to the user if a problem occurs with validation. Garantit également que le champ comporte une valeur, si celle-ci est obligatoire.Also ensures that the field has a value if one is required.

Pour remplir ces contrôles avec des données, leurs propriétés peuvent être générées à partir des propriétés de la carte, via ces formules clés.To populate these controls with data, their properties can be driven from the properties of the card, through these key formulas. Notez qu’aucune de ces formules ne fait référence à un champ spécifique.Note that none of these formulas refers to a specific field. À l’inverse, toutes les informations proviennent de la carte.Instead, all information comes from the card.

Propriété de contrôleControl property FormuleFormula DescriptionDescription
TextRequiredStar.VisibleTextRequiredStar.Visible Parent.RequiredParent.Required L’astérisque apparaît uniquement si le champ est obligatoire.The star appears only if the field is required. La formule obligatoire est générée par vous ou par les métadonnées de la source de données.Required is a formula that's driven by you or the metadata of the data source.
TextFieldDisplayName.TextTextFieldDisplayName.Text Parent.DisplayNameParent.DisplayName Le contrôle de zone de texte affiche le nom convivial, fourni par vous ou par les métadonnées de la source de données, et qui est défini dans la propriété DisplayName de la carte.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 Le contrôle de saisie de texte affiche initialement la valeur du champ de la source de données, tel que fourni par la valeur par défaut de la carte.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 En cas de problème de validation, la propriété Error de la carte fournit un message d’erreur approprié.If a validation problem occurs, the card's Error property provides an appropriate error message.

Pour extraire des informations de ces contrôles et les replacer dans la source de données, nous utilisons les formules clés suivantes :To pull information out of these controls and push it back into the data source, we have the following key formulas:

Nom du contrôleControl name FormuleFormula DescriptionDescription
DataCard.DataFieldDataCard.DataField "ApproverEmail""ApproverEmail" Nom du champ que l’utilisateur peut afficher et modifier dans cette carte.The name of the field that the user can display and edit in this card.
DataCard.UpdateDataCard.Update InputText.TextInputText.Text Valeur à valider et à transmettre dans la source de données lors de l’exécution de SubmitForm.The value to validate and push back into the data source when SubmitForm runs.