Comprendre la mise en page de formulaire de données dans Microsoft PowerAppsUnderstand data-form layout in Microsoft PowerApps

Dans PowerApps, vous pouvez facilement créer des formulaires attrayants et efficaces sur le plan de leur utilisation.In PowerApps, you can easily create forms that are attractive and efficient to use. Par exemple, considérez ce formulaire de base qui permet d’enregistrer des commandes :For example, consider this basic form for recording sales orders:

Exemple de formulaire de commande vente

Ce tutoriel décrit les étapes de création de ce formulaire.In this tutorial, we'll walk through the steps to create this form. Il aborde également certains sujets avancés, tels que le dimensionnement dynamique des champs pour remplir l’espace disponible.We'll also look at some advanced topics, such as dynamic sizing of fields to fill available space.

Avant de commencerBefore you start

Si vous débutez avec PowerApps (ou que vous générez uniquement des applications automatiquement), nous vous conseillons de générer une application à partir de zéro avant de vous plonger dans cette rubrique.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. Créer une application à partir de zéro vous permet de vous familiariser avec les concepts requis, tels que l’ajout de sources de données et de contrôles, qui sont mentionnés mais pas présentés dans cette rubrique.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. Créez une application pour tablette à partir de zéro.Create a tablet app from scratch.

    Tout ce qui est décrit dans cette rubrique s’applique également aux mises en page pour smartphones, mais les applications destinées à ces derniers ne présentent souvent qu’une seule colonne verticale.Everything discussed in this topic also applies to phone layouts, but phone apps often have only one vertical column.

  2. Ajoutez l’entité Sales order dans Common Data Service en tant que source de données de l’application.Add the Sales order entity in the Common Data Service as a data source for the app.

    En dehors de ce tutoriel, vous pouvez utiliser n’importe quelle source de données, dont des listes SharePoint et des tableaux Excel.Outside of this tutorial, you can use any data source, including SharePoint lists and Excel tables.

  3. Ajoutez un contrôle Gallery vertical et définissez sa propriété Items **sur Sales order.Add a vertical **Gallery control, and set its Items property to 'Sales order'.

    (facultatif) Pour suivre les exemples présentés dans ce tutoriel, modifiez la disposition de la galerie de façon à ce qu’elle affiche uniquement Titre et sous-titre.(optional) To match the examples in this tutorial, change the gallery's Layout to show only Title and subtitle.

    Liste des commandes vente

  4. Dans la galerie, cliquez ou appuyez sur SO004.In the gallery, click or tap SO004.

    Liste des commandes vente

    Cet enregistrement s’affiche dans le formulaire que vous allez créer en suivant les étapes décrites plus loin dans cette rubrique.This record will appear in the form that you build by following steps later in this topic.

Ajouter une barre de titreAdd a title bar

  1. Ajoutez un écran vide là où vous allez placer le formulaire.Add a blank screen where you'll put the form.

    En dehors de ce didacticiel, vous pouvez placer les contrôles Gallery et Edit form sur le même écran, mais vous avez plus de place pour travailler si vous les placez sur des écrans distincts.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 haut du nouvel écran, ajoutez un contrôle Label, puis définissez sa propriété Text sur l’expression suivante :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’étiquette indique le numéro de commande de l’enregistrement que vous avez sélectionné dans la galerie.The label shows the sales-order number of the record that you selected in the gallery.

  3. (facultatif) Mettez en forme l’étiquette comme suit :(optional) Format the label as follows:

    1. Définissez sa propriété Align sur Center.Set its Align property to Center.

    2. Définissez sa propriété Size sur 20.Set its Size property to 20.

    3. Définissez sa propriété Fill sur Navy.Set its Fill property to Navy.

    4. Définissez sa propriété Color sur White.Set its Color property to White.

    5. Définissez sa propriété Width sur Parent.Width.Set its Width property to Parent.Width.

    6. Définissez ses propriétés X et Y sur 0.Set its X and Y properties to 0.

      Barre de titre

