PowerApps - Structurer votre mise en page Tutoriels

00:04:47
1 vues

Disponible dans Microsoft365

00:00:01

nous allons apprendre à structurer une application

00:00:04

en utilisant des conteneurs

00:00:06

afin d'assurer une mise en page dynamique et adaptable.

00:00:09

Pour débuter,

00:00:10

il est essentiel de créer un conteneur principal.

00:00:13

Le conteneur principal peut permettre à une

00:00:16

application power Us de s'adapter à différents écrans

00:00:19

parce qu'il agit comme une structure flexible qui ajuste

00:00:22

automatiquement la taille et l'agencement des éléments qu'il contient.

00:00:27

En définissant ses dimensions en fonction de son élément par an qui est l'écran,

00:00:32

il garantit que l'application occupe toujours tout l'espace disponible

00:00:36

sans nécessité d'ajustement manuel.

00:00:38

Prenons l'exemple d'une application divisée en trois sections distinctes,

00:00:43

le menu,

00:00:44

l'entête et les données.

00:00:46

Si nous utilisons un conteneur vertical,

00:00:49

l'entête et les données seront correctement organisées,

00:00:52

mais la barre des menus sera coupée.

00:00:54

Ainsi,

00:00:55

le conteneur vertical ne sera pas adapté à notre besoin.

00:00:58

En revanche,

00:00:59

un conteneur horizontal

00:01:01

permet d'intégrer ces éléments de manière fluide et cohérente.

00:01:06

Une fois ce conteneur inséré,

00:01:09

nous allons utiliser le panneau des

00:01:10

propriétés pour définir certains paramètres essentiels.

00:01:15

Tout d'abord,

00:01:16

il est recommandé

00:01:17

de fixer les coordonnées X

00:01:20

et y à zéro

00:01:21

afin qu'ils s'alignent parfaitement avec le

00:01:23

coin supérieur gauche de l'écran principal.

00:01:26

Ensuite,

00:01:27

la largeur et la hauteur doivent

00:01:29

correspondre aux dimensions de l'écran principal.

00:01:32

Pour cela,

00:01:32

il suffit d'utiliser la fonction parent.

00:01:35

huit

00:01:36

pour la largeur et parent point height pour la hauteur dans la barre de formule.

00:01:40

Cette méthode garantit que le conteneur principal

00:01:43

s'adapte automatiquement aux dimensions de l'écran,

00:01:47

sans nécessité d'ajustement manuel.

00:01:50

Une fois le conteneur principal configuré,

00:01:52

il est nécessaire d'ajouter les

00:01:54

sous-conteneurs qui structureront l'application.

00:01:57

Deux conteneurs sont indispensables,

00:02:00

l'un dédié à la barre de menu et l'autre contenant l'en tête ainsi que les données.

00:02:04

Avant de les insérer,

00:02:06

il faut s'assurer que le conteneur principal est bien sélectionné,

00:02:10

car ces éléments doivent être placés à l'intérieur de celui-ci.

00:02:13

Le choix de l'orientation des sous-conteneurs

00:02:16

repose sur la disposition des éléments

00:02:18

à l'intérieur de l'application.

00:02:20

Comme le menu est structuré de manière verticale,

00:02:23

il est préférable d'utiliser un conteneur vertical pour l'accueillir.

00:02:28

De même,

00:02:29

l'entête et les données étant organisées en colonne,

00:02:32

un conteneur vertical est également idéal

00:02:36

pour cette partie.

00:02:37

Par défaut,

00:02:38

ces deux conteneurs ont des tailles équivalentes,

00:02:41

mais il est possible de personnaliser leurs

00:02:43

dimensions pour mieux correspondre à l'agencement désiré.

00:02:47

Dans le cas du menu,

00:02:48

la largeur flexible doit être désactivée

00:02:51

afin de définir une taille fixe,

00:02:54

par exemple 80 pixels.

00:02:56

Quant au second conteneur,

00:02:58

il prendra automatiquement le reste de l'espace disponible,

00:03:02

garantissant un affichage harmonieux.

00:03:06

Dans le conteneur regroupant l'entête et les données,

00:03:09

deux nouveaux conteneurs doivent être intégrés pour

00:03:12

assurer une répartition équilibrée des éléments.

00:03:15

Un conteneur sera utilisé pour l'entête

00:03:18

un autre pour l'affichage des données.

00:03:21

Une erreur dans l'orientation des conteneurs peut être rectifiée à tout moment

00:03:26

puisque Power Ups permet de modifier

00:03:28

cette propriété

00:03:29

après l'insertion.

00:03:31

Une fois les conteneurs créés,

00:03:33

la hauteur de l'entête peut être ajustée

00:03:35

en désactivant sa hauteur flexible

00:03:37

et en lui attribuant une valeur fixe

00:03:40

adaptée à l'affichage des informations essentielles.

00:03:43

Pour une meilleure lisibilité un mise en page plus aérée,

00:03:47

il est conseillé d'ajouter des écarts

00:03:49

entre les différentes sections de l'application.

00:03:52

Ces écarts

00:03:53

permettent de mieux distinguer les éléments

00:03:57

et d'améliorer la visibilité des informations affichées à l'écran.

00:04:01

En définissant la valeur de l'écartement dans les propriétés des conteneurs,

00:04:05

il est possible d'obtenir une séparation visuelle plus fluide

00:04:09

entre les différentes sections de l'application,

00:04:12

optimisant ainsi l'expérience utilisateur.

00:04:15

En suivant ces différentes étapes

00:04:17

et en appliquant les principes liés au conteneurs,

00:04:20

il est possible de concevoir une application power apps parfaitement structurée

00:04:25

et adaptable

00:04:26

à tous les types d'écrans.

00:04:28

Les conteneurs offrent une organisation flexible

00:04:31

et garantissent

00:04:32

une disposition harmonieuse des éléments de l'application.

00:04:36

Grâce à cette approche,

00:04:38

votre application sera ergonomique et optimisée

00:04:41

pour offrir une expérience fluide aux utilisateurs.

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