Ajouter et configurer un contrôle dans PowerAppsAdd and configure a control in PowerApps

Ajoutez divers éléments d’interface utilisateur à votre application et configurez les aspects de leur apparence et leur comportement directement, à partir de la barre d’outils, sous l’onglet Propriétés ou dans la barre de formule.Add a variety of UI elements to your app, and configure aspects of their appearance and behavior directly, from the toolbar, in the Properties tab, or in the formula bar. Ces éléments d’interface utilisateur sont appelés contrôles, et les aspects que vous configurez sont appelés propriétés.These UI elements are called controls, and the aspects that you configure are called properties.

Conditions préalablesPrerequisites

  1. Inscrivez-vous à PowerApps, installez-le, ouvrez-le, puis connectez-vous en fournissant les informations d’identification que vous avez utilisées pour vous inscrire.Sign up for PowerApps, install it, open it, and then sign in by providing the same credentials that you used to sign up.
  2. Dans PowerApps Studio, cliquez ou appuyez sur Nouveau dans le menu Fichier (près du bord gauche).In PowerApps Studio, click or tap New on the File menu (near the left edge).

    Option Nouveau du menu Fichier

  3. Sur la mosaïque Application vide, cliquez ou appuyez sur Mode téléphone.On the Blank app tile, click or tap Phone layout.

    Créer une application à partir de zéro

  4. Si vous êtes invité à suivre la visite guidée, cliquez ou appuyez sur Next afin de vous familiariser avec les zones clés de l’interface PowerApps (ou cliquez ou appuyez sur Skip pour ignorer l’invitation).If you're prompted to take the intro tour, click or tap Next to get familiar with key areas of the PowerApps interface (or click or tap Skip).

    Écran d’ouverture de la visite guidée

    Vous pouvez toujours suivre la visite guidée ultérieurement en cliquant ou en appuyant sur l’icône de point d’interrogation près de l’angle supérieur droit de l’écran, puis en cliquant ou appuyant sur Take the intro tour.You can always take the tour later by clicking or tapping the question-mark icon near the upper-right corner and then clicking or tapping Take the intro tour.

Ajouter un contrôleAdd a control

Vous pouvez ajouter n’importe quel contrôle dans plusieurs catégories en cliquant ou en appuyant sur l’onglet Insérer de la barre d’outils, en cliquant ou en appuyant sur une catégorie, puis en cliquant ou en appuyant sur le contrôle souhaité.You can add any control in a variety of categories by clicking or tapping the Insert tab of the toolbar, clicking or tapping a category, and then clicking or tapping the control that you want. Dans cette section, passez en revue les contrôles de chaque catégorie pour vous familiariser avec les types de contrôles que vous pouvez ajouter et où vous pouvez trouver chaque type.In this section, review the controls in each category to get familiar with the types of controls that you can add and where you might find each type.

  • Sous l’onglet Insertion, cliquez ou appuyez sur l’une de ces catégories, puis sur le contrôle que vous souhaitez ajouter :On the Insert tab, click or tap any of these categories, and then click or tap the control that you want to add:

    Texte : Label, Text input, HTML Text, Pen inputText: Label, Text input, HTML Text, Pen input
    Contrôles: Button, Drop down, Date picker, List box, Check box, Radio, Toggle, Slider, Rating, TimerControls: Button, Drop down, Date picker, List box, Check box, Radio, Toggle, Slider, Rating, Timer
    Galerie : Vertical, Horizontal, Flexible height, Blank vertical, Blank horizontal, Blank flexible heightGallery: Vertical, Horizontal, Flexible height, Blank vertical, Blank horizontal, Blank flexible height
    Data tableData table
    Formulaires : Edit, Display, Entity formForms: Edit, Display, Entity form
    Éléments multimédias : Image, Camera, Barcode, Video, Audio, Microphone, Add pictureMedia: Image, Camera, Barcode, Video, Audio, Microphone, Add picture
    Graphiques : Column chart, Line chart, Pie chartCharts: Column chart, Line chart, Pie chart
    IcônesIcons