Ajouter un formulaireAdd a form

  1. Ajoutez un contrôle Edit form, puis déplacez-le et redimensionnez-le pour remplir l’écran sous l’étiquette.Add an Edit form control, and then move and resize it to fill the screen under the label.

    À l’étape suivante, vous allez connecter le contrôle de formulaire à la source de données Sales order à l’aide du volet de droite, et non de la barre de formule.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 vous utilisez la barre de formule, le formulaire n’affiche pas tous les champs par défaut.If you use the formula bar, the form won't show any fields by default. Vous pouvez toujours afficher les champs souhaités en cochant une ou plusieurs cases dans le volet de droite.You can always show any fields that you want by selecting one or more check boxes in the right-hand pane.

  2. Dans le volet de droite, cliquez ou appuyez sur l’icône Flèche vers le bas en regard de Aucune source de données sélectionnée, puis cliquez ou appuyez sur 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 ensemble de champs par défaut de la source de données Sales order s’affiche dans une mise en page simple à trois colonnes.A default set of fields from the Sales order data source will appear in a simple, three-column layout. Toutefois, la plupart sont vides, et il peut se passer un certain temps avant qu’ils ne trouvent leur position finale.However, many are blank, and they may take a few moments to settle into their final positions.

  3. Définissez la propriété Item du formulaire sur Gallery1.Selected.Set the form's Item property to Gallery1.Selected.

    Le formulaire affiche l’enregistrement que vous avez sélectionné dans la galerie, mais l’ensemble de champs par défaut peut ne pas correspondre à ce que vous souhaitez dans votre produit 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. Dans le volet de droite, masquez chacun de ces champs en décochant la case correspondante :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. Déplacez le champ Order status en le faisant glisser vers la gauche, puis en le déposant de l’autre côté du champ 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.

    Votre écran doit ressembler à ceci :Your screen should resemble this example:

    Commande dans une mise en page de base à trois colonnes

Sélectionner une carte de donnéesSelect a data card

À chaque champ affiché correspond une carte de données sur le formulaire.Each field displayed has a corresponding data card on the form. Cette carte est constituée d’un ensemble de contrôles pour le titre du champ, d’une zone d’entrée, d’une étoile (qui apparaît quand le champ est obligatoire) et d’un message d’erreur de validation.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.

Vous pouvez également sélectionner des cartes directement sur le formulaire.You can also select cards directly on the form. Quand une carte est sélectionnée, une légende en noir apparaît au-dessus de celle-ci.When a card is selected, a black caption appears above it.

Sélection de carte de données

Note

Pour supprimer une carte (et pas simplement la masquer), sélectionnez-la et appuyez sur la touche Suppr.To delete a card (not just hide it), select it, and then press Delete.

Organiser les cartes en colonnesArrange cards in columns

Par défaut, les formulaires des applications pour tablette ont trois colonnes, et ceux des applications pour téléphone en ont juste une.By default, forms in tablet apps have three columns, and those in phone apps have one. Vous pouvez spécifier non seulement le nombre de colonnes du formulaire, mais également si toutes les cartes doivent tenir dans les limites de colonne.You can specify not only how many columns a form has but also whether all cards should fit within column borders.

Dans ce graphique, le nombre de colonnes du formulaire est passé de trois à quatre avec la case Aligner sur les colonnes cochée.In this graphic, the number of columns in the form was changed from three to four with the Snap to columns check box selected. Les cartes du formulaire ont été réorganisées automatiquement pour s’ajuster à la nouvelle disposition.The cards in the form were arranged automatically to fit the new layout.

Commande dans une mise en page de base sur quatre colonnes

Redimensionner des cartes sur plusieurs colonnesResize cards across multiple columns

Selon les données de chaque carte, vous pouvez envisager que certaines cartes tiennent sur une seule colonne et les autres cartes s’étendent sur plusieurs colonnes.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 une carte contient plus de données que ce que vous souhaitez afficher dans une colonne unique, vous pouvez élargir la carte en la sélectionnant et en faisant glisser la poignée de manipulation sur la bordure gauche ou droite de sa zone de sélection.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. Lorsque vous faites glisser la poignée, la carte s’aligne aux limites de la colonne.As you drag the handle, the card will "snap" to column boundaries.

