Dans PowerApps, vous pouvez facilement créer des formulaires attrayants et efficaces sur le plan de leur utilisation. Par exemple, considérez ce formulaire de base qui permet d’enregistrer des commandes :

Exemple de formulaire de commande vente

Ce tutoriel décrit les étapes de création de ce formulaire. Il aborde également certains sujets avancés, tels que le dimensionnement dynamique des champs pour remplir l’espace disponible.

Avant de commencer

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

Ajouter une galerie

  1. Créez une application pour tablette à partir de zéro.

    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.

  2. Ajoutez l’entité Sales order dans Common Data Service en tant que source de données de l’application.

    En dehors de ce tutoriel, vous pouvez utiliser n’importe quelle source de données, dont des listes SharePoint et des tableaux Excel.

  3. Ajoutez un contrôle Gallery vertical et définissez sa propriété Items **sur 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.

    Liste des commandes vente

  4. Dans la galerie, cliquez ou appuyez sur 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.

Ajouter une barre de titre

  1. Ajoutez un écran vide là où vous allez placer le formulaire.

    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.

  2. En haut du nouvel écran, ajoutez un contrôle Label, puis définissez sa propriété Text sur l’expression suivante :
    "Sales Order " & Gallery1.Selected.SalesOrderId

    L’étiquette indique le numéro de commande de l’enregistrement que vous avez sélectionné dans la galerie.

  3. (facultatif) Mettez en forme l’étiquette comme suit :

    1. Définissez sa propriété Align sur Center.
    2. Définissez sa propriété Size sur 20.
    3. Définissez sa propriété Fill sur Navy.
    4. Définissez sa propriété Color sur White.
    5. Définissez sa propriété Width sur Parent.Width.
    6. Définissez ses propriétés X et Y sur 0.

    Barre de titre

Ajouter un formulaire

  1. Ajoutez un contrôle Edit form, puis déplacez-le et redimensionnez-le pour remplir l’écran sous l’étiquette.

    À 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. Si vous utilisez la barre de formule, le formulaire n’affiche pas tous les champs par défaut. Vous pouvez toujours afficher les champs souhaités en cochant une ou plusieurs cases dans le volet de droite.

  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.

    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. Toutefois, la plupart sont vides, et il peut se passer un certain temps avant qu’ils ne trouvent leur position finale.

  3. Définissez la propriété Item du formulaire sur 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.

  4. Dans le volet de droite, masquez chacun de ces champs en décochant la case correspondante :

    • Sales order ID
    • Account
    • Sales person
    • Account 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.

    Votre écran doit ressembler à ceci :

    Commande dans une mise en page de base à trois colonnes

Sélectionner une carte de données

À chaque champ affiché correspond une carte de données sur le formulaire. 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.

Vous pouvez également sélectionner des cartes directement sur le formulaire. Quand une carte est sélectionnée, une légende en noir apparaît au-dessus de celle-ci.

Sélection de carte de données

Remarque : pour supprimer une carte (et pas simplement la masquer), sélectionnez-la et appuyez sur la touche Suppr.

Organiser les cartes en colonnes

Par défaut, les formulaires des applications pour tablette ont trois colonnes, et ceux des applications pour téléphone en ont juste une. 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.

Dans ce graphique, le nombre de colonnes du formulaire est passé de trois à quatre avec la case Aligner sur les colonnes cochée. Les cartes du formulaire ont été réorganisées automatiquement pour s’ajuster à la nouvelle disposition.

Commande dans une mise en page de base sur quatre colonnes

Redimensionner des cartes sur plusieurs colonnes

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. 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. Lorsque vous faites glisser la poignée, la carte s’aligne aux limites de la colonne.

Pour que votre conception soit plus souple tout en conservant une certaine structure, vous pouvez augmenter le nombre de colonnes à 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. Voyons comment cela fonctionne.

  1. Dans le volet de droite, définissez le nombre de colonnes du formulaire sur 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.

  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.

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

    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.

    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.

  5. Faites en sorte que la première ligne de l’adresse de livraison occupe toute la largeur du formulaire :

C’est terminé. Vous avez le formulaire souhaité, qui combine des lignes avec différents nombres de colonnes :

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

Manipuler les contrôles dans une carte

L’adresse de livraison comprend plusieurs éléments d’information que vous voulez regrouper visuellement pour l’utilisateur. 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.

  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.

    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.

    Il peut être tentant de simplement supprimer le contrôle d’étiquette. Dans de nombreux cas, cela fonctionne correctement. Toutefois, des formules peuvent dépendre de la présence de ce contrôle. L’approche la plus sûre consiste à supprimer le texte ou à définir la propriété Visible du contrôle sur 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.

    La hauteur de la carte est réduite lorsque son contenu occupe moins d’espace.

    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. 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. Voici comment procéder pour la carte État :

