Skip to content
Licence Microsoft 365 avec accès à Power AppsSite SharePoint avec une liste créée et des données de testDroits de contribution sur la liste SharePointNavigateur web moderne (Edge, Chrome recommandés)
Cliquez sur + Créer dans le menu de gauche.Sélectionnez Application vide puis Format tablette.L’éditeur Power Apps s’ouvre avec un écran vide.
Sélectionnez l’écran Screen1 dans l’arborescence.Dans le panneau des propriétés à droite, configurez :
Dans le panneau de gauche, cliquez sur l’icône Données (cylindre).Cliquez sur + Ajouter des données.Recherchez SharePoint et sélectionnez le connecteur.Sélectionnez ou saisissez l’URL de votre site SharePoint.Cochez la liste à connecter et cliquez sur Connexion.La liste apparaît dans le panneau Données.
Menu Insertion > Disposition > Conteneur vertical.Renommez-le conMain (conteneur principal).Configurez ses propriétés pour qu’il occupe tout l’écran :
Sélectionnez conMain dans l’arborescence.Insérez un Conteneur horizontal à l’intérieur.Renommez-le conHeader.Configurez ses propriétés (sélectionner la propriété dans la liste en haut à gauche) :Une Étiquette pour le titre de l’application (texte blanc, taille 20)Un Bouton “+ Ajouter” (optionnel, pour la création)
Dans conMain, insérez un Conteneur horizontal sous l’en-tête.Renommez-le conContent.Configurez ses propriétés :
Testez l’application en mode aperçu (F5).Redimensionnez la fenêtre pour vérifier le comportement responsive.Testez toutes les fonctionnalités : ajout, modification, suppression.Vérifiez la synchronisation avec SharePoint.Enregistrez (Ctrl+S) puis publiez l’application.Partagez avec les utilisateurs concernés.
Power Platform - Apps - Automate - SharePoint
- Pages
Création d’une application Power Apps Canvas
Version adaptative (responsive) - Source SharePoint
Objectif
Ce mode opératoire vous guide dans la création d’une application Power Apps Canvas responsive (adaptative), capable de s’afficher correctement sur téléphone, tablette et ordinateur. L’application est connectée à une liste SharePoint et utilise les conteneurs modernes pour gérer la mise en page.
Prérequis
Comprendre les conteneurs
Les conteneurs sont des éléments essentiels pour créer des applications responsives. Ils permettent d’organiser et de redimensionner automatiquement les contrôles selon la taille de l’écran.
Types de conteneurs
Type
Description et usage
Conteneur horizontal
Dispose les éléments enfants côte à côte, de gauche à droite. Idéal pour les barres d’outils, les menus horizontaux, les rangées de boutons.
Conteneur vertical
Empile les éléments enfants de haut en bas. Idéal pour les formulaires, les listes, la structure principale de la page.
Conteneur simple
Conteneur sans direction prédéfinie, positionne les éléments librement. Utile pour grouper des contrôles ou créer des zones personnalisées.
There are no rows in this table
📷 [Capture d’écran : Schéma illustrant les trois types de conteneurs]
Propriétés clés des conteneurs
Propriété
Description
LayoutDirection
Horizontal ou Vertical - définit la direction d’empilement
LayoutJustifyContent
Start, Center, End, SpaceBetween, SpaceAround - répartition sur l’axe principal
LayoutAlignItems
Start, Center, End, Stretch - alignement sur l’axe secondaire
LayoutGap
Espacement entre les éléments enfants (en pixels)
LayoutWrap
true/false - permet le retour à la ligne automatique si l’espace est insuffisant
FlexHeight / FlexWidth
Permet au conteneur de s’adapter à son contenu
There are no rows in this table
Étape 1 : Créer l’application adaptative
📷 [Capture d’écran : Écran de création avec sélection du format tablette]
Activer la mise en page responsive
Propriété Width :
Max(App.Width, App.DesignWidth)
→ La largeur s’adapte à l’appareil tout en respectant la largeur minimale de conception
Propriété Height :
Max(App.Height, App.DesignHeight)
→ La hauteur s’adapte à l’appareil tout en respectant la hauteur minimale de conception
💡 Astuce responsive : Appliquez ces formules Width et Height à chaque nouvel écran que vous créez pour garantir une cohérence responsive sur l’ensemble de l’application.
Étape 2 : Connecter la liste SharePoint
📷 [Capture d’écran : Panneau Données avec la liste SharePoint connectée]
Étape 3 : Créer la structure de mise en page
Nous allons créer une structure de page classique avec un en-tête, un contenu principal et un pied de page, le tout géré par des conteneurs.
3.1 Conteneur principal (structure de la page)
X = 0
→ Position horizontale au bord gauche
Y = 0
→ Position verticale en haut
Width = Parent.Width
→ Largeur égale à celle de l’écran parent
Height = Parent.Height
→ Hauteur égale à celle de l’écran parent
📷 [Capture d’écran : Conteneur principal couvrant tout l’écran]
3.2 Conteneur d’en-tête
Width = Parent.Width
→ Occupe toute la largeur
Height = 60
→ Hauteur fixe de 60 pixels
Fill = RGBA(43, 87, 154, 1)
→ Couleur de fond bleue
LayoutJustifyContent = LayoutJustifyContent.SpaceBetween
→ Éléments répartis aux extrémités
LayoutAlignItems = LayoutAlignItems.Center
→ Éléments centrés verticalement
PaddingLeft = 20
→ Marge intérieure gauche
PaddingRight = 20
→ Marge intérieure droite
Dans conHeader, ajoutez :
📷 [Capture d’écran : En-tête avec titre et bouton d’ajout]
3.3 Conteneur de contenu principal
Width = Parent.Width
→ Occupe toute la largeur
Height = Parent.Height - conHeader.Height - conFooter.Height
→ Hauteur dynamique : espace restant entre header et footer
LayoutGap = 20
→ Espacement entre les zones
3.4 Zone galerie (liste des éléments)
Dans conContent, insérez un Conteneur vertical nommé conGallery :
Width = Parent.Width * 0.4
→ Occupe 40% de la largeur sur grand écran
Height = Parent.Height
→ Occupe toute la hauteur disponible
Fill = RGBA(245, 245, 245, 1)
→ Fond gris clair
Dans conGallery, insérez une Galerie verticale vide et connectez-la à votre liste SharePoint.
3.5 Zone détail/formulaire
Dans conContent, insérez un second Conteneur vertical nommé conDetail :
Width = Parent.Width - conGallery.Width - Parent.LayoutGap
→ Occupe l’espace restant
Height = Parent.Height
→ Occupe toute la hauteur disponible
Dans conDetail, insérez un Formulaire d’affichage ou un Formulaire de modification selon vos besoins.
📷 [Capture d’écran : Structure complète avec galerie à gauche et formulaire à droite]
3.6 Conteneur de pied de page (optionnel)
Dans conMain, ajoutez un Conteneur horizontal nommé conFooter :
Width = Parent.Width
→ Occupe toute la largeur
Height = 40
→ Hauteur fixe
Fill = RGBA(240, 240, 240, 1)
→ Fond gris clair
LayoutJustifyContent = LayoutJustifyContent.Center
→ Contenu centré
Étape 4 : Gérer l’adaptabilité mobile
Pour que l’application s’adapte aux petits écrans (téléphones), nous allons modifier la disposition selon la largeur de l’écran.
4.1 Basculer la direction du conteneur principal
Modifiez la propriété LayoutDirection de conContent :
If(Parent.Width < 600, LayoutDirection.Vertical, LayoutDirection.Horizontal)
→ Disposition verticale sur petit écran (< 600px), horizontale sinon
4.2 Adapter les largeurs des zones
Modifiez la propriété Width de conGallery :
If(conContent.LayoutDirection = LayoutDirection.Vertical, Parent.Width, Parent.Width * 0.4)
→ Pleine largeur en mode vertical, 40% en mode horizontal
Modifiez la propriété Height de conGallery :
If(conContent.LayoutDirection = LayoutDirection.Vertical, Parent.Height * 0.4, Parent.Height)
→ Hauteur partielle en mode vertical, pleine hauteur en mode horizontal
💡 Test responsive : Utilisez la fonction de redimensionnement de l’éditeur Power Apps (glissez les bords de la zone de prévisualisation) pour tester le comportement responsive avant de publier.
Étape 5 : Configurer les interactions
5.1 Sélection dans la galerie
Propriété Item du formulaire de détail :
Gallery1.Selected
→ Affiche les détails de l’élément sélectionné dans la galerie
5.2 Bouton Ajouter (dans l’en-tête)
Propriété OnSelect :
NewForm(FormEdit1)
→ Passe le formulaire en mode création
5.3 Bouton Modifier
Propriété OnSelect :
EditForm(FormEdit1)
→ Passe le formulaire en mode édition avec l’élément sélectionné
5.4 Bouton Enregistrer
Propriété OnSelect :
SubmitForm(FormEdit1)
→ Enregistre les modifications dans SharePoint
5.5 Bouton Supprimer
Propriété OnSelect :
Remove(NomDeLaListe, Gallery1.Selected)
→ Supprime l’élément sélectionné de SharePoint
5.6 Gestion du succès et des erreurs
Propriété OnSuccess du formulaire :
Notify("Enregistrement réussi", NotificationType.Success)
→ Affiche une notification de succès
Propriété OnFailure du formulaire :
Notify("Erreur lors de l'enregistrement", NotificationType.Error)
→ Affiche une notification d’erreur
Récapitulatif de la structure
Voici la hiérarchie des conteneurs de l’application :
Screen1
└── conMain (Conteneur vertical)
├── conHeader (Conteneur horizontal - en-tête)
│ ├── lblTitle
│ └── btnAdd
├── conContent (Conteneur horizontal/vertical adaptatif)
│ ├── conGallery (zone liste)
│ │ └── Gallery1
│ └── conDetail (zone formulaire)
│ └── FormEdit1
└── conFooter (Conteneur horizontal - pied de page)
Étape 6 : Tester et publier
Aide-mémoire : formules responsive
Usage
Formule
Écran adaptatif
Max(App.Width, App.DesignWidth)
Largeur relative
Parent.Width * 0.5
Direction conditionnelle
If(Parent.Width < 600, LayoutDirection.Vertical, LayoutDirection.Horizontal)
Visibilité conditionnelle
If(App.Width > 800, true, false)
Hauteur dynamique
Parent.Height - Header.Height - Footer.Height
There are no rows in this table
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.