Les contrôles Card sont les blocs de construction des contrôles Edit form et Display form. Le formulaire représente l’ensemble de l’enregistrement dont chaque carte représente un seul champ.

Le moyen le plus simple d’interagir avec des cartes consiste à utiliser le volet de droite lorsqu’un contrôle de formulaire a été sélectionné dans l’espace de conception. Dans ce volet, vous pouvez choisir les champs à afficher, leur mode d’affichage et les réorganiser.

Pour commencer avec les cartes, consultez les pages relatives à l’ajout d’un formulaire et à la compréhension des formulaires de données. 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.

Cartes prédéfinies

PowerApps propose un ensemble prédéfini de cartes pour les chaînes, les nombres et d’autres types de données. Dans le volet de droite, vous pouvez voir les variations disponibles et modifier la carte utilisée pour un champ :

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. Remplaçons-la par une carte de texte multiligne pour laisser à nos utilisateurs davantage de place pour apporter des modifications :

Vous remarquerez également que plusieurs champs de cette source de données ne sont pas affichés. Pour les afficher et les masquer, sélectionnez l’icône représentant un œil :

Personnaliser une carte

Les cartes comportent d’autres contrôles. L’utilisateur entre des données dans un contrôle Text input standard que vous ajoutez à partir de l’onglet Insertion.

Examinons quelques exemples de modification de l’apparence de la carte en manipulant les contrôles.

  1. Tout d’abord, revenons au champ SecurityCode de la dernière carte que nous avons insérée. Sélectionnez cette carte en cliquant ou en appuyant dessus une seule fois :

  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.

  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 :

    Vous pouvez redimensionner et déplacer le contrôle et y apporter d’autres modifications, mais vous ne pouvez pas le supprimer sans l’avoir déverrouillé au préalable. La section suivante décrit comment déverrouiller une carte.

  4. Insérez au moins un contrôle dans la carte, tel que cette étoile à partir du menu Formes dans l’onglet Insertion :

    Ce nouveau contrôle fait désormais partie de la carte et se déplacera avec cette dernière si, par exemple, vous réorganisez les cartes dans le formulaire.

Dans le cadre d’un autre exemple, affichez une image dans un contrôle Image plutôt que l’URL de l’image dans un contrôle Text input, comme le montre cette illustration :

  1. Dans l’onglet Insertion, ajoutez un contrôle d’image sous la carte ImageURL :

  2. 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 :

    Conseil : appuyez sur la touche Alt pour afficher le nom de chaque contrôle.

    Nous pouvons à présent voir les images et modifier leurs URL. Notez que nous aurions pu utiliser Parent.Default en tant que propriété Image, mais elle n’aurait pas été mise à jour si l’utilisateur avait entré une nouvelle URL.

  3. Nous pouvons faire la même chose sur le deuxième écran de cette application, sur lequel nous utilisons un contrôle Display form pour afficher les détails d’un enregistrement. Ici, nous pouvons choisir de masquer l’étiquette (en définissant la propriété Visible du contrôle d’entrée de texte, et non pas de la carte, sur false), car l’utilisateur ne modifiera pas l’URL sur cet écran :

Déverrouiller une carte

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. 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. Ces formules sont visibles dans le volet Avancé, disponible dans l’onglet Affichage :

Nous voyons immédiatement l’une des propriétés les plus importantes de la carte : la propriété DataField. Cette propriété indique le champ de la source de données que l’utilisateur voit et peut modifier dans cette carte.

Dans la vue Avancé, la grande bannière en haut indique que les propriétés de cette carte sont verrouillées. Une icône de cadenas apparaît également à côté des propriétés DataField, Default et DisplayName. Le volet de droite a créé ces formules et le verrouillage empêche toute modification accidentelle de ces propriétés.

Cliquez ou appuyez sur la bannière en haut pour déverrouiller la carte afin de pouvoir modifier ces propriétés :

Nous allons modifier la propriété DisplayName pour insérer un espace entre Asset et ID. En apportant cette modification, nous allons modifier ce qui a été généré. Dans le volet de droite, cette carte a un libellé différent :