Pour que votre conception soit plus souple tout en conservant une certaine structure, vous pouvez augmenter le nombre de colonnes à 12.To make your design more flexible but retain some structure, you can increase the number of columns to 12. Avec cette modification, vous pouvez facilement configurer chaque carte pour couvrir la totalité du formulaire, la moitié du formulaire, un tiers, un quart, un sixième et ainsi de suite.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. Voyons comment cela fonctionne.Let's see this in action.

  1. Dans le volet de droite, définissez le nombre de colonnes du formulaire sur 12.In the right-hand pane, set the number of columns in the form to 12.

    Spécifier le nombre de colonnes

    Le formulaire ne change pas de façon visible, mais vous avez plusieurs points d’alignement lorsque vous faites glisser la poignée de manipulation de gauche ou droite.The form doesn't visibly change, but you have more snap points as you drag the left or right grab handle.

  2. Augmentez la largeur de la carte Order date en faisant glisser la poignée de manipulation d’un point d’alignement vers la droite.Increase the width of the Order date card by dragging the grab handle on the right one snap point to the right.

    La carte s’étend sur quatre colonnes des 12 colonnes du formulaire (ou 1/3 du formulaire), au lieu de seulement trois des 12 colonnes du formulaire (ou 1/4 du formulaire).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). Chaque fois que vous augmentez la largeur d’une carte d’un point d’alignement, la carte s’étend sur un 1/12 supplémentaire du formulaire.Whenever you increase a card's width by one snap point, the card spans an additional 1/12 of the form.

    Redimensionner une carte à l’aide d’une opération glisser-déplacer

  3. Répétez l’étape précédente avec les cartes Order status et Customer purchase order reference.Repeat the previous step with the Order status and Customer purchase order reference cards.

    Trois cartes sur la première ligne

  4. Redimensionnez les cartes Name et Description de façon à ce qu’elles occupent jusqu’à six colonnes (ou la 1/2) du formulaire.Resize the Name and Description cards to take up six columns (or 1/2) of the form.

  5. Faites en sorte que la première ligne de l’adresse de livraison occupe toute la largeur du formulaire :Make the first two lines of the delivery address stretch entirely across the form:

C’est terminé.All done. Vous avez le formulaire souhaité, qui combine des lignes avec différents nombres de colonnes :We have our desired form, mixing rows with different numbers of columns:

Commande vente dans une mise en page sur 12 colonnes avec redimensionnement

Manipuler les contrôles dans une carteManipulate controls in a card

L’adresse de livraison comprend plusieurs éléments d’information que vous voulez regrouper visuellement pour l’utilisateur.The delivery address comprises several pieces of information that we want to visually group together for the user. Chaque champ reste dans sa propre carte de données, mais nous pouvons manipuler les contrôles à l’intérieur de la carte afin qu’ils soient mieux adaptés les uns aux autres.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. Sélectionnez la carte First line of Delivery address, sélectionnez l’étiquette au sein de cette carte, puis supprimez les trois premiers mots du texte.Select the First line of Delivery address card, select the label within that card, and then delete the first three words from the text.

    Modification du libellé de l’étiquette de la première ligne de l’adresse de livraison de commande vente

  2. Sélectionnez la carte Second line of Delivery address, sélectionnez l’étiquette au sein de cette carte, puis supprimez tout le texte.Select the Second line of Delivery address card, select the label within that card, and then delete all of the text in it.

    Il peut être tentant de simplement supprimer le contrôle d’étiquette. Dans de nombreux cas, cela fonctionne correctement.It may be tempting to simply remove the label control and, in many cases, that will work fine. Toutefois, des formules peuvent dépendre de la présence de ce contrôle.But formulas might depend on that control being present. L’approche la plus sûre consiste à supprimer le texte ou à définir la propriété Visible du contrôle sur false.The safer approach is to remove the text or to set the Visible property of the control to false.

    Modification du libellé de l’étiquette de la deuxième ligne de l’adresse de livraison de commande vente

  3. Dans la même carte, déplacez la zone de saisie de texte sur l’étiquette afin de réduire l’espace entre les première et deuxième lignes de l’adresse.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.

    La hauteur de la carte est réduite lorsque son contenu occupe moins d’espace.The height of the card shrinks when its contents take up less space.

    Modification du libellé de l’étiquette de la deuxième ligne de l’adresse de livraison de commande vente