Étape Description Résultat
1 Sélectionnez la carte État pour que les poignées de manipulation apparaissent autour de la carte. Sélectionner une carte
2 Sélectionnez l’étiquette dans cette carte pour que des poignées de manipulation apparaissent autour de la carte. Sélectionner un contrôle dans une carte
3 Positionnez le curseur à droite du texte, puis supprimez la portion superflue. Modifier le texte d’un contrôle dans une carte
4 À 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. Redimensionner un contrôle dans une carte
5 Sélectionnez le contrôle d’entrée de texte à l’intérieur de cette carte. Sélectionner un autre contrôle dans la carte
6 À 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. Redimensionner un contrôle dans une carte
7 Glissez-déposez la zone de saisie de texte vers la partie supérieure droite du contrôle d’étiquette. Déplacer un contrôle à l’intérieur d’une carte
Les modifications de la carte État sont à présent terminées. Les modifications de la carte sont terminées

Résultat pour la troisième ligne d’adresse :

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. 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. Lorsque vous déplacez ou redimensionnez un contrôle, ces formules dynamiques sont remplacées par des valeurs statiques. Le cas échéant, vous pouvez restaurer les formules dynamiques à l’aide de la barre de formule.

Désactivation de l’alignement sur les colonnes

Il se peut que vous ayez besoin d’un contrôle plus précis que celui offert par les 12 colonnes standard. Dans ce cas, vous pouvez désactiver l’option Aligner sur les colonnes et positionner les cartes manuellement. 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.

Dans notre exemple, les quatre composants de la troisième ligne de l’adresse ont exactement la même largeur. 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.

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. Chaque fois que vous maintenez la touche Alt enfoncée, tous les contrôles affichent des légendes en noir. Ce comportement est normal et permet d’afficher les noms du contrôle.

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 :

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 ?

Comportement Options Aligner sur les colonnes activée Options Aligner sur les colonnes désactivée
Un redimensionnement entraîne l’alignement sur Le nombre de colonnes que vous sélectionnez :
1, 2, 3, 4, 6 ou 12
12 colonnes
L’alignement suite au redimensionnement peut être modifié Non Oui, en maintenant la touche Alt enfoncée
Les cartes sont automatiquement réorganisées entre les lignes (nous y reviendrons de façon plus détaillée ultérieurement) Oui Non

Définir la largeur et la hauteur

Comme tout dans PowerApps, la mise en page du formulaire est régie par des propriétés sur les contrôles de carte. 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. 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.

Mise en page de base : X, Y et Width

Les propriétés X et Y contrôlent la position des cartes. Lorsque vous travaillez avec des contrôles sur un canevas brut, ces propriétés indiquent une position absolue. Dans un formulaire, elles ont une signification différente :

  • X : ordre à l’intérieur d’une ligne.
  • Y : numéro de ligne.

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

Jetons un coup d’œil aux propriétés X, Y et Width des cartes dans notre formulaire :

Coordonnées X et Y du formulaire de commande vente

Débordement des lignes

Que se passe-t-il si les cartes constituant une ligne sont trop larges pour tenir sur celle-ci ? Normalement, vous n’avez pas besoin de vous en inquiéter. 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.

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. Dans ce cas, les cartes sont automatiquement renvoyées à la ligne, créant ainsi effectivement une nouvelle ligne. Par exemple, modifiez manuellement la propriété Width de la carte Customer purchase order reference (première ligne, troisième élément) sur 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. 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. Les cartes présentant différentes valeurs Y ne sont pas fusionnées dans les lignes.

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. Pour ce faire, attribuez à toutes les cartes la même coordonnée Y, et utilisez la coordonnée X pour l’ordre des cartes.

Remplissage des espaces : 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. 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.

L’autre solution consiste à utiliser la propriété WidthFit. 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. 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. Cette propriété peut uniquement développer une carte, pas la réduire.

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 :

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 :

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

Quand la propriété WidthFit peut-elle être utile ? 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. Vous pouvez utiliser une formule qui a pour effet d’afficher un champ uniquement quand un autre champ a une valeur particulière.

Ici, vous allez définir la propriété Visible du champ Order status sur la valeur false statique :

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

Étant donné que le champ Order status est invisible, vous ne pouvez pas le sélectionner aussi facilement sur le canevas. 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.

Propriété Height

La propriété Height régit la hauteur de chaque carte. 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. 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.

Étant donné que vous ne pouvez pas désactiver ce comportement, la modification de la hauteur des cartes peut s’avérer difficile. Toutes les cartes au sein d’une ligne semblent avoir la même hauteur que la carte plus grande. Vous pouvez considérer une ligne comme suit :

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

Propriété AutoHeight

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

À défaut de texte à afficher (aucune erreur), la hauteur de l’étiquette est réduite à zéro. Si vous ignoriez son existence, vous ne sauriez pas qu’elle est là. Et c’est précisément le but :

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. 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. La lettre « A » dans une zone bleue indique que le contrôle a la propriété AutoHeight définie sur 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. 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 :

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. Notez que l’ensemble de la ligne croît en hauteur, en conservant l’alignement vertical entre les cartes :

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