Icônes

Effectué

La plupart des applications comprennent des icônes faciles à comprendre telles que l’icône « Enregistrer » représentant une disquette ou la flèche de retour « Précédent ». L’avantage de l’utilisation d’une icône par rapport à un libellé ou à un bouton est que l’icône ne nécessite aucun texte et qu’elle peut généralement s’adapter à des emplacements où le texte ne rentre tout simplement pas.

Power Apps comprend le contrôle Icône et fournit de nombreuses icônes prêtes à l’emploi que vous pouvez utiliser dans toute votre application. Puisque les icônes sont des contrôles, elles ont toutes des propriétés personnalisables, notamment OnSelect et Color. Vous pouvez insérer une icône dans votre application en cliquant sur le bouton Insérer de la barre de commandes. Si vous développez le champ Icônes, vous pouvez parcourir la liste complète des icônes disponibles.

Capture d’écran de la liste des icônes.

Ajout d’une icône

Si vous avez développé notre application Cafetières Contoso, vous avez déjà essayé un peu le contrôle Icône. (Nous avons remplacé une flèche droite par un crayon d’édition.) Si vous souhaitez nous suivre, nous allons ajouter quelques icônes à l’aide de notre application Cafetières Contoso. Si vous ne disposez pas de cette application, vous pouvez ouvrir toute application et nous suivre.

  1. Ouvrez l’application Cafetières Contoso et sélectionnez l’écran « Catalog Screen ».

  2. Insérez une icône « Flèche retour » en cliquant sur Insérer dans la barre de commandes. Vous pouvez la rechercher en développant l’option Icônes ou simplement en saisissant « retour » dans le champ de recherche Insérer.

    Remarque

    Lorsque vous insérez la nouvelle icône, elle récupère la palette de couleurs de Thème sélectionnée.

  3. Repositionnez votre nouvelle icône Flèche retour dans le coin supérieur gauche de votre rectangle d’en-tête.

  4. Redéfinissez la couleur de la Flèche retour sur blanc en cliquant sur le bouton Couleur dans la barre de commandes et en sélectionnant le cercle blanc sous Couleurs standard dans le coin inférieur gauche de la zone d’options.

  5. Ensuite, redéfinissez la propriété OnSelect sur Back().

  6. Ensuite, en utilisant votre icône Flèche retour comme modèle, copiez-collez-la sur votre écran « Admin Screen ». Ainsi, vous pouvez éviter d’ajuster les propriétés Color et OnSelect.

Modification d’une icône

Vous vous souvenez peut-être que nous pouvons changer le type d’icône en modifiant la propriété Icon du contrôle Icône. Nous le ferons ensuite, en créant une icône d’écran d’accueil.

  1. Copiez-collez une autre icône Flèche retour sur votre écran « Admin Screen ».

  2. Placez-la dans le coin supérieur droit de votre rectangle d’en-tête.

  3. Notez que vous disposez d’un bouton de propriété Icône dans la barre de commandes : cliquez dessus et recherchez/sélectionnez l’icône Accueil. (Vous pouvez saisir « accueil » dans le champ de recherche pour vous aider.) Notez que la Flèche retour se transforme immédiatement en icône Accueil. Vous pouvez le faire avec toute icône Power Apps.

  4. Enfin, modifions la propriété OnSelect pour revenir à notre écran « Home Screen » en saisissant :

    Navigate('Home Screen')

Même si notre application ne dispose que de trois écrans, vous pouvez voir l’utilité d’une icône Accueil en tant que contrôle sélectionnable dans une application à plusieurs écrans, où une Flèche retour cliquable ne nous redirigerait pas nécessairement vers l’écran d’accueil de l’application.

Les icônes sont un contrôle simple vous permettant d’améliorer l’interface utilisateur de votre application. Nous allons en savoir plus sur le contrôle Image dans l’unité suivante.