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 !

04:39
78 vues

Disponible dans Microsoft365

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.

Mandarine AI: CE QUI POURRAIT VOUS INTÉRESSER

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

Abonnés

80 vues

E-learning Avancé

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

Cours E-learning

TOUS LES COURS