Exercice : présentation des formules dans les applications canevas

  • 8 minutes

Saviez-vous que nous pouvons ajouter des formules à nos contrôles dans Power Apps ? N’oubliez pas qu’un libellé de texte a juste besoin de texte et qu’un contrôle d’image a besoin d’une image, par exemple. Si vous fournissez l’entrée que Power Apps recherche, vous pouvez introduire toute variation à condition que la formule reflète le type d’entrée attendu par le contrôle.

Dans l’exercice suivant, nous allons modifier notre galerie afin que le champ « Machine Price » affiche une valeur monétaire, ainsi que la couleur du texte de notre champ « Type » afin qu’elle s’affiche comme la couleur de la cafetière. Cette application s’appuie sur l’application que nous avons créée dans la dernière unité. Si vous ne l’avez pas encore terminée, veuillez donc revenir à la dernière unité pour la terminer.

Lorsque votre application « Contoso Coffee Machines » est ouverte, procédez comme suit :

  1. Sélectionnez « Catalog Screen » dans le volet Arborescence.

    Remarque

    Vous pouvez également changer d’écran à partir du menu déroulant dans le coin inférieur de l’écran d’affichage actuel. Si vous cliquez sur la liste déroulante, l’écran sur lequel vous vous trouvez comporte une coche à côté et est surligné en gris foncé.

  2. Sélectionnez votre galerie, puis cliquez sur les points de suspension en regard du contrôle Subtitle1 et sélectionnez Copier.

    Capture d’écran de la sélection de l’option Copier dans le menu du contrôle Subtitle1.

  3. Recliquez sur les points de suspension en regard de Subtitle1, puis sélectionnez Coller.

    Capture d’écran de la sélection de l’option Coller dans le menu du contrôle Subtitle1.

  4. Un doublon nommé Subtitle1_1 est alors créé sur Subtitle1. Sélectionnez le nouveau sous-titre et faites-le glisser sous Subtitle1.

  5. Cliquez sur Subtitle1 sous la galerie dans l’Arborescence, puis définissez la propriété Text sur ThisItem.’Machine Price’.

  6. Pour ajouter le symbole monétaire du dollar américain, définissez la propriété Text sur :

    Text(Value(ThisItem.'Machine Price'), "$ ##.00")

    N’oubliez pas l’ordre des opérations mathématiques lorsque vous utilisez une formule : tout ce qui se trouve entre parenthèses se produit en premier. Notre formule prend la valeur du champ « Machine Price », puisque notre table de données l’a saisie sous forme de texte, nous la déclarons comme numérique en l’enveloppant dans la fonction Value(). Ensuite, nous allons mettre en forme le résultat sous forme de texte en ajoutant le symbole du dollar ainsi que les valeurs numériques, puis en cents, même si la valeur en cents est zéro.

    Remarque

    Si votre formule renvoie une erreur, le paramètre de langue de votre environnement Power Apps peut affecter certains séparateurs et opérateurs. Par exemple, la formule ci-dessus est exprimée pour une langue et une région qui utilisent un point en tant que séparateur décimal, comme le Japon ou le Royaume-Uni.

    Cependant, cette même formule pour une langue et une région où une virgule est utilisée en tant que séparateur décimal, comme la France ou l’Espagne, devra être : Text(Value(ThisItem.'Machine Price'); "$ ##,00").

    L’opérateur de sélection de propriété . (point) dans ThisItem.Price est toujours le même, quel que soit le séparateur décimal, mais notez que le séparateur décimal et le séparateur d’opération de chaînage ont été respectivement remplacés par une virgule et un point-virgule. En interne, la formule ne change pas ; tout ce qui change est la façon dont l’auteur l’affiche et la modifie.

  7. Modifions maintenant la propriété Color de notre libellé Subtitle1_1 dans notre galerie. Sélectionnez le contrôle Subtitle1_1 et recherchez la propriété Text, qui affiche ThisItem.Type.

  8. Recherchez la propriété Color pour Subtitle1_1. Vous voyez qu’elle affiche « RVBA(0, 0, 0, 1) ». Notez également que juste en dessous du champ de saisie de la formule, Power Apps affiche une formule indiquant RVBA(0, 0, 0, 1) = et un carré rempli de noir. Elle déclare également que le Type de données est Couleur.

  9. Redéfinissons la propriété Color du libellé Subtitle1_1 sur Color.Purple. Vous avez peut-être remarqué que dès que vous avez tapé le mot « Color », Power Apps a commencé à suggérer automatiquement des valeurs possibles pour le reste de ce champ sous la barre de formule. Dans cette syntaxe, Power Apps reconnaît toutes les couleurs HTML disponibles.

    Remarque

    Certains champs tels que les champs de couleur affichent uniquement la valeur complète de la formule lorsque vous cliquez dans le champ de saisie de la formule. Lorsque vous saisissez une valeur de couleur, vous devez inclure tous les éléments de formule afin que Power Apps comprenne l’entrée. Dans ce cas, la formule doit être Color.Purple.

  10. À présent, jetez un œil à droite de la galerie sur votre contrôle de formulaire (sans le sélectionner) et notez que nous avons un champ intitulé « Primary Color ». Nos données sont écrites de sorte que nous puissions utiliser la valeur de ce champ dans notre formule. Dans le champ de propriété Color de votre libellé Subtitle1_1, remplacez votre saisie par la formule suivante :

    ColorValue(ThisItem. 'Primary Color')

    Avez-vous noté que la couleur du texte dans le libellé Subtitle1_1 correspond maintenant à la valeur Primary Color de la cafetière ? Power Apps peut redéfinir le nom textuel d’une couleur sur une valeur de couleur à l’aide de la formule ColorValue. Vous pouvez voir juste en dessous de la barre de formule que Power Apps affiche le type de données Couleur et modifie la couleur de tous les éléments de la galerie en fonction de la couleur principale de la cafetière.

    Capture d’écran des propriétés.

  11. Ensuite, nous allons ajouter des en-têtes aux écrans que nous avons créés. Pour ce faire, nous allons copier certains contrôles de notre écran Catalog Screen et les coller sur les nouveaux écrans. En maintenant enfoncé la touche Maj, sélectionnez les contrôles Rectangle1 et Label1 en haut de votre écran « Catalog Screen ». (Vous pouvez également les sélectionner dans l’Arborescence.) Cliquez avec le bouton droit et sélectionnez « Copier » ou copiez les contrôles dans le presse-papiers de votre appareil à l’aide du raccourci clavier Ctrl + C.

    Conseil

    Il existe des fonctionnalités intéressantes lorsque vous « cliquez avec le bouton droit » sur un ou plusieurs contrôles sélectionnés. Ces fonctionnalités s’affichent sur votre écran en regard du ou des contrôles sélectionnés. Vous pouvez non seulement couper et copier, mais aussi regrouper, réorganiser, aligner ou ajouter des commentaires (pour les autres utilisateurs). Selon le type de contrôle, vous voyez des fonctionnalités telles que Police, Taille, Couleur et Remplissage.

    Capture d’écran de la sélection de Label1 et Rectangle1, puis d’un clic droit pour copier.

  12. À présent, sélectionnez l’écran « Home Screen » et collez-y les deux contrôles. Repositionnez-les afin qu’ils soient tous deux centrés en haut de l’écran.

  13. Ensuite, sélectionnez l’écran « Admin Screen » et répétez le collage. Repositionnez également les contrôles.

  14. Ensuite, à l’aide de la propriété Text des contrôles de libellé que nous avons insérés, nous allons modifier le nom pour refléter les noms d’écran. Sélectionnez le contrôle de libellé dans l’en-tête de votre écran « Admin Screen ». N’oubliez pas que tout ce dont un contrôle de libellé a besoin est du texte. Saisissez ce qui suit dans la propriété Text de votre contrôle de libellé d’en-tête :

    'Admin Screen'.Name

    Conseil

    Vous avez peut-être remarqué que lorsque vous avez commencé à taper « Admin Screen », Power Apps a affiché des informations potentielles de l’écran « Admin Screen » que vous pouviez utiliser comme texte dans ce libellé. Les libellés sont un contrôle crucial à ajouter à votre application lorsque vous la développez, car ils peuvent afficher des informations que vous ne verriez peut-être pas autrement. Vous pouvez en ajouter à/supprimer de votre application si nécessaire.

    Capture d’écran de la redéfinition de nom du libellé d’en-tête sur la propriété Name de l’écran.

  15. Nous avons simplement utilisé la propriété Name de notre écran « Admin Screen ». Faisons de même maintenant avec l’écran Home Screen en saisissant ce qui suit dans la formule Text :

    'Home Screen'.Name

Notre application prend désormais forme à mesure que nous améliorons l’expérience utilisateur à l’aide de fonctions avec nos formules de contrôle.