Nous contrôlons désormais cette carte et nous pouvons la modifier davantage selon nos besoins. 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. Nous avons transformé la carte prédéfinie en « carte personnalisée » que nous contrôlons désormais.

Avertissement : vous ne pouvez pas verrouiller à nouveau une carte que vous avez déverrouillée. Pour revenir à un état verrouillé, supprimez la carte, puis insérez-la à nouveau dans le volet de droite.

Interagir avec le formulaire

Une fois la carte déverrouillée, vous pouvez modifier la manière dont elle interagit avec le formulaire qui la contient.

Voici quelques conseils concernant le fonctionnement des contrôles avec leur carte et des cartes avec le formulaire. Il s’agit uniquement de lignes directrices. 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. Soyez créatif : il existe de multiples manières de créer une application.

Propriété DataField

La propriété la plus importante sur la carte est la propriété DataField. Cette propriété détermine la validation, le champ mis à jour et d’autres aspects de la carte.

Informations entrantes

En tant que conteneur, le formulaire rend la propriété ThisItem disponible pour toutes les cartes qu’il contient. Cet enregistrement contient tous les champs de l’enregistrement actuel.

La propriété Default de chaque carte doit être définie sur ThisItem.FieldName. Dans certaines circonstances, vous voudrez peut-être transformer cette valeur. Par exemple, vous souhaiterez peut-être formater une chaîne ou traduire la valeur d’une langue à une autre.

Chaque contrôle au sein de la carte doit faire référence à Parent.Default pour accéder à la valeur du champ. 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.

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. 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.

Informations sortantes

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. 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.

Le contrôle de formulaire lit également la valeur de la propriété Update de chaque carte. Cette valeur est stockée dans la source de données de ce champ. 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.

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. Elle dépend également de la propriété Required et du fait que la propriété Update contienne une valeur ou non. Si la valeur de la propriété Update n’est pas valide, la propriété Error fournit un message d’erreur convivial.

Si la propriété DataField d’une carte est vide, la carte constitue un simple conteneur de contrôles. Ses propriétés Valid et Update ne participent pas lorsque le formulaire est envoyé.

Exemple détaillé

Examinons les contrôles qui composent une carte de saisie de données de base. L’espace entre les contrôles a été augmenté pour afficher chaque élément plus clairement :

Maintenez la touche Alt enfoncée pour afficher les noms des contrôles qui composent cette carte :

Quatre contrôles font fonctionner cette carte :

Nom Type Description
TextRequiredStar Contrôle Label Affiche un astérisque, symbole couramment utilisé dans les formulaires de saisie de données pour indiquer qu’un champ est obligatoire.
TextFieldDisplayName Contrôle Label Affiche le nom convivial de ce champ. Ce nom peut être différent de celui figurant dans le schéma de la source de données.
InputText Contrôle Input text Affiche la valeur initiale du champ et permet à l’utilisateur de modifier cette valeur.
TextErrorMessage Contrôle Label Affiche un message d’erreur convivial pour l’utilisateur en cas de problème lié à la validation. Garantit également que le champ comporte une valeur, si celle-ci est obligatoire.

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. Notez qu’aucune de ces formules ne fait référence à un champ spécifique. À l’inverse, toutes les informations proviennent de la carte.

Propriété de contrôle Formule Description
TextRequiredStar.Visible Parent.Required L’astérisque apparaît uniquement si le champ est obligatoire. La formule obligatoire est générée par vous ou par les métadonnées de la source de données.
TextFieldDisplayName.Text Parent.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.
InputText.Default Parent.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.
TextErrorMessage.Text Parent.Error En cas de problème de validation, la propriété Error de la carte fournit un message d’erreur approprié.

Pour extraire des informations de ces contrôles et les replacer dans la source de données, nous utilisons les formules clés suivantes :

Nom du contrôle Formule Description
DataCard.DataField "ApproverEmail" Nom du champ que l’utilisateur peut afficher et modifier dans cette carte.
DataCard.Update InputText.Text Valeur à valider et à transmettre dans la source de données lors de l’exécution de SubmitForm.