Partager via

Contrôle Bouton dans Power Apps

  • Article

Contrôle sur lequel l’utilisateur peut cliquer ou appuyer pour interagir avec l’application.

Description

Configurez la propriété OnSelect d’un contrôle Bouton pour exécuter une ou plusieurs formules lorsque l’utilisateur clique ou appuie sur le contrôle.

Propriétés clés

OnSelect – Actions à effectuer lorsque l’utilisateur appuie ou clique sur un contrôle.

Texte  : texte qui apparaît sur un contrôle ou que l’utilisateur tape dans un contrôle.

Propriétés supplémentaires

Align  : emplacement du texte par rapport au centre horizontal de son contrôle.

AutoDisableOnSelect : désactive automatiquement le contrôle pendant l’exécution du comportement OnSelect.

BorderColor  : couleur de bordure du contrôle.

BorderStyle  : indique si la bordure d’un contrôle est unie, discontinue, en pointillés ou s’il n’y en a aucune.

BorderThickness  : épaisseur de bordure d’un contrôle.

Color  : couleur du texte dans un contrôle.

DisplayMode  : indique si le contrôle autorise l’entrée utilisateur (Edit), affiche uniquement les données (View) ou est désactivé (Disabled).

DisabledBorderColor  : couleur de bordure d’un contrôle si sa propriété DisplayMode est définie sur Disabled.

DisabledColor  : couleur du texte d’un contrôle si sa propriété DisplayMode est définie sur Disabled.

DisabledFill  : couleur d’arrière-plan d’un contrôle si sa propriété DisplayMode est définie sur Disabled.

FocusedBorderColor  : couleur de bordure d’un contrôle lorsque le contrôle est actif.

FocusedBorderThickness  : épaisseur de bordure d’un contrôle lorsque le contrôle est actif.

Fill  : couleur d’arrière-plan d’un contrôle.

Font  : nom de la famille de polices dans laquelle le texte s’affiche.

FontWeight  : épaisseur du texte dans un contrôle : Gras, Semibold, Normal ou Plus claire.

Height  : distance entre le haut et le bas d’un contrôle.

HoverBorderColor  : couleur de bordure d’un contrôle lorsque l’utilisateur maintient le pointeur de la souris sur ce contrôle.

HoverColor  : couleur du texte d’un contrôle lorsque l’utilisateur maintient le pointeur de la souris sur ce contrôle.

HoverFill  : couleur d’arrière-plan d’un contrôle lorsque l’utilisateur maintient le pointeur de la souris sur ce contrôle.

Italic  : indique si le texte d’un contrôle est en italique.

PaddingBottom  : distance entre le texte d’un contrôle et le bord inférieur de ce contrôle.

PaddingLeft  : distance entre le texte d’un contrôle et le bord gauche de celui-ci.

PaddingRight  : distance entre le texte d’un contrôle et le bord droit de celui-ci.

PaddingTop  : distance entre le texte d’un contrôle et le bord supérieur de ce contrôle.

Pressed : true quand un contrôle est activé, false dans le cas contraire.

PressedBorderColor  : couleur de bordure d’un contrôle lorsque l’utilisateur appuie ou clique dessus.

PressedColor  : couleur de texte d’un contrôle lorsque l’utilisateur appuie ou clique dessus.

PressedFill  : couleur d’arrière-plan d’un contrôle lorsque l’utilisateur appuie ou clique dessus.

RadiusBottomLeft  : degré auquel le coin inférieur gauche d’un contrôle est arrondi.

RadiusBottomRight  : degré auquel le coin inférieur droit d’un contrôle est arrondi.

RadiusTopLeft  : degré auquel le coin supérieur gauche d’un contrôle est arrondi.

RadiusTopRight  : degré auquel le coin supérieur droit d’un contrôle est arrondi.

Size  : taille de police du texte qui apparaît sur un contrôle.

Barré  : indique si une ligne s’affiche sur le texte qui apparaît sur un contrôle.

TabIndex  : ordre de navigation à l’aide du clavier par rapport à d’autres contrôles.

Info-bulle  : texte explicatif qui s’affiche lorsque l’utilisateur pointe sur un contrôle.

Underline  : indique si une ligne s’affiche sous le texte qui apparaît sur un contrôle.

VerticalAlign  : emplacement du texte sur un contrôle par rapport au centre vertical de celui-ci.

Visible  : indique si un contrôle est visible ou est masqué.

Width  : distance entre les côtés droit et gauche d’un contrôle.

X  : distance entre le bord gauche d’un contrôle et le bord gauche de son conteneur parent (ou de l’écran à défaut de conteneur parent).

Y  : distance entre le bord supérieur d’un contrôle et le bord supérieur du conteneur parent (ou de l’écran à défaut de conteneur parent).

