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. Ces éléments d’interface utilisateur sont appelés contrôles, et les aspects que vous configurez sont appelés propriétés.

Conditions préalables

  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.

  2. Dans PowerApps Studio, cliquez ou appuyez sur Nouveau dans le menu Fichier (près du bord gauche).

    Option Nouveau du menu Fichier

  3. Sur la mosaïque Application vide, cliquez ou appuyez sur Mode téléphone.

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

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

Ajouter un contrôle

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

  • Sous l’onglet Insertion, cliquez ou appuyez sur l’une de ces catégories, puis sur le contrôle que vous souhaitez ajouter :

    Texte : Label, Text input, HTML Text, Pen input
    Contrôles: 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 height
    Data table
    Formulaires : Edit, Display, Entity form
    Éléments multimédias : Image, Camera, Barcode, Video, Audio, Microphone, Add picture
    Graphiques : Column chart, Line chart, Pie chart
    Icônes

Conseil : si vous avez besoin de davantage d’espace pour les contrôles, ajoutez un écran.

Configurer un contrôle directement

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.

  1. Cliquez ou appuyez sur l’onglet Insertion, puis sur Label.

    Onglet Insérer

    Lorsque vous ajoutez un contrôle, il est sélectionné par défaut. Vous pouvez également sélectionner un contrôle existant en cliquant ou en appuyant sur celui-ci. 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é. Par exemple, un contrôle Label sélectionné ressemble à ceci.

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

  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. (La poignée du milieu apparaît uniquement si vous effectuez un zoom.)

    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.

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

  4. Cliquez trois fois sur le texte qui apparaît dans le contrôle Label, puis tapez 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.

Configurer un contrôle à partir de la barre d’outils

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.

  1. Avec le contrôle Label sélectionné, cliquez ou appuyez sur l’onglet Accueil de la barre d’outils.

    Onglet Accueil

  2. Cliquez ou appuyez sur Fill, puis cliquez ou appuyez sur une couleur comme aigue-marine.

    Option de remplissage

    Le contrôle Label reflète votre sélection.

    Une étiquette avec remplissage aigue-marine

  3. Modifiez la famille de polices et la taille du texte (par exemple, remplacez-les par 18 pt. Georgia).

    Contrôles de police

    Le contrôle Label reflète votre sélection.

    18 points Georgia

  4. Cliquez ou appuyez sur l’onglet Label, cliquez ou appuyez sur AlignementVertical, puis cliquez ou appuyez sur Haut.

    Onglet Zone de texte

    Le contrôle Label reflète votre sélection.

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

Configurer un contrôle à partir de l’onglet Propriétés

Sous l’onglet Propriétés, vous pouvez configurer un contrôle sans écrire de formule. 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.

  1. Ajoutez un autre contrôle Label comme décrit précédemment dans cette rubrique.

  2. Avec le nouveau contrôle sélectionné, cliquez ou appuyez sur l’onglet Propriétés dans le volet de droite.

    Volet Propriétés

  3. Dans la zone Texte, tapez Onglet Propriétés.

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

    Le contrôle Label affiche le texte entré.

    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.

    Texte de couleur du volet Propriétés

    Le contrôle Label reflète votre sélection.

    Couleur de canevas du volet Propriétés

  5. Cliquez ou appuyez sur la propriété Color dans le volet Propriétés.

    Propriété du volet Propriétés

    La valeur de la propriété Color est mise en surbrillance dans la barre de formule.

    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.

Configurer un contrôle dans la barre de formule

À 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. 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. Vous pouvez également spécifier des formules complexes qui augmentent la puissance de votre application.

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

  • Lorsque vous avez redimensionné le contrôle, vous avez modifié sa propriété Width.
  • Lorsque vous avez déplacé le contrôle, vous avez modifié ses propriétés X et Y.
  • Lorsque vous avez modifié le texte affiché par le contrôle, vous avez modifié sa propriété Text.

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. En adoptant cette approche, vous pouvez rechercher une propriété par ordre alphabétique, et vous pouvez spécifier plusieurs types de valeurs.

  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.

    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. Vous pouvez également définir la valeur d’une propriété sur une formule.

  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.

    Le contrôle affiche la date du jour.

    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.

Configurer deux contrôles pour qu’ils interagissent ensemble

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.

  1. Cliquez ou appuyez sur l’onglet Insérer.

    Onglet Insérer

  2. Cliquez ou appuyez sur Contrôles, puis cliquez ou appuyez sur 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.

    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.

    Renommer la case à cocher

  5. Cliquez ou appuyez sur le contrôle Label pour le sélectionner.

  6. Sous l’onglet Propriétés, cliquez ou appuyez sur la propriété Visible.

    Propriété Visible

  7. Dans la barre de formule, supprimez true, puis tapez ou collez la formule suivante :

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

    Cette fonction If indique que l’étiquette doit apparaître seulement quand la case est cochée. Étant donné que la case est décochée, le contrôle Label disparaît (à l’exception de la zone de sélection).

    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.

    L’étiquette réapparaît :

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

  9. Effacez le contrôle Check box pour masquer le contrôle Label.

    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.

Renommer un écran ou un contrôle

En renommant un écran ou un contrôle, vous pouvez créer des formules qui sont plus faciles à lire et à gérer.

  1. Cliquez ou appuyez sur l’écran ou le contrôle que vous souhaitez renommer.

  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.

    Renommer la case à cocher

Rechercher et sélectionner un écran ou un contrôle

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

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

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

    En cliquant ou appuyant sur un résultat de recherche, vous sélectionnez ce contrôle dans l’application.

    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.

    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.