Conseil : si vous avez besoin de davantage d’espace pour les contrôles, ajoutez un écran.Tip: If you need more space for controls, add another screen.

Configurer un contrôle directementConfigure a control directly

Dans cette procédure, vous ajoutez et vous configurez un contrôle Label, mais vous pouvez appliquer un grand nombre de ces mêmes principes à d’autres contrôles.In this procedure, you'll add and configure a Label control, but you can apply many of the same principles to other controls.

  1. Cliquez ou appuyez sur l’onglet Insertion, puis sur Label.Click or tap the Insert tab, and then click or tap Label.

    Onglet Insérer

    Lorsque vous ajoutez un contrôle, il est sélectionné par défaut.When you add a control, it's selected by default. Vous pouvez également sélectionner un contrôle existant en cliquant ou en appuyant sur celui-ci.You can also select an existing control by clicking or tapping it. Lorsqu’un contrôle est sélectionné, une zone de sélection l’entoure et d’autres zones de l’interface utilisateur changent afin que vous puissiez configurer le contrôle sélectionné.When a control is selected, a selection box surrounds it, and other areas of the UI change so that you can configure the selected control. Par exemple, un contrôle Label sélectionné ressemble à ceci.For example, a selected Label control resembles this graphic.

    Une étiquette sélectionnée

    Important : si un contrôle est sélectionné lorsque vous sélectionnez un autre contrôle ou une zone vide de l’écran, le premier élément n’est plus sélectionné.Important: If a control is selected when you select another control or a blank area of the screen, the first element is no longer selected.

  2. Réduisez la largeur du contrôle Label en faisant glisser une poignée sur le bord droit du rectangle de sélection vers la gauche.Make the Label control narrower by dragging a handle on the right edge of the selection box to the left. (La poignée du milieu apparaît uniquement si vous effectuez un zoom.)(The middle handle appears only if you zoom in.)

    Une étiquette redimensionnée

    Vous pouvez également redimensionner un contrôle en modifiant ses propriétés Height, Width ou les deux, comme décrit plus loin dans cette rubrique.You can also resize a control by modifying its Height, Width, or both properties, as this topic describes later.

  3. Déplacez le contrôle Label en faisant glisser la zone de sélection (ou en modifiant les propriétés X, Y ou les deux, comme décrit plus loin dans cette rubrique).Move the Label control by dragging the selection box itself (or by modifying the X, Y, or both properties, as this topic describes later).
  4. Cliquez trois fois sur le texte qui apparaît dans le contrôle Label, puis tapez Hello, world.Triple-click the text that appears in the Label control, and then type Hello, world.

    Une étiquette avec du texte personnalisé

    Vous pouvez également modifier ce texte en définissant la propriété Text, comme décrit plus loin dans cette rubrique.You can also modify this text by setting the Text property of this control, as this topic describes later.

Configurer un contrôle à partir de la barre d’outilsConfigure a control from the toolbar

En configurant un contrôle à partir de la barre d’outils, vous pouvez spécifier une plus grande variété d’options que vous ne le pourriez en configurant un contrôle directement.By configuring a control from the toolbar, you can specify a wider variety of options than you can by configuring a control directly.

  1. Avec le contrôle Label sélectionné, cliquez ou appuyez sur l’onglet Accueil de la barre d’outils.With the Label control selected, click or tap the Home tab of the toolbar.

    Onglet Accueil

  2. Cliquez ou appuyez sur Fill, puis cliquez ou appuyez sur une couleur comme aigue-marine.Click or tap Fill, and then click or tap a color such as aquamarine.

    Option de remplissage

    Le contrôle Label reflète votre sélection.The Label control reflects your selection.

    Une étiquette avec remplissage aigue-marine

  3. Modifiez la famille de polices et la taille du texte (par exemple, remplacez-les par 18 pt.Change the font family and the size of the text (for example, to 18 pt. Georgia).Georgia).

    Contrôles de police

    Le contrôle Label reflète votre sélection.The Label control reflects your selection.

    18 points Georgia

  4. Cliquez ou appuyez sur l’onglet Label, cliquez ou appuyez sur AlignementVertical, puis cliquez ou appuyez sur Haut.Click or tap the Label tab, click or tap VerticalAlign, and then click or tap Top.

    Onglet Zone de texte

    Le contrôle Label reflète votre sélection.The Label control reflects your selection.

    Une étiquette avec le texte aligné sur le haut de la zone

