PowerApps - Palette de Couleurs Dynamique avec Formules Nommées Tutoriels

Découvrez comment maîtriser l'apparence de vos applications PowerApps grâce à une palette de couleurs dynamique avec des formules nommées. Ce tutoriel vous guide pour centraliser vos couleurs, harmoniser l'interface, et faciliter les mises à jour. Transformez votre application en un clin d'œil et unifiez son design avec efficacité. Ne ratez pas cette astuce incontournable !

Connectez-vous pour donner votre avis sur cette vidéo !
Me connecter

Objectifs :

L'objectif de cette vidéo est d'apprendre à créer une palette de couleurs dynamique dans Power Ups, en utilisant des formules nommées pour centraliser la gestion des couleurs et harmoniser l'apparence d'une application. Cela permet de garantir une bonne expérience utilisateur et de faciliter les mises à jour futures.

Chapitres :

  1. Introduction à l'importance de l'apparence visuelle
    Dans Power Ups, l'apparence visuelle d'une application joue un rôle essentiel pour garantir une bonne expérience utilisateur. Elle renforce la cohérence graphique et s'adapte aux standards de l'entreprise. Grâce aux formules nommées, il est possible de centraliser la gestion des couleurs, assurant ainsi une harmonisation parfaite et facilitant les mises à jour futures.
  2. Création d'une palette de couleurs dynamique
    Dans ce tutoriel, nous allons apprendre à créer une palette de couleurs dynamique avec des formules nommées. Nous utiliserons cette palette pour styliser différents éléments de l'interface de manière simple et évolutive. L'utilisation de couleurs centralisées permet d'unifier visuellement toute l'application en suivant un thème principal, souvent dicté par une charte graphique d'entreprise.
  3. Définition de la formule nommée
    Pour définir la formule nommée, sélectionnez l'objet de l'application dans l'arborescence. Accédez à la section des propriétés et saisissez la formule suivante : chaque propriété correspond à un usage particulier, comme la couleur principale, secondaire, d'accentuation, de fond et de texte. Le nom 'FXpalette' est proposé à titre d'exemple, mais vous pouvez choisir une autre dénomination. Chaque élément est séparé par un point-virgule et la formule est terminée par deux point-virgules.
  4. Application de la palette aux éléments visuels
    Une fois la formule nommée FXpalette définie, il est temps de l'appliquer concrètement à vos éléments visuels. Pour commencer, insérez un bouton sur l'écran via le menu 'insérer', puis sélectionnez-le. Accédez à la propriété 'fil' qui correspond à la couleur de fond du bouton et remplacez la valeur par défaut par 'fxpalette.point.primaire'. Le bouton adoptera alors la couleur principale définie dans votre palette.
  5. Personnalisation du texte et du fond
    Ajoutons une étiquette pour afficher un texte. Une fois inséré, sélectionnez ce contrôle et accédez à la propriété 'couleur' qui détermine la couleur du texte. Écrivez la formule 'FXpalette.point.texte' pour que le texte s'affiche avec la couleur prévue pour les éléments textuels de l'application. Pour personnaliser le fond de l'écran, cliquez sur un espace vide de l'application pour sélectionner l'écran principal, puis remplacez la valeur existante par 'FXpalette.point.fond'.
  6. Création d'un bouton secondaire
    Vous pouvez également créer un bouton secondaire qui utilise une couleur différente de celle du bouton principal. Insérez un nouveau bouton ou dupliquez celui que vous avez déjà stylisé. Dans la propriété 'fil', indiquez la valeur 'FXpalette.point.secondaire' pour appliquer une teinte secondaire. Dans la propriété 'couleur', inscrivez de nouveau 'FXpalette.point.texte' pour que le texte reste cohérent avec le reste de votre interface.
  7. Avantages de la centralisation des couleurs
    Grâce à cette méthode, tous les éléments visuels de votre application adoptent automatiquement les couleurs définies dans la formule nommée. Cela vous permet de centraliser la gestion de votre charte graphique. Si vous décidez un jour de modifier une couleur dans FXpalette, tous les composants liés se mettront à jour instantanément, sans que vous ayez à parcourir manuellement l'application pour ajuster chaque élément un par un. C'est une approche à la fois propre, cohérente et évolutive.

FAQ :

Pourquoi est-il important d'avoir une bonne apparence visuelle dans une application?

Une bonne apparence visuelle améliore l'expérience utilisateur, renforce la cohérence graphique et aide à respecter les standards de l'entreprise.

Qu'est-ce qu'une palette de couleurs dynamique?

Une palette de couleurs dynamique permet de centraliser la gestion des couleurs, facilitant ainsi les mises à jour et garantissant une uniformité visuelle dans l'application.

Comment appliquer une palette de couleurs à des éléments visuels?

Pour appliquer une palette de couleurs, vous devez utiliser des formules nommées dans les propriétés des éléments, comme 'fxpalette.point.primaire' pour la couleur principale.

