PowerApps - Structurer votre mise en page Tutoriels

Découvrez comment structurer votre mise en page dans PowerApps grâce à des conteneurs dynamiques et adaptables. Apprenez à créer une application ergonomique qui s'ajuste à tous les écrans et optimise l'expérience utilisateur. Rejoignez-nous pour maîtriser les bases du low code avec ce tutoriel essentiel pour les intermédiaires. Ne manquez pas cette opportunité d'améliorer vos compétences en PowerApps!

  • 04:47
  • 158 vues

Objectifs :

L'objectif de ce tutoriel est d'apprendre à structurer une application en utilisant des conteneurs pour assurer une mise en page dynamique et adaptable, permettant ainsi à l'application de s'ajuster à différents écrans.

Chapitres :

  1. Introduction à la Structuration d'Applications
    Dans ce tutoriel, nous allons explorer comment structurer une application en utilisant des conteneurs. Cette méthode est essentielle pour garantir que l'application s'adapte de manière dynamique à différents types d'écrans, offrant ainsi une expérience utilisateur optimale.
  2. Création du Conteneur Principal
    Pour commencer, il est crucial de créer un conteneur principal. Ce conteneur agit comme une structure flexible qui ajuste automatiquement la taille et l'agencement des éléments qu'il contient. En définissant ses dimensions en fonction de l'écran, il garantit que l'application occupe toujours tout l'espace disponible sans nécessiter d'ajustement manuel.
  3. Exemple de Structure d'Application
    Prenons l'exemple d'une application divisée en trois sections : le menu, l'en-tête et les données. Si nous utilisons un conteneur vertical, l'en-tête et les données seront correctement organisées, mais la barre des menus risque d'être coupée. En revanche, un conteneur horizontal permet d'intégrer ces éléments de manière fluide et cohérente.
  4. Configuration des Propriétés du Conteneur
    Une fois le conteneur inséré, nous allons utiliser le panneau des propriétés pour définir certains paramètres essentiels. Il est recommandé de fixer les coordonnées X et Y à zéro pour qu'ils s'alignent parfaitement avec le coin supérieur gauche de l'écran principal. La largeur et la hauteur doivent correspondre aux dimensions de l'écran principal, en utilisant les fonctions 'parent.width' et 'parent.height' dans la barre de formule.
  5. Ajout de Sous-Conteneurs
    Après avoir configuré le conteneur principal, il est nécessaire d'ajouter des sous-containers. Deux conteneurs sont indispensables : l'un pour la barre de menu et l'autre pour l'en-tête et les données. Il est important de s'assurer que le conteneur principal est bien sélectionné avant d'insérer ces éléments.
  6. Orientation et Dimensions des Sous-Conteneurs
    Le choix de l'orientation des sous-containers dépend de la disposition des éléments à l'intérieur de l'application. Comme le menu est structuré de manière verticale, un conteneur vertical est préférable. De même, l'en-tête et les données étant organisées en colonne, un conteneur vertical est également idéal pour cette partie. Il est possible de personnaliser les dimensions des conteneurs pour mieux correspondre à l'agencement désiré.
  7. Ajustements et Espacement
    Pour une meilleure lisibilité et un agencement plus aéré, il est conseillé d'ajouter des écarts entre les différentes sections de l'application. Ces écarts permettent de mieux distinguer les éléments et d'améliorer la visibilité des informations affichées à l'écran. En définissant la valeur de l'écartement dans les propriétés des conteneurs, on obtient une séparation visuelle plus fluide.
  8. Conclusion
    En suivant ces différentes étapes et en appliquant les principes liés aux conteneurs, il est possible de concevoir une application Power Apps parfaitement structurée et adaptable à tous les types d'écrans. Les conteneurs offrent une organisation flexible et garantissent une disposition harmonieuse des éléments de l'application, optimisant ainsi l'expérience utilisateur.

FAQ :

Qu'est-ce qu'un conteneur dans une application Power Apps?

Un conteneur est un élément de mise en page qui regroupe d'autres éléments d'interface utilisateur, permettant une organisation flexible et adaptable des composants d'une application.

Comment créer un conteneur principal dans Power Apps?

Pour créer un conteneur principal, il faut d'abord le sélectionner dans l'interface de Power Apps, puis définir ses dimensions en utilisant les fonctions 'parent.width' et 'parent.height' pour qu'il s'adapte automatiquement à la taille de l'écran.

Pourquoi est-il important d'utiliser des conteneurs dans une application?

Les conteneurs permettent d'assurer une mise en page dynamique et adaptable, garantissant que l'application s'affiche correctement sur différents types d'écrans sans nécessiter d'ajustements manuels.

Comment ajuster la hauteur d'un conteneur dans Power Apps?

Pour ajuster la hauteur d'un conteneur, il faut désactiver sa hauteur flexible et lui attribuer une valeur fixe qui correspond à l'affichage des informations essentielles.

Quels sont les avantages d'une mise en page aérée dans une application?

Une mise en page aérée améliore la lisibilité et la visibilité des informations affichées, ce qui optimise l'expérience utilisateur en rendant l'application plus ergonomique.

Quelques cas d'usages :

Création d'une application de gestion de projet

Utiliser des conteneurs pour structurer une application de gestion de projet, en intégrant un conteneur pour le menu, un autre pour l'entête, et des sous-conteneurs pour les données. Cela permet une navigation fluide et une présentation claire des informations.

Développement d'une application de suivi des ventes

Appliquer les principes de conteneurs pour créer une application de suivi des ventes qui s'adapte à différents écrans, en utilisant des conteneurs verticaux pour les menus et horizontaux pour les données, garantissant ainsi une interface utilisateur cohérente.

Conception d'une application de réservation

Structurer une application de réservation en utilisant des conteneurs pour organiser les sections de recherche, de sélection et de confirmation. Cela permet d'améliorer l'expérience utilisateur en rendant l'application intuitive et facile à naviguer.

Application de formation en ligne

Utiliser des conteneurs pour créer une application de formation en ligne, en intégrant des sections pour les cours, les ressources et les évaluations. Cela permet de présenter les informations de manière claire et accessible sur tous les types d'écrans.

Glossaire :

Application Power Apps

Une plateforme de développement d'applications qui permet aux utilisateurs de créer des applications personnalisées sans nécessiter de compétences en programmation.

Conteneur

Un élément de mise en page qui regroupe d'autres éléments d'interface utilisateur, permettant une organisation flexible et adaptable des composants d'une application.

Mise en page dynamique

Une disposition d'éléments d'interface qui s'ajuste automatiquement en fonction de la taille de l'écran ou de la fenêtre de l'application.

Coordonnées X et Y

Les valeurs qui définissent la position d'un élément sur l'axe horizontal (X) et vertical (Y) dans un espace de travail.

Hauteur flexible

Une propriété d'un conteneur qui permet à sa hauteur de s'ajuster automatiquement en fonction de son contenu.

Écartement

L'espace entre les différents éléments d'une application, utilisé pour améliorer la lisibilité et la visibilité des informations.

résultat(s)
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.

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
298 vues
E-learning Intermédiaire

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