Configurer un contrôle à partir de l’onglet PropriétésConfigure a control from the Properties tab

Sous l’onglet Propriétés, vous pouvez configurer un contrôle sans écrire de formule.By using the Properties tab, you can configure a control without writing a formula. Dans cette procédure, vous ajoutez et configurez un autre contrôle Label, mais vous pouvez appliquer un grand nombre de ces mêmes principes à d’autres contrôles.In this procedure, you'll add and configure another Label control, but you can apply many of the same principles to other controls.

  1. Ajoutez un autre contrôle Label comme décrit précédemment dans cette rubrique.Add another Label control as described earlier in this topic.
  2. Avec le nouveau contrôle sélectionné, cliquez ou appuyez sur l’onglet Propriétés dans le volet de droite.With the new control selected, click or tap the Properties tab in the right-hand pane.

    Volet Propriétés

  3. Dans la zone Texte, tapez Onglet Propriétés.In the Text box, type Properties tab.

    Texte de l’étiquette du volet Propriétés

    Le contrôle Label affiche le texte entré.The Label control shows the entered text.

    Texte de canevas du volet Propriétés

  4. Cliquez ou appuyez sur l’icône Fill (Remplir) dans le volet Propriétés, puis sur une couleur.Click or tap the Fill icon in the Properties panel, and then click or tap a color.

    Texte de couleur du volet Propriétés

    Le contrôle Label reflète votre sélection.The Label control reflects your selection.

    Couleur de canevas du volet Propriétés

  5. Cliquez ou appuyez sur la propriété Color dans le volet Propriétés.Click or tap the Color property in the properties panel.

    Propriété du volet Propriétés

    La valeur de la propriété Color est mise en surbrillance dans la barre de formule.The value of the Color property is highlighted in the formula bar.

    Expression de propriété du volet Propriétés

    1. Supprimez le second contrôle Label en cliquant ou en appuyant sur celui-ci, puis en appuyant sur Supprimer.Delete the second Label control by clicking or tapping it and then pressing Delete.

Configurer un contrôle dans la barre de formuleConfigure a control in the formula bar

À l’aide de la barre de formule, vous pouvez définir les propriétés que vous ne pouvez pas définir directement, sous l’onglet Propriétés ou à partir de la barre d’outils.By using the formula bar, you can set properties that you can't set directly, in the Properties tab, or from the toolbar. Par exemple, vous pouvez définir une info-bulle qui apparaît lorsqu’un utilisateur pointe sur le contrôle, sans cliquer ou appuyer dessus.For example, you can set a tooltip that appears when a user points to the control but doesn't click or tap it. Vous pouvez également spécifier des formules complexes qui augmentent la puissance de votre application.You can also specify complicated formulas that increase the power of your app.

Chaque modification apportée précédemment dans cette rubrique a mis à jour la valeur d’une propriété pour le contrôle que vous avez configuré.Each change that you made earlier in this topic updated the value of a property for the control that you configured.

  • Lorsque vous avez redimensionné le contrôle, vous avez modifié sa propriété Width.When you resized the control, you changed its Width property.
  • Lorsque vous avez déplacé le contrôle, vous avez modifié ses propriétés X et Y.When you moved the control, you changed its X and Y properties.
  • Lorsque vous avez modifié le texte affiché par le contrôle, vous avez modifié sa propriété Text.When you changed the text that the control displays, you changed its Text property.

