Contrôle bouton dans Power Apps

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

Descriptif

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

Propriétés principales

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

Aligner : 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 la bordure d’un contrôle.

BorderStyle : indique si la bordure d’un contrôle est Solid, Dashed, Dotted ou None.

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

Couleur : couleur du texte dans un contrôle.

ContentLanguage : langue du contenu du contrôle, si elle est différente du conteneur du contrôle.

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

DisabledBorderColor : couleur de la bordure d’un contrôle si la propriété DisplayMode du contrôle a la valeur Disabled.

DisabledColor : couleur du texte dans 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.

FocusBorderColor : couleur de la bordure d’un contrôle lorsque le contrôle est concentré.

FocusBorderThickness : épaisseur de la bordure d’un contrôle lorsque le contrôle est concentré.

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

Police : nom de la famille de polices dans laquelle le texte apparaît.

FontWeight : poids du texte dans un contrôle : Gras, Semibold, Normal ou Plus léger.

Hauteur : distance entre les bords supérieurs et inférieurs d’un contrôle.

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

HoverColor : couleur du texte dans un contrôle lorsque l’utilisateur conserve le pointeur de la souris dessus.

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

Italique : indique si le texte d’un contrôle est 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 ce contrôle.

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

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

Appuyez surTrue pendant qu’un contrôle est enfoncé, false dans le cas contraire.

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

PressedColor : couleur du texte dans un contrôle lorsque l’utilisateur appuie ou clique sur ce contrôle.

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

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.

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

Barre d’accès : indique si une ligne s’affiche via le texte qui apparaît sur un contrôle.

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

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

Soulignement : indique si une ligne apparaît sous le texte qui apparaît sur un contrôle.

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

Visible : indique si un contrôle apparaît ou est masqué.

Largeur : distance entre les bords gauche et droit 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).

Fonctions associées

Navigate( ScreenName, ScreenTransitionValue )

Examples

Ajouter une formule de base à un bouton

1. Ajoutez un contrôle Text input et nommez-le Source.

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

2. Ajoutez un contrôle Button , définissez sa propriété Text sur « Add » et définissez sa propriété OnSelect sur cette formule :
   UpdateContext({Total :Total + Value(Source.Text)})

   Vous souhaitez plus d’informations sur la fonction UpdateContext ou d’autres fonctions ?

3. Ajoutez un contrôle Label , définissez sa propriété Text dans la barre de formule sur Value(Total), puis appuyez sur F5.

4. Effacez le texte par défaut de la source, tapez un nombre dans celui-ci, puis cliquez ou appuyez sur Ajouter.

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

5. Effacez le nombre de la source, tapez un autre numéro dans celui-ci, puis cliquez ou appuyez sur Ajouter.

   Le contrôle Label 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 fermer dans le coin supérieur droit).

Configurer un bouton avec plusieurs formules

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

1. Définissez la propriété HintText de la source sur « Entrer un nombre ».

2. Définissez la propriété OnSelect de Add à cette formule :

   UpdateContext({Total :Total + Valeur(Source.Text)}) ;
   UpdateContext({ClearInput : « "})

   Note

   Séparez plusieurs formules avec 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 autre bouton pour réinitialiser le total

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

1. Ajoutez un autre contrôle Button , définissez sa propriété Text sur « Clear » et définissez sa propriété OnSelect sur cette formule :

   UpdateContext({Total :0})

2. Appuyez sur F5, ajoutez plusieurs nombres ensemble, 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 avec des angles arrondis. Vous pouvez apporter des modifications de base à la forme d’un contrôle Button en définissant ses propriétés Height, Width et Radius .

1. Ajoutez un contrôle Button et 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 quantité de courbure sur chaque angle. Voici quelques exemples de formes différentes, chacune à partir d’un bouton carré de 300 x 300 :

   • Définissez les quatre valeurs Radius sur 150 pour créer un cercle.
   • Définissez les valeurs de RadiusTopLeft et RadiusBottomRight sur 300 pour créer un bouton en forme feuille.
   • Définissez les valeurs de RadiusTopLeft et RadiusTopRight sur 300, et les valeurs de RadiusBottomLeft et RadiusBottomRight sur 100 pour créer un bouton en forme d’onglet.

Modifier la couleur d’un bouton lorsque vous pointez dessus

Par défaut, la couleur de remplissage d’un contrôle Button s’estompé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 foncée.

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

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

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

Conseils sur l’accessibilité

Contraste des couleurs

• Les exigences de contraste de couleur standard s’appliquent.

Prise en charge du lecteur d’écran

• Le texte doit être présent.

Prise en charge du clavier

• TabIndex doit être égal à zéro ou supérieur afin que les utilisateurs du clavier puissent y accéder.
• Les indicateurs de focus doivent être clairement visibles. Utilisez FocusBorderColor et FocusBorderThickness pour y parvenir.