Quels sont les avantages d'utiliser des formules nommées pour la gestion des couleurs?

Les formules nommées permettent de centraliser la gestion des couleurs, ce qui signifie que toute modification apportée à la palette se répercutera automatiquement sur tous les éléments liés, simplifiant ainsi les mises à jour.

Comment puis-je changer une couleur dans ma palette sans affecter chaque élément individuellement?

En modifiant la couleur dans la formule nommée de la palette, tous les éléments qui utilisent cette couleur se mettront à jour automatiquement, évitant ainsi de devoir ajuster chaque élément manuellement.

Quelques cas d'usages :

Création d'une application d'entreprise

Lors de la création d'une application pour une entreprise, l'utilisation d'une palette de couleurs dynamique permet de garantir que tous les éléments respectent la charte graphique de l'entreprise, facilitant ainsi la cohérence visuelle.

Mise à jour de l'interface utilisateur

Lorsque des modifications de design sont nécessaires, une palette de couleurs centralisée permet de changer rapidement les couleurs de l'ensemble de l'application sans avoir à modifier chaque élément individuellement.

Développement d'une application mobile

Dans le développement d'une application mobile, l'utilisation de formules nommées pour les couleurs permet de s'assurer que l'application est visuellement cohérente sur différents appareils et résolutions.

Personnalisation d'une application pour un événement

Pour un événement spécial, une palette de couleurs peut être rapidement ajustée pour refléter le thème de l'événement, et tous les éléments de l'application se mettront à jour automatiquement.

Amélioration de l'accessibilité

En utilisant des couleurs bien définies et contrastées dans une palette, une application peut être rendue plus accessible aux utilisateurs ayant des déficiences visuelles, tout en maintenant une apparence esthétique.

Glossaire :

Apparence visuelle

L'aspect esthétique d'une application, incluant les couleurs, les polices et la mise en page, qui influence l'expérience utilisateur.

Expérience utilisateur

La perception globale d'un utilisateur lors de l'interaction avec une application, influencée par la facilité d'utilisation et l'esthétique.

Cohérence graphique

L'uniformité des éléments visuels d'une application, garantissant que tous les composants respectent un même style et une même charte graphique.

Formules nommées

Des formules dans un logiciel qui permettent de centraliser et de gérer des valeurs, comme des couleurs, à partir d'un seul endroit.

Palette de couleurs

Un ensemble de couleurs définies qui peuvent être utilisées de manière cohérente dans une application.

Couleur primaire

La couleur principale utilisée dans une application, souvent celle qui attire le plus l'attention.

Couleur secondaire

Une couleur utilisée pour compléter la couleur primaire, souvent pour des éléments moins dominants.

Couleur d'accentuation

Une couleur utilisée pour mettre en valeur certains éléments d'une application.

Couleur de fond

La couleur qui remplit l'arrière-plan d'une application ou d'un élément.

Couleur de texte

La couleur utilisée pour le texte affiché dans l'application.

RGBA

Un format de couleur qui inclut les valeurs de rouge, vert, bleu et alpha (transparence).