Au lieu de configurer un contrôle directement, sous l’onglet Propriétés ou à partir de la barre d’outils, vous pouvez également mettre à jour la valeur d’une propriété en la sélectionnant dans la liste des propriétés et en spécifiant une valeur dans la barre de formule.Instead of configuring a control directly, in the Properties tab, or from the toolbar, you can also update the value of a property by selecting it in the property list and then specifying a value in the formula bar. En adoptant cette approche, vous pouvez rechercher une propriété par ordre alphabétique, et vous pouvez spécifier plusieurs types de valeurs.By taking this approach, you can search for a property alphabetically, and you can specify more types of values.

  1. Avec le contrôle Label restant sélectionné, cliquez ou appuyez sur Text dans la liste des propriétés, puis tapez "My Company Name" (avec les guillemets) dans la barre de formule.With the remaining Label control selected, click or tap Text in the property list, and then type "My Company Name" (including the quotation marks) in the formula bar.

    Une chaîne littérale dans une étiquette

    Lorsque vous mettez une chaîne de texte entre guillemets, vous spécifiez qu’elle doit être traitée exactement comme vous l’avez tapée.When you surround a string of text with quotation marks, you specify that it should be treated exactly as you typed it. Vous pouvez également définir la valeur d’une propriété sur une formule.As an alternative, you can set the value of a property to a formula.

  2. Avec le contrôle Label sélectionné, cliquez ou appuyez sur Text dans la liste de propriétés, puis tapez Today() (sans guillemets) dans la barre de formule.With the Label control selected, click or tap Text in the property list, and then type Today() (without quotation marks) in the formula bar.

    Le contrôle affiche la date du jour.The control shows the current date.

    Fonction Today

    Conseil : vous pouvez formater les dates et heures de différentes manières, en plus d’effectuer des calculs sur ces éléments.Tip: You can format dates and times in various ways, in addition to performing calculations on them.

Configurer deux contrôles pour qu’ils interagissent ensembleConfigure two controls to interact with each other

Dans cette procédure, vous ajoutez une case à cocher, puis vous configurez l’étiquette existante pour qu’elle apparaisse seulement quand la case est cochée.In this procedure, you'll add a check box and then configure the label that you already have to appear only when the check box is selected.

  1. Cliquez ou appuyez sur l’onglet Insérer.Click or tap the Insert tab.

    Onglet Insérer

  2. Cliquez ou appuyez sur Contrôles, puis cliquez ou appuyez sur Check box.Click or tap Controls, and then click or tap Check box.

    Insérer une case à cocher

  3. Déplacez le contrôle Check box afin qu’il apparaisse sous le contrôle Label et définissez la propriété Text du contrôle Check box afin que Afficher le texte apparaisse.Move the Check box control so that it appears below the Label control, and set the Text property of the Check box control so that Show text appears.

    Configurer la case à cocher

  4. Avec le contrôle Check box toujours sélectionné, cliquez ou appuyez sur son nom juste au-dessus de l’onglet Propriétés, puis tapez MyCheckbox.With the Check box control still selected, click or tap its name just above the Properties tab, and then type MyCheckbox

    Renommer la case à cocher

  5. Cliquez ou appuyez sur le contrôle Label pour le sélectionner.Click or tap the Label control to select it.
  6. Sous l’onglet Propriétés, cliquez ou appuyez sur la propriété Visible.On the Properties tab, click or tap the Visible property.

    Propriété Visible

  7. Dans la barre de formule, supprimez true, puis tapez ou collez la formule suivante :In the formula bar, delete true, and then type or paste this formula:

    If(MyCheckbox.Value = true, true, false)If(MyCheckbox.Value = true, true, false)

    Cette fonction If indique que l’étiquette doit apparaître seulement quand la case est cochée.This If function states that the label should appear only when the check box is selected. Étant donné que la case est décochée, le contrôle Label disparaît (à l’exception de la zone de sélection).Because the check box is cleared, the Label control disappears (except for the selection box).

    Formule Visible

  8. Cliquez ou appuyez sur le contrôle Check box pour y ajouter la zone de sélection, puis cliquez ou appuyez dessus une nouvelle fois pour ajouter une coche.Click or tap the Check box control to add the selection box to it, and then click or tap it again to add a check mark.

    L’étiquette réapparaît :The Label reappears:

    L’étiquette apparaît quand la case est cochée

  9. Effacez le contrôle Check box pour masquer le contrôle Label.Clear the Check box control to hide the Label control.

    L’étiquette disparaît quand la case est décochée

