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

  • Texte

    Options de la catégorie Texte

    Conseil : écrivez ou dessinez à l’aide de la saisie effectuée via le stylet.

  • Contrôles

    Options de la catégorie Contrôles

    Conseil : permettez aux utilisateurs de votre application de choisir en ajoutant une zone de liste, une liste déroulante ou des boutons radio.

  • Galerie

    Options de la catégorie Galerie

    Conseil : affichez une liste des enregistrements à partir d’un tableau à l’aide d’une galerie.

  • Formulaires

    Options de la catégorie Formulaires

    Conseil : affichez ou modifiez un enregistrement en utilisant un formulaire.

  • Éléments multimédias

    Options de la catégorie Éléments multimédias

    Conseil : affichez les données autres que du texte en ajoutant des données multimédias à votre application.

  • Graphiques

    Histogramme, graphique en courbes, graphique en secteurs

    Conseil : configurez un graphique pour présenter des données critiques.

  • Icônes

    Cette catégorie contient diverses formes, icônes d’action et icônes de symbole. Faites défiler la liste pour passer en revue toutes les options.

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. Dans la barre d’outils, cliquez ou appuyez sur l’onglet Insérer, 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.

  5. Supprimez le contrôle Label en cliquant ou en appuyant sur celui-ci, puis en appuyant sur Supprimer.

  6. Restaurez le contrôle Label en appuyant sur Ctrl+Z (ou en répétant les quatre premières étapes de cette procédure).

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 si vous le configuriez 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 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 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 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 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 zone de texte sélectionné, cliquez ou appuyez sur l’onglet Accueil.

    Renommer la case à cocher

  5. Cliquez ou appuyez sur le nom actuel du contrôle Check box (à droite de New screen), puis tapez MyCheckbox.

    Renommer la case à cocher

  6. Cliquez ou appuyez sur le contrôle Label pour le sélectionner, cliquez ou appuyez sur l’onglet Label, puis cliquez ou appuyez sur l’option 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 l’onglet Accueil, cliquez ou appuyez sur le nom du contrôle (à droite de New screen), puis tapez le nom que vous souhaitez.

    Renommer une case à cocher