0 sur 5
( 0 avis )
5 (0)
4 (0)
3 (0)
2 (0)
1 (0)
résultat(s)
00:00:04
l'apparence visuelle d'une application joue un rôle essentiel
00:00:08
pour garantir une bonne expérience utilisateur,
00:00:12
renforcer la cohérence graphique
00:00:14
et s'adapter aux standards de l'entreprise.
00:00:17
Grâce aux formules nommées,
00:00:19
il est possible de centraliser la gestion des couleurs dans un seul endroit,
00:00:23
assurant ainsi une harmonisation parfaite
00:00:26
et facilitant grandement les mises à jour
00:00:29
futures.
00:00:30
Dans ce tutoriel,
00:00:32
nous allons apprendre à créer une palette
00:00:34
de couleurs dynamique avec des formules nommées.
00:00:37
Nous utiliserons cette palette pour styliser différents éléments de l'interface
00:00:42
de manière simple et évolutive.
00:00:45
Utiliser des couleurs centralisées
00:00:47
permet d'unifier visuellement toute l'application
00:00:50
en suivant un thème principal,
00:00:52
souvent dicté par une charte graphique d'entreprise.
00:00:55
Cela permet également d'assurer
00:00:57
que toutes les modifications futures
00:00:59
se fassent en un seul changement de formule,
00:01:02
sans devoir passer manuellement sur chaque écran ou composant.
00:01:06
Dans l'arborescence de l'application,
00:01:08
sélectionnez l'objet app,
00:01:10
puis dans ses propriétés,
00:01:11
accédez à la section
00:01:13
formulace.
00:01:14
Saisissez la formule suivante.
00:01:17
chaque propriété correspond à un usage particulier.
00:01:21
La couleur principale,
00:01:23
secondaire,
00:01:24
d'accentuation
00:01:25
de fond
00:01:26
et de texte.
00:01:27
Le nom FXpalette est proposé à titre d'exemple.
00:01:31
Vous pouvez choisir une autre dénomination
00:01:34
en version française de Power Ups.
00:01:36
Chaque élément est séparé par un point virgule
00:01:39
et la formule est terminée par deux point virgule.
00:01:43
Toutes vos couleurs seront ainsi centralisées
00:01:45
et facilement réutilisables dans toute l'application.
00:01:50
Maintenant que la formule nommée FX palette a
00:01:53
été définie avec les différentes couleurs de l'interface,
00:01:57
il est temps
00:01:57
de l'appliquer concrètement
00:01:59
à vos éléments visuels.
00:02:01
Cette étape permet d'harmoniser l'apparence de votre application
00:02:06
tout en facilitant les modifications futures.
00:02:09
Voici comment procéder.
00:02:11
Pour commencer,
00:02:12
insérez un bouton sur l'écran en passant par le menu insérer
00:02:17
puis bouton.
00:02:18
une fois le bouton ajouté,
00:02:20
sélectionnez le et accédez à la propriété fil
00:02:23
qui correspond à la couleur de fond du bouton
00:02:26
dans la barre de formule située en haut de l'éditeur,
00:02:29
remplacez la valeur par défaut,
00:02:32
souvent un code RGBA
00:02:34
par fxpalette point primaire.
00:02:37
Vous constaterez immédiatement que le bouton adopte
00:02:39
la couleur principale définie dans votre palette.
00:02:43
Ensuite,
00:02:44
ajoutons un étiquette afin d'afficher un texte.
00:02:48
Une fois inséré,
00:02:49
sélectionnez ce contrôle
00:02:51
et accéder
00:02:52
à la propriété colore
00:02:54
qui détermine la couleur du texte.
00:02:57
Écrivez la formule FX
00:02:59
palette point texte.
00:03:01
Le texte s'affiche désormais avec la couleur
00:03:03
prévue pour les éléments textuels de l'application.
00:03:08
Poursuivons avec la personnalisation du fond de l'écran.
00:03:12
cliquer sur un espace vide de l'application pour sélectionner l'écran principal.
00:03:18
Une fois sélectionnée,
00:03:19
ouvrez la propriété fil dans la barre supérieure,
00:03:22
puis remplacez la valeur existante par FX palette point fond.
00:03:26
L'arrière-plan de votre application prendra alors automatiquement la
00:03:30
couleur de fond définie dans votre palette.
00:03:34
Enfin,
00:03:35
vous pouvez également créer un bouton secondaire
00:03:37
qui utilise une couleur différente de celle du bouton principal.
00:03:42
Pour cela,
00:03:42
insérer un nouveau bouton ou dupliquer celui que vous avez déjà stylisé.
00:03:48
dans la propriété fil,
00:03:50
indiquez la valeur FXpalette point secondaire afin
00:03:53
de lui appliquer une teinte secondaire.
00:03:55
Puis dans la propriété colore,
00:03:58
inscrivez de nouveau FXpalette point texte
00:04:01
pour que le texte reste cohérent
00:04:03
avec le reste de votre interface.
00:04:06
Grâce à cette méthode,
00:04:07
l'ensemble des éléments visuels de votre application
00:04:11
adopte automatiquement les couleurs définies dans la formule nommée.
00:04:15
Cela vous permet de centraliser la gestion de votre charte graphique.
00:04:19
si vous décidez un jour de modifier une couleur
00:04:22
dans FXpalette,
00:04:24
tous les composants liés se mettront à jour instantanément
00:04:27
sans que vous ayez à parcourir manuellement l'application
00:04:31
pour ajuster chaque élément un par un.
00:04:33
C'est une approche à la fois propre,
00:04:35
cohérente et évolutive.

Il n’existe aucun élément correspondant à votre recherche dans cette vidéo...
Effectuez une autre recherche ou retournez au contenu !

 

Mandarine AI: CE QUI POURRAIT VOUS INTÉRESSER

LES COURS ASSOCIÉS Ce tutoriel fait partie des cours suivants

E-learning Avancé
Vu 469 fois
Abonnés
PowerApps : Approfondir les fonctionnalités avancées avec variables, formules nommées et automatisation

Découvrez des fonctionnalités avancées de Power Apps pour développer des applications encore plus puissantes, dynamiques et maintenables. Ce module vous guide pas à pas dans l’utilisation des variables, des formules nommées, de la fonction Patch et de l’intégration avec Outlook pour envoyer des emails automatiquement.

Cours E-learning
TOUS LES COURS

Une erreur est survenue

Impossible de sauvegarder votre progression. Veuillez recharger la page, vous connecter, et essayer de nouveau. Si le problème persiste, merci de contacter un administrateur.

Fermer

Rappel

Afficher

/

Acceder à la session