Cet exemple est basique, mais vous pouvez configurer le comportement et l’apparence de votre application en générant une ou plusieurs formules, simples ou complexes.This example is basic, but you can configure the behavior and appearance of your app by building one or more formulas from simple to complex.

Renommer un écran ou un contrôleRename a screen or a control

En renommant un écran ou un contrôle, vous pouvez créer des formules qui sont plus faciles à lire et à gérer.By renaming a screen or control, you can build formulas that are easier to read and maintain.

  1. Cliquez ou appuyez sur l’écran ou le contrôle que vous souhaitez renommer.Click or tap the screen or the control that you want to rename.
  2. Dans le volet de droite, cliquez ou appuyez sur le nom du contrôle (juste au-dessus de l’onglet Propriétés), puis tapez le nom de votre choix.In the right-hand pane, click or tap the name of the control (just above the Properties tab), and then type the name that you want.

    Renommer la case à cocher

Rechercher et sélectionner un écran ou un contrôleFind and select a screen or a control

Vous pouvez rechercher et sélectionner un écran ou un contrôle, même s’il est masqué ou présente un chevauchement avec un autre contrôle, en le recherchant dans le volet de gauche.You can find and select a screen or a control, even if it's hidden or overlaps with another control, by searching for it in the left-hand pane. Ce volet affiche soit une miniature de chaque écran dans l’application, soit une vue hiérarchique de chaque écran et des contrôles qu’il contient.This pane shows either a thumbnail of each screen in the app or a hierarchical view of each screen and the controls that it contains.

  • Pour basculer entre les miniatures et la vue hiérarchique, cliquez ou appuyez sur une icône dans l’angle supérieur droit du volet.To switch between the thumbnails and the hierarchical view, click or tap an icon in the upper-right corner of the pane.

    Activer/désactiver les vues

  • Pour rechercher un contrôle, tapez un ou plusieurs caractères pour mettre en surbrillance les noms des contrôles contenant le texte tapé.To find a control, type one or more characters to highlight the control names that contain the text that you typed.

    En cliquant ou appuyant sur un résultat de recherche, vous sélectionnez ce contrôle dans l’application.If you click or tap a search result, you select that control in the app.

    Effectuer une recherche dans l’arborescence

  • Pour déplacer un écran vers le haut ou vers le bas, le dupliquer, le supprimer ou le renommer, cliquez dessus avec le bouton droit (ou cliquez ou appuyez sur les points de suspension situés en regard), puis cliquez ou appuyez sur l’option souhaitée.To move a screen up or down, duplicate it, delete it, or rename it, right-click it (or click or tap the ellipsis next to it), and then click or tap the option that you want.

    Menu contextuel de l’arborescence

  • Pour copier/coller un contrôle, le supprimer ou le renommer, cliquez dessus avec le bouton droit (ou cliquez ou appuyez sur les points de suspension situés en regard), puis cliquez ou appuyez sur l’option souhaitée.To copy/paste a control, delete it, or rename it, right-click it (or click or tap the ellipsis next to it), and then click or tap the option that you want.