PowerApps - Personnaliser l’affichage des données Tutoriels

  • 00:04:40
  • 1 vues
résultat(s)
00:00:05
nous allons voir
00:00:06
comment améliorer l'affichage des données
00:00:09
et affiner la personnalisation des contrôles pour une présentation optimisée.
00:00:15
En passant en mode édition,
00:00:17
vous pouvez désormais personnaliser l'affichage de la galerie.
00:00:21
Nous insérons d'abord un contrôle de type label
00:00:24
qui affichera le texte extrait des données.
00:00:28
Ce contrôle dont la police peut être modifiée selon la taille,
00:00:32
la famille
00:00:33
ou la couleur désirée,
00:00:34
doit occuper l'espace disponible sans être tronqué.
00:00:38
Ainsi,
00:00:38
la propriété
00:00:40
huit
00:00:41
du label
00:00:42
est définie par la formule suivante.
00:00:45
cette formule calcule l'espace restant
00:00:47
en soustrayant la position horizontale actuelle du contrôle self X
00:00:53
à la largeur totale de l'élément par an par point template huit
00:00:58
par exemple,
00:00:58
si l'espace total fait 300 pixels et que le label commence à 50 pixels du bord,
00:01:04
alors le label s'étendra sur 250 pixels.
00:01:11
Pour améliorer encore l'interface,
00:01:13
un contrôle de type rectangle est inséré à côté du label
00:01:17
afin de représenter visuellement
00:01:19
le statut de la tâche grâce à une couleur dynamique.
00:01:24
La propriété fi du rectangle
00:01:26
est configurée à l'aide de la fonction switch avec la formule suivante.
00:01:32
Cette formule vérifie la valeur actuelle de l'élément
00:01:36
et selon le cas,
00:01:37
par exemple en cours ou terminé,
00:01:39
attribue une couleur spécifique au rectangle,
00:01:43
créant ainsi un indicateur visuel intuitif
00:01:46
pour distinguer l'état de chaque tâche.
00:01:49
Pour optimiser l'affichage,
00:01:51
une seconde galerie vide est ajoutée à l'intérieur de la galerie horizontale,
00:01:56
en veillant à ce qu'elle ne recouvre pas les textes situés en haut.
00:02:02
Sa largeur est définie par la formule pare en point template width,
00:02:06
assurant qu'elle s'adapte à la structure du modèle,
00:02:09
tandis que sa hauteur est ajustée avec la
00:02:11
formule par empoint height moins selfie grec,
00:02:15
qui prend en compte sa position verticale pour une intégration harmonieuse.
00:02:20
Cette approche a déjà été utilisée pour définir
00:02:22
la largeur du label de texte situé au-dessus.
00:02:27
La propriété
00:02:28
Day item loading
00:02:29
est de nouveau fixée sur
00:02:32
false
00:02:33
afin que tous les éléments se chargent immédiatement.
00:02:37
La propriété
00:02:38
items de cette galerie verticale est définie avec la formule suivante.
00:02:44
Cette formule filtre la liste
00:02:47
tâches
00:02:48
afin de ne conserver que les tâches dont le statut correspond
00:02:51
à la valeur de l'élément sélectionné dans la galerie horizontale.
00:02:55
Ainsi,
00:02:55
seules les tâches pertinentes pour le statut choisi seront affichées,
00:03:00
créant ainsi une relation dynamique entre les galeries.
00:03:05
Pour fournir des informations sur la priorité de chaque tâche,
00:03:08
un contrôle label est ajouté dans la galerie verticale.
00:03:14
Sa formule item point priorité point value
00:03:18
affiche directement la valeur de la priorité.
00:03:22
Afin d'améliorer la lisibilité,
00:03:24
la couleur du texte de ce label est modifiée en fonction de
00:03:27
la priorité grâce à la fonction switch avec la formule suivante.
00:03:32
Cette fonction assigne une couleur spécifique pour chaque niveau de priorité,
00:03:37
par exemple rouge pour haute
00:03:39
ou bleue pour élever,
00:03:41
facilitant ainsi la lecture et la reconnaissance
00:03:43
visuelle de l'importance de chaque tâche.
00:03:47
Il est également possible d'ajouter d'autres contrôles supplémentaires
00:03:51
dans les galeries pour afficher d'autres informations
00:03:55
en les liant aux données via
00:03:57
this item.
00:03:58
Ce deuxième volet du tutoriel vous a guidé à travers
00:04:01
l'affichage avancé des données dans une galerie Power Ups.
00:04:05
Vous avez découvert comment
00:04:07
ajuster
00:04:08
dynamiquement
00:04:09
la largeur du texte,
00:04:11
comment utiliser des rectangles colorés pour indiquer visuellement le statut
00:04:16
et comment imbriquer
00:04:17
des galeries pour filtrer
00:04:19
et détailler les informations.
00:04:21
En combinant ces techniques,
00:04:23
vous pouvez rendre votre application plus intuitive,
00:04:26
esthétique
00:04:28
et réactive.
00:04:29
Dans le prochain tutoriel,
00:04:30
nous aborderons la création et la gestion des formulaires.
00:04:34
étape essentielle
00:04:36
pour enrichir l'interaction avec vos données.

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

Abonnés
1 vues

Formation Vidéo Microsoft PowerApps - Concevez des expériences utilisateur dynamiques et engageantes

Renforcez votre maîtrise de Power Apps grâce à ce module intermédiaire. Apprenez à structurer des interfaces responsives, à améliorer la vis...

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