Navigate( ScreenName, ScreenTransitionValue )

Exemples

Ajouter une formule de base à un bouton

  1. Ajoutez un contrôle Saisie de texte et nommez-le Source.

    Vous ne savez pas comment ajouter, nommer et configurer un contrôle ?

  2. Ajoutez un contrôle Bouton, définissez sa propriété Texte sur « Ajouter », puis définissez sa propriété OnSelect sur la formule suivante :
    UpdateContext({Total:Total + Value(Source.Texte)})

    Vous voulez des informations supplémentaires sur les fonctions UpdateContext ou d’autres fonctions ?

  3. Ajoutez un contrôle Étiquette, définissez sa propriété Texte dans la barre de formule pour Valeur (totale), puis appuyez sur F5.

  4. Effacez le texte par défaut de Source, tapez un nombre, puis cliquez ou appuyez sur Ajouter.

    Le contrôle Étiquette affiche le nombre que vous avez tapé.

  5. Effacez le nombre de Source, tapez un autre nombre, puis cliquez ou appuyez sur Ajouter.

    Le contrôle Étiquette affiche la somme des deux nombres que vous avez tapés.

  6. (facultatif) Répétez l’étape précédente une ou plusieurs fois.

  7. Pour revenir à l’espace de travail par défaut, appuyez sur ÉCHAP (ou cliquez ou appuyez sur l’icône de fermeture dans l’angle supérieur droit).

Configurer un bouton avec plusieurs formules

Ajoutez une formule qui efface le contrôle Saisie de texte entre les entrées.

  1. Définissez la propriété HintText de Source sur « Entrez un nombre ».

  2. Définissez la propriété OnSelect de Ajouter sur la formule suivante :

    UpdateContext({Total:Total + Value(Source.Texte)});
    UpdateContext({ClearInput: ""})

    Notes

    Si vous avez plusieurs formules, séparez-les à l’aide d’un point-virgule «  ;  ».

  3. Définissez la propriété Default de Source sur ClearInput.

  4. Appuyez sur F5, puis testez l’application en ajoutant plusieurs nombres.

Ajouter un bouton pour réinitialiser le total

Ajoutez un deuxième bouton pour effacer le total entre les calculs.

  1. Ajoutez un autre contrôle Bouton, définissez sa propriété Texte sur « Effacer », puis sa propriété OnSelect sur la formule suivante :

    UpdateContext({Total:0})

  2. Appuyez sur F5, ajoutez plusieurs nombres, puis cliquez ou appuyez sur Effacer pour réinitialiser le total.

Modifier l’apparence d’un bouton

Modifier la forme d’un bouton

Par défaut, Power Apps crée un contrôle Bouton rectangulaire aux angles arrondis. Vous pouvez apporter des modifications de base à la forme d’un contrôle Bouton en définissant ses propriétés Height, Width et Radius.

Notes

Icons et Shapes offrent un vaste éventail de conceptions, et peuvent effectuer certaines fonctions de base identiques à celles des contrôles Bouton. Toutefois, Icons et Shapes n’ont pas de propriété Texte.

  1. Ajoutez un contrôle Bouton, puis définissez ses propriétés Height et Width sur 300 pour créer un grand bouton carré.

  2. Modifiez les propriétés RadiusTopLeft, RadiusTopRight, RadiusBottomLeft et RadiusBottomRight pour ajuster la courbure de chaque angle. Voici quelques exemples de formes commençant à partir d’un bouton carré de 300x300 :

Modifier la couleur d’un bouton en cas de pointage sur celui-ci

Par défaut, la couleur de remplissage d’un contrôle Bouton est atténuée de 20 % lorsque vous pointez dessus avec une souris. Vous pouvez ajuster ce comportement en modifiant la propriété HoverFill qui utilise la fonction ColorFade. Si vous définissez la formule ColorFade sur un pourcentage positif, la couleur devient plus claire lorsque vous pointez sur le bouton, tandis qu’un pourcentage négatif rend la couleur plus sombre.

  • Modifiez le pourcentage ColorFade dans la propriété HoverFill de l’un des boutons que vous avez créés, puis observez les effets.

Vous pouvez également spécifier la couleur d’un contrôle Bouton en définissant sa propriété HoverFill sur une formule contenant la fonction ColorValue au lieu de la fonction ColorFade, comme dans ColorValue("Red").

Notes

La valeur Color peut être toute définition de couleur CSS, qu’il s’agisse d’un nom ou d’une valeur hexadécimale.

  • Remplacez la fonction ColorFade par une fonction ColorValue dans l’un des boutons que vous avez créés, puis observez les effets.

Instructions d’accessibilité

Contraste des couleurs

Prise en charge du lecteur d’écran

  • Texte doit être présent.

Prise en charge du clavier

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).