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

Licence Microsoft 365 avec accès à Power Apps
Site SharePoint avec une liste créée et des données de test
Droits de contribution sur la liste SharePoint
Navigateur web moderne (Edge, Chrome recommandés)

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.

📷 [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

Étape 1 : Créer l’application adaptative

Accédez à make.powerapps.com.
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.

📷 [Capture d’écran : Écran de création avec sélection du format tablette]

Activer la mise en page responsive

Sélectionnez l’écran Screen1 dans l’arborescence.
Dans le panneau des propriétés à droite, configurez :

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

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.

📷 [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)

Menu Insertion > Disposition > Conteneur vertical.
Renommez-le conMain (conteneur principal).
Configurez ses propriétés pour qu’il occupe tout l’écran :

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

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) :

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 :

Une Étiquette pour le titre de l’application (texte blanc, taille 20)
Un Bouton “+ Ajouter” (optionnel, pour la création)

📷 [Capture d’écran : En-tête avec titre et bouton d’ajout]

3.3 Conteneur de contenu principal

Dans conMain, insérez un Conteneur horizontal sous l’en-tête.
Renommez-le conContent.
Configurez ses propriétés :

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

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.

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

Document de formation - Power Apps Canvas Responsive