Penchons-nous à présent sur le troisième ligne de l’adresse.Now let's turn our attention to the third line of the address. En procédant de la même façon que précédemment, raccourcissez le texte de chaque étiquette pour ces cartes, et organisez la zone de saisie de texte de façon à ce qu’elle soit positionnée à la droite de chaque étiquette.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. Voici comment procéder pour la carte État :Here are the steps for the State card:

ÉtapeStep DescriptionDescription RésultatResult
11 Sélectionnez la carte État pour que les poignées de manipulation apparaissent autour de la carte.Select the State card so that grab handles appear around it. Sélectionner une carte
22 Sélectionnez l’étiquette dans cette carte pour que des poignées de manipulation apparaissent autour de la carte.Select the label within this card so that grab handles appear around it. Sélectionner un contrôle dans une carte
33 Positionnez le curseur à droite du texte, puis supprimez la portion superflue.Place the cursor to the right of the text, and then delete the portion that we don't need. Modifier le texte d’un contrôle dans une carte
44 À l’aide des poignées de manipulation sur les côtés, dimensionnez le contrôle d’étiquette pour l’adapter à la taille du nouveau texte.Using the grab handles on the sides, size the label control to fit the new text size. Redimensionner un contrôle dans une carte
55 Sélectionnez le contrôle d’entrée de texte à l’intérieur de cette carte.Select the text input control within this card. Sélectionner un autre contrôle dans la carte
66 À l’aide des poignées de manipulation sur les côtés, redimensionnez le contrôle d’entrée de texte de façon à obtenir la taille souhaitée.Using the grab handles on the sides, size the text input control to the size that you want. Redimensionner un contrôle dans une carte
77 Glissez-déposez la zone de saisie de texte vers la partie supérieure droite du contrôle d’étiquette.Drag the text input box up and to the right of the label control, and then drop the text input box. Déplacer un contrôle à l’intérieur d’une carte
Les modifications de la carte État sont à présent terminées.Our modifications to the State card are now complete. Les modifications de la carte sont terminées

Résultat pour la troisième ligne d’adresse :The result for the complete third address line:

Adresse de livraison de commande vente avec une troisième ligne plus concise

Notez que la plupart des cartes commencent avec des formules dynamiques pour leurs propriétés.Note that many of the cards start out with dynamic formulas for their properties. Par exemple, le contrôle d’entrée de texte que nous avons redimensionné et déplacé ci-dessus avait une propriété Width basée sur la largeur de son parent.For example, the Text input control that we resized and moved above had a Width property based on the width of its parent. Lorsque vous déplacez ou redimensionnez un contrôle, ces formules dynamiques sont remplacées par des valeurs statiques.When you move or resize a control, these dynamic formulas are replaced with static values. Le cas échéant, vous pouvez restaurer les formules dynamiques à l’aide de la barre de formule.If you want, you can restore the dynamic formulas by using the formula bar.

Désactivation de l’alignement sur les colonnesTurning off Snap to columns

Il se peut que vous ayez besoin d’un contrôle plus précis que celui offert par les 12 colonnes standard.Sometimes you'll want finer control than the standard 12 columns can provide. Dans ce cas, vous pouvez désactiver l’option Aligner sur les colonnes et positionner les cartes manuellement.For these cases, you can turn off Snap to columns and then position cards manually. Le formulaire continue alors de s’aligner sur les 12 colonnes, mais vous pouvez également maintenir la touche Alt enfoncée pour positionner et redimensionner manuellement une carte à votre guise.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.

Dans notre exemple, les quatre composants de la troisième ligne de l’adresse ont exactement la même largeur.In our example, the four components that make up the third line of the address all have exactly the same width. Toutefois, cette mise en page n’est peut-être pas optimale, car les noms de ville sont plus longs que les abréviations et la zone de saisie de texte pour les pays/régions est courte en raison de la longueur de son étiquette.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.

Pour optimiser cet espace, désactivez l’option Aligner sur les colonnes dans le volet de droite, puis maintenez la touche Alt tout en redimensionnant et positionnant ces cartes.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. Chaque fois que vous maintenez la touche Alt enfoncée, tous les contrôles affichent des légendes en noir.Whenever you hold down the Alt key, all controls show black captions. Ce comportement est normal et permet d’afficher les noms du contrôle.This behavior is by design to show you control names.

Positionnement et dimensionnement avec la touche ALT enfoncée

