Application Canvas - Guide de survie (Liste SP pour mobile)
Guide pour créer une application Canvas, forme Tablette, avec un écran d’accueil, un écran Galerie et un écran Formulaire, sur une liste SharePoint nommée “Tâches”.
1. Préparer la source de données SharePoint
Pourquoi SharePoint ?
- Inclus dans la licence gratuite Office 365
- Gestion native des permissions
- Synchronisation automatique
- Éviter Excel comme source principale
Créer la liste SharePoint "Tâches"
- Accédez à votre site SharePoint
- Créez une nouvelle liste nommée "Tâches"
- Ajoutez les colonnes nécessaires (exemple) :
- Titre (Texte) - obligatoire
- Description (Texte multi ligne)
- Statut (Choix : À faire, En cours, Terminée)
- DateEcheance (Date et heure)
- Priorite (Choix : Faible, Normale, Élevée)
Préparer l’architecture de navigation

2. Accéder à Power Apps Studio
Se connecter
- Ouvrez votre navigateur et allez sur make.powerapps.com
- Connectez-vous avec vos identifiants Office 365
- Sélectionnez votre environnement en haut à droite
- Cliquez sur Créer dans le menu de gauche
3. Créer l'application Canvas
Création initiale
- Choisissez Application canevas
- Sélectionnez Format tablette (résolution 1366 x 768)
- Nommez votre application : "Gestion des tâches"
- Cliquez sur Créer
Avantages du format tablette :
- Plus d'espace pour organiser les contrôles
- Interface plus professionnelle
- Compatible avec tous les appareils (responsive)
4. Configuration initiale
Activer les contrôles modernes
- Cliquez sur Paramètres (roue dentée en haut)
- Allez dans Mise à jour
- Activez Contrôles et thèmes modernes
- Cliquez sur Appliquer
Connecter la source de données
- Dans le volet gauche, cliquez sur Données (icône cylindre)
- Cliquez sur Ajouter des données
- Recherchez et sélectionnez SharePoint
- Entrez l'URL de votre site SharePoint
- Sélectionnez la liste "Tâches"
- Cliquez sur Connexion
Vérification : La liste "Tâches" doit apparaître dans le volet Données.
5. Structure de l'application - 3 écrans
Créer les écrans
- Écran d'accueil :
scrAccueil(déjà créé par défaut) - Écran galerie : Insérer > Nouvel écran > Écran vide → renommer
scrTaches_Liste - Écran formulaire : Insérer > Nouvel écran > Écran vide → renommer
scrTaches_Form
6. Configuration de l'écran d'accueil (scrAccueil)
Éléments à ajouter
- Titre de l'application
- Contrôle : Texte
- Texte : "Gestion des Tâches"
- Police : 24pt, gras
- Bouton d'accès à la liste
- Contrôle : Bouton
- Texte : "Voir les tâches"
- OnSelect :
Navigate(scrTaches_Liste; ScreenTransition.Fade)
- Statistiques rapides (optionnel)
- Contrôle Texte affichant "Tâches actives"
- Texte :
CountRows(Filter(Tâches; Statut.Value <> "Terminé"))
7. Configuration de l'écran liste (scrTaches_Liste)
Ajouter la galerie
- Insérer une galerie verticale
- Contrôle : Galerie verticale
- Renommer :
galTaches - Propriété Items :
Tâches
- Configurer l'affichage de la galerie
- Sélectionner la galerie
- Modifier la disposition via le volet Propriétés
- Afficher : Titre, Sous-titre, Corps
- Mapper les champs
- Titre :
ThisItem.Title - Sous-titre :
ThisItem.Statut.Value - Corps :
ThisItem.Description
- Titre :
Ajouter les boutons de navigation
- Bouton Retour
- Texte : "← Accueil"
- OnSelect :
Navigate(scrAccueil; ScreenTransition.Fade)
- Bouton Nouveau
- Texte : "Nouvelle tâche"
- OnSelect :
Navigate(scrTaches_Form; ScreenTransition.Fade);; NewForm(frmTaches)
- Bouton Modifier (dans la galerie)
- Icône : Crayon
- OnSelect :
Navigate(scrTaches_Form; ScreenTransition.Fade);; EditForm(frmTaches)
- Bouton Supprimer (dans la galerie)
- Icône : Poubelle
- OnSelect :
Remove(Tâches; ThisItem)
Ajouter une barre de recherche (optionnel)
- Champ de saisie
- Contrôle : Entrée de texte
- Renommer :
txtRecherche - Texte d'indication : "Rechercher une tâche..."
- Modifier la propriété Items de la galerie
If(IsBlank(txtRecherche.Text);
Tâches;
Filter(Tâches; StartsWith(Title; txtRecherche.Text))
)8. Configuration de l'écran formulaire (scrTaches_Form)
Ajouter le formulaire
- Insérer un formulaire d'édition
- Contrôle : Formulaire
- Renommer :
frmTaches - Propriété DataSource :
Tâches
- Configurer les champs du formulaire
- Sélectionner le formulaire
- Dans le volet Propriétés, cliquer sur Modifier les champs
- Ajouter/supprimer les champs nécessaires :
- Title
- Description
- Statut
- DateEcheance
- Priorite
Ajouter les boutons d'action
- Bouton Retour
- Texte : "← Liste"
- OnSelect :
Navigate(scrTaches_Liste; ScreenTransition.Fade)
- Bouton Enregistrer
- Texte : "Enregistrer"
- OnSelect :
If(
frmTaches.Valid;
SubmitForm(frmTaches);;
Navigate(scrTaches_Liste; ScreenTransition.Fade);
Notify("Erreur : vérifiez les champs obligatoires";
NotificationType.Error)
)- Bouton Annuler
- Texte : "Annuler"
- OnSelect :
ResetForm(frmTaches);; Navigate(scrTaches_Liste; ScreenTransition.Fade)
Gestion des modes du formulaire
Le formulaire s'adapte automatiquement :
- Mode Nouveau : Quand on arrive via le bouton "Nouvelle tâche"
- Mode Modification : Quand on arrive via le bouton "Modifier" de la galerie
9. Bonnes pratiques de nommage
Préfixes des contrôles
- scr : Écrans (scrAccueil)
- gal : Galeries (galTaches)
- frm : Formulaires (frmTaches)
- btn : Boutons (btnNouveau)
- txt : Champs de texte (txtRecherche)
- lbl : Étiquettes (lblTitre)
Conventions
- Utiliser des noms explicites en français
- Respecter la casse (PascalCase)
- Éviter les espaces et caractères spéciaux
10. Fonctionnalités avancées
Filtrage par statut
Ajouter des boutons de filtre sur l'écran liste :
// Bouton "Toutes"
Items de la galerie : Tâches
// Bouton "À faire"
Items de la galerie : Filter(Tâches; Statut.Value = "À faire")
// Bouton "En cours"
Items de la galerie : Filter(Tâches; Statut.Value = "En cours")Tri des données
Bouton de tri par date d'échéance :
SortByColumns(Tâches; "DateEcheance"; If(varTriCroissant; SortOrder.Ascending; SortOrder.Descending))Validation personnalisée
Dans le formulaire, ajouter des règles :
// Champ DateEcheance - ne pas accepter les dates passées
If(DateValue(DateEcheance_DataCard.Text) < Today(); "La date d'échéance doit être future"; "")11. Test de l'application
Tests essentiels
- Navigation : Vérifier tous les boutons de navigation
- CRUD complet :
- Create : Ajouter une nouvelle tâche
- Read : Afficher la liste des tâches
- Update : Modifier une tâche existante
- Delete : Supprimer une tâche
- Validation : Tester les champs obligatoires
- Recherche/Filtres : Vérifier les fonctionnalités de recherche
Test sur différents appareils
- Cliquer sur Aperçu (bouton Play)
- Tester sur ordinateur, tablette et mobile
- Vérifier la réactivité de l'interface
12. Publication et partage
Publier l'application
- Cliquer sur Fichier > Publier
- Ajouter un commentaire de version
- Cliquer sur Publier cette version
Partager avec les utilisateurs
- Cliquer sur Partager
- Ajouter les utilisateurs ou groupes
- Définir les permissions :
- Peut utiliser : Utilisation normale
- Peut modifier : Peut modifier l'application
- Envoyer l'invitation
Permissions SharePoint
S'assurer que les utilisateurs ont accès à la liste SharePoint :
- Lecture minimum pour consulter
- Contribution pour ajouter/modifier/supprimer
13. Maintenance et évolution
Suivi des performances
- Surveiller l'utilisation via le centre d'administration Power Platform
- Vérifier les erreurs dans les journaux
- Optimiser les requêtes si nécessaire
Mise à jour
- Collecter les retours utilisateurs
- Planifier les évolutions fonctionnelles
- Versionner les modifications importantes
- Tester avant chaque publication
Sauvegarde
- Exporter régulièrement l'application (.msapp)
- Documenter les modifications majeures
- Maintenir une version de développement séparée
Récapitulatif des formules clés
// Navigation
Navigate(scrTaches_Liste; ScreenTransition.Fade)
// Nouveau formulaire
NewForm(frmTaches)
// Édition formulaire
EditForm(frmTaches);; ViewForm(frmTaches; ThisItem)
// Suppression
Remove(Tâches; ThisItem)
// Soumission formulaire avec validation
If(frmTaches.Valid; SubmitForm(frmTaches); Notify("Erreur"; NotificationType.Error))
// Recherche
Filter(Tâches; StartsWith(Title; txtRecherche.Text))
// Comptage
CountRows(Filter(Tâches; Statut.Value = "À faire"))