Un positionnement soigneux permet d’obtenir une taille appropriée pour chaque champ et un espacement horizontal uniforme entre les champs :After careful positioning, the result has appropriate sizes for each field and even spacing horizontally between fields:

Troisième ligne d’adresse de livraison de commande vente positionnée précisément

En résumé, quelles sont les différences entre l’activation et la désactivation de l’alignement sur les colonnes ?In summary, what are the differences when Snap to columns is on versus off?

ComportementBehavior Options Aligner sur les colonnes activéeSnap to columns On Options Aligner sur les colonnes désactivéeSnap to columns Off
Un redimensionnement entraîne l’alignement surResize snaps to Le nombre de colonnes que vous sélectionnez :Number of columns you select:
1, 2, 3, 4, 6 ou 121, 2, 3, 4, 6, or 12
12 colonnes12 columns
L’alignement suite au redimensionnement peut être modifiéResize snap can be overriden NonNo Oui, en maintenant la touche Alt enfoncéeYes, with Alt key
Les cartes sont automatiquement réorganisées entre les lignes (nous y reviendrons de façon plus détaillée ultérieurement)Cards automatically re-layout between rows (more on this later) OuiYes NonNo

Définir la largeur et la hauteurSet width and height

Comme tout dans PowerApps, la mise en page du formulaire est régie par des propriétés sur les contrôles de carte.As with everything in PowerApps, the form's layout is governed by properties on the card controls. Comme indiqué précédemment, vous pouvez modifier les valeurs de ces propriétés en faisant glisser des contrôles vers différents emplacements ou en faisant glisser les poignées pour redimensionner les contrôles.As already described, you can change the values of these properties by dragging controls to different locations or dragging grab handles to resize controls. Toutefois, des situations se présenteront certainement où vous voudrez comprendre et manipuler ces propriétés plus précisément, en particulier lors de la création de formulaires dynamiques contenant des formules.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.

Mise en page de base : X, Y et WidthBasic Layout: X, Y, and Width

Les propriétés X et Y contrôlent la position des cartes.The X and Y properties control the position of cards. Lorsque vous travaillez avec des contrôles sur un canevas brut, ces propriétés indiquent une position absolue.When we work with controls on the raw canvas, these properties provide an absolute position. Dans un formulaire, elles ont une signification différente :In a form, these properties have a different meaning:

  • X : ordre à l’intérieur d’une ligne.X: Order within a row.
  • Y : numéro de ligne.Y: Row number.

Comme les contrôles sur le canevas, la propriété Width spécifie la largeur minimale de la carte (nous y reviendrons de façon plus détaillée ultérieurement).Similar to controls on the canvas, the Width property specifies the minimum width of the card (more on the minimum aspect in a moment).

Jetons un coup d’œil aux propriétés X, Y et Width des cartes dans notre formulaire :Let's take a look at the X, Y, and Width properties of the cards in our form:

Coordonnées X et Y du formulaire de commande vente

Débordement des lignesOverflowing rows

Que se passe-t-il si les cartes constituant une ligne sont trop larges pour tenir sur celle-ci ?What happens if the cards on a row are too wide to fit on that row? Normalement, vous n’avez pas besoin de vous en inquiéter.Normally you don't need to worry about this possibility. Lorsque l’option d’alignement sur les colonnes est activée, ces trois propriétés sont automatiquement ajustées afin que tous les éléments s’insèrent parfaitement dans les lignes sans occasionner de débordement.With Snap to columns on, these three properties will automatically be adjusted so that everything fits nicely within rows without overflowing.

Cependant, lorsque l’option d’alignement sur les colonnes est désactivée ou quand une propriété Width basée sur une formule est définie pour une ou plusieurs de vos cartes, un débordement de ligne peut se produire.But with Snap to columns turned off or a formula-based Width on one or more of your cards, overflowing a row can happen. Dans ce cas, les cartes sont automatiquement renvoyées à la ligne, créant ainsi effectivement une nouvelle ligne.In this case, the cards will automatically wrap so that, effectively, another row is created. Par exemple, modifiez manuellement la propriété Width de la carte Customer purchase order reference (première ligne, troisième élément) sur 500 :For example, let's manually change the Width property of our Customer purchase order reference card (first row, third item) to 500:

Redimensionnement manuel de carte, avec redisposition sur une nouvelle ligne

Les trois cartes constituant la ligne supérieure ne tiennent plus horizontalement dans celle-ci et une autre ligne a été créée suite au débordement.The three cards on the top row no longer fit horizontally, and another row has been created to wrap the overflow. La coordonnée Y de toutes ces cartes reste définie sur 0, et la coordonnée Y des cartes Nom et Description reste définie sur 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. Les cartes présentant différentes valeurs Y ne sont pas fusionnées dans les lignes.Cards that have different Y values aren't merged across rows.

Vous pouvez utiliser ce comportement pour créer une mise en page entièrement dynamique où les cartes sont disposées selon un ordre Z consistant à remplir une ligne le plus possible avant de renvoyer à la ligne suivante.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. Pour ce faire, attribuez à toutes les cartes la même coordonnée Y, et utilisez la coordonnée X pour l’ordre des cartes.To achieve this effect, give all the cards the same Y value, and use X for the order of the cards.

Remplissage des espaces : WidthFitFilling spaces: WidthFit

Le débordement dans le dernier exemple a créé un espace après la deuxième carte Order status, qui était la seconde carte de la première ligne.The overflow in the last example created a space after the Order status card, which was the second card in the first row. Nous pourrions ajuster cela manuellement avec les propriétés Width des deux cartes restantes de façon à combler cet espace, mais cette approche serait fastidieuse.We could manually adjust the Width properties of the two remaining cards to fill this space, but this approach is tedious.

L’autre solution consiste à utiliser la propriété WidthFit.As an alternative, use the WidthFit property. Si une ou plusieurs cartes d’une ligne ont cette propriété définie sur true, tout espace restant sur la ligne est réparti de manière égale entre les cartes.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. C’est pourquoi nous avons dit précédemment que la propriété Width d’une carte était une valeur minimale. L’affichage réel peut être plus large.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. Cette propriété peut uniquement développer une carte, pas la réduire.This property will never cause a card to shrink, only expand.

Si vous définissez WidthFit sur true sur la carte Order status, elle occupe l’espace disponible, alors que la première carte reste inchangée :If we set WidthFit to true on the Order status card, it fills the available space, while the first card remains unchanged:

Propriété WidthFit définie sur true sur la deuxième carte

Si vous définissez également la propriété WidthFit sur true sur la carte Order date, les deux cartes occupent chacune la moitié de l’espace disponible :If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

Propriété WidthFit définie sur true sur les première et deuxième cartes

Notez que les poignées de manipulation sur ces cartes prennent en compte la largeur supplémentaire offerte par la propriété WidthFit, pas la largeur minimale définie par la propriété 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. Manipuler la propriété Width alors que la propriété WidthFit est activée peut être déroutant. Il est donc possible de désactiver celle-ci, d’apporter des modifications à la propriété Width, puis de réactiver la propriété WidthFit.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.

Quand la propriété WidthFit peut-elle être utile ?When might WidthFit be useful? Si vous avez un champ qui n’est utilisé que dans certaines situations, vous pouvez définir sa propriété Visible sur false, de façon à ce que les autres cartes sur la ligne comblent automatiquement l’espace entourant ce champ.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. Vous pouvez utiliser une formule qui a pour effet d’afficher un champ uniquement quand un autre champ a une valeur particulière.You might want to use a formula that shows a field only when another field has a particular value.

Ici, vous allez définir la propriété Visible du champ Order status sur la valeur false statique :Here, we'll set the Visible property of the Order status field to a static false:

Propriété WidthFit définie sur true sur la première carte, avec la carte État de la commande invisible

La deuxième carte étant effectivement supprimée, la troisième carte peut remonter sur la même ligne que la première.With the second card effectively removed, the third card can now return to the same row as the first card. La propriété WidthFit reste définie sur la valeur true pour la première carte, seule celle-ci s’élargit pour combler l’espace disponible.The first card still has WidthFit set to true, so it alone expands to fill the available space.

Étant donné que le champ Order status est invisible, vous ne pouvez pas le sélectionner aussi facilement sur le canevas.Because Order status is invisible, you can't select it as easily on the canvas. Toutefois, vous pouvez sélectionner n’importe quel contrôle, visible ou non, dans la liste hiérarchique des contrôles sur le côté gauche de l’écran.However, you can select any control, visible or not, in the hierarchical list of controls on the left side of the screen.

Propriété HeightHeight

La propriété Height régit la hauteur de chaque carte.The Height property governs the height of each card. Les cartes ont l’équivalent de la propriété WidthFit pour la propriété Height, et cette propriété est toujours définie sur true.Cards have the equivalent of WidthFit for Height, and it's always set to true. Imaginez que cette propriété HeightFit existe, mais ne perdez pas de temps à la rechercher dans le produit, car elle n’est pas encore exposée.Imagine that a HeightFit property exists, but don't look for it in the product because such a property isn't yet exposed.

Étant donné que vous ne pouvez pas désactiver ce comportement, la modification de la hauteur des cartes peut s’avérer difficile.You can't turn off this behavior, so changing the heights of cards can be challenging. Toutes les cartes au sein d’une ligne semblent avoir la même hauteur que la carte plus grande.All cards within a row appear to be the same height as the tallest card. Vous pouvez considérer une ligne comme suit :You might look at a row like this:

Propriété WidthFit définie sur true sur la première carte, avec la carte Order status invisible

Quelle carte détermine la hauteur de la ligne ?Which card is making the row tall? Dans le graphique précédent, la carte Total amount est sélectionnée et semble haute, mais sa propriété Height est définie sur 80 (identique à la hauteur de la première ligne).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). Pour réduire la hauteur d’une ligne, vous devez réduire la hauteur de la carte la plus haute dans cette ligne et vous ne pouvez pas identifier la carte la plus haute sans vérifier la propriété Height de chaque carte.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.

Propriété AutoHeightAutoHeight

Une carte peut également être plus haute que prévu si elle contient un contrôle pour lequel la propriété AutoHeight est définie sur true.A card might also be taller than you expect if it contains a control for which the AutoHeight property is set to true. Par exemple, de nombreuses cartes comprennent une étiquette qui affiche un message d’erreur si la valeur du champ génère un problème de validation.For example, many cards contain a label that displays an error message if the field's value causes a validation problem.

À défaut de texte à afficher (aucune erreur), la hauteur de l’étiquette est réduite à zéro.Without any text to display (no error), the label collapses to zero height. Si vous ignoriez son existence, vous ne sauriez pas qu’elle est là. Et c’est précisément le but :If you didn't know any better, you wouldn't know it was there, and that's as it should be:

Cartes contenant des contrôles dont la propriété AutoHeight est définie sur true, présentant une hauteur nulle

Sur le côté gauche de l’écran, la liste des contrôles affiche ErrorMessage1, qui est le contrôle d’étiquette.On the left side of the screen, the list of controls shows ErrorMessage1, which is our label control. Lorsque vous mettez à jour une application, vous pouvez sélectionner ce contrôle pour lui donner une certaine hauteur et afficher des poignées de manipulation avec lesquelles vous pouvez positionner et redimensionner le contrôle.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 lettre « A » dans une zone bleue indique que le contrôle a la propriété AutoHeight définie sur true :The "A" in a blue box indicates that the control has AutoHeight set to true:

Lors de la création, les contrôles AutoHeight présentent une certain hauteur facilitant l’opération glisser -déplacer

La propriété Text de ce contrôle est définie sur Parent.Error, afin d’obtenir des informations d’erreur dynamiques basées sur des règles de validation.The Text property of this control is set to Parent.Error, which is used to obtain dynamic error information based on validation rules. En guise d’illustration, définissez la propriété Text de ce contrôle de manière statique afin d’augmenter sa hauteur (et, par conséquent, celle de la carte) pour prendre en compte la longueur du texte :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:

En cas de message d’erreur, le contrôle et la carte croissent automatiquement

Si nous allongeons le message d’erreur, à nouveau, le contrôle et la carte s’adaptent à la taille du texte.Let's make the error message a little longer, and again the control and the card grow to accommodate. Notez que l’ensemble de la ligne croît en hauteur, en conservant l’alignement vertical entre les cartes :Note that the row overall grows in height, retaining vertical alignment between the cards:

Quand le message d’erreur est plus long, le contrôle et la carte s’agrandissent, et vous pouvez observer que toutes les cartes figurant sur la même ligne croissent en hauteur simultanément