1. Livres & vidéos
  2. Power Apps
  3. De la liste SharePoint à l'application Canvas
Extrait - Power Apps Créez des applications métiers avec Microsoft Power Platform (Canvas Apps, Dataverse, Power Automate, Copilot)
Extraits du livre
Power Apps Créez des applications métiers avec Microsoft Power Platform (Canvas Apps, Dataverse, Power Automate, Copilot) Revenir à la page d'achat du livre

De la liste SharePoint à l'application Canvas

Introduction : relier l’idée à une vraie source de données

Dans le chapitre précédent, nous avons découvert Power Apps, apprivoisé Power Apps Studio et commencé à coder nos premières fonctions pour nous aider à développer notre application de gestion des demandes internes. Nous avons vu comment manipuler des contrôles, créer et afficher des variables, et surtout raisonner en « propriétés + formules », à la manière d’Excel. Tout cela est important pour commencer à développer, mais il est indispensable de pouvoir interagir avec des données : les stocker, les modifier et les supprimer.

C’est précisément l’objectif de ce chapitre. Nous allons connecter notre projet à SharePoint, créer une liste structurée, puis générer automatiquement une application Canvas depuis cette liste sans nous contenter d’une génération automatique opaque : nous allons décortiquer l’application générée, comprendre les écrans, les contrôles et les formules Power FX déjà présentes (recherche, tri, navigation, saisie, suppression). À la fin, vous saurez non seulement créer la base, mais aussi la personnaliser intelligemment. Nous verrons aussi comment supprimer...

Préparer la liste SharePoint

Il s’agit de penser « données » avant « écrans ». Une application solide repose sur un modèle de données propre. Commencez donc par créer une liste simple et explicite, qui représente réellement les demandes internes de votre organisation.

 Rendez-vous sur votre site SharePoint ; un site d’équipe suffit.

 Dans le menu latéral, ouvrez Contenu du site.

 Cliquez sur Nouvelle - Liste.

SharePoint propose des modèles pour apprendre, partez d’une liste vierge.

images/02RI02.png

 Donnez-lui un nom clair, par exemple Gestion des demandes ou Demandes internes.

 Ajoutez une courte description, par exemple : « Centraliser les demandes des collaborateurs par service avec suivi du statut ».

La liste est créée avec une seule colonne Titre. Nous allons l’enrichir avec les champs utiles à notre fil rouge :

  • Titre de la demande : renommage de la colonne Title. L’affichage peut apparaître comme Titre ou Titre de la demande selon votre choix.

  • Type :une seule ligne de texte, obligatoire.

  • Description (texte multiligne) : utile pour détailler le besoin.

  • Service concerné (Choix) : par exemple : Informatique, Ressources humaines, Logistique, Communication.

  • Demandeur (Personne) : l’utilisateur à...

Générer automatiquement une application Canvas depuis la liste

 Une fois votre liste créée, ouvrez la liste Gestion des demandes dans SharePoint.

 Dans la barre supérieure, cliquez sur Intégrer puis choisissez Power Apps.

 Cliquez sur Créer une application.

images/02RI05.png

Power Apps Studio s’ouvre dans un nouvel onglet et construit automatiquement une application Canvas connectée à votre liste, dans l’environnement par défaut de votre organisation. En quelques secondes, vous obtenez :

  • un écran de navigation/liste (BrowseScreen1) ;

  • un écran de détail (DetailScreen1) ;

  • un écran d’édition (EditScreen1).

Ces trois écrans couvrent déjà le cycle CRUD minimal : parcourir, consulter, créer, modifier et supprimer.

images/02RI06.png
images/02RI07.png
images/02RI08.png

À retenir

L’autogénération peut servir de prototype jetable, mais l’application créée reste très utile pour démarrer dans la Power Platform, répondre à des besoins simples et comprendre la syntaxe Power FX dans un cas réel. C’est un véritable point de départ professionnel, que l’on peut ensuite s’approprier, affiner et optimiser : navigation, formulaires, gestion des erreurs, organisation visuelle.

Décortiquer l’application générée

Entrons dans la mécanique, écran par écran, en nous appuyant sur l’application générée depuis SharePoint. L’objectif est de lire la structure en Power FX, de comprendre les formules utilisées et d’apprendre à les exploiter avant de créer notre propre application de bout en bout.

1. L’écran d’accueil (BrowseScreen1) : rechercher, trier, naviguer

Le haut de l’écran affiche une barre d’action colorée (RectQuickActionBar1, rectangle qui sert de fond à cette barre d’action) et un titre (LblAppName1, étiquette de texte) : Gestion des demandes. Trois icônes complètent l’en-tête :

  • Actualiser (IconRefresh1) avec, dans la propriété OnSelect, la formule Refresh([@’Gestion des demandes’]). La fonction Refresh force la mise à jour de la source SharePoint appelée Gestion des demandes. Elle peut être très utile après une modification effectuée via une autre application ou par un collègue qui travaille sur la même application.

  • Trier (IconSortUpDown1) avec, dans la propriété OnSelect, la formule UpdateContext({SortDescending1: !SortDescending1}). Comme nous l’avons vu précédemment, la fonction UpdateContext permet de déclarer une variable de contexte. Ici, le bouton agit comme un interrupteur : il inverse la valeur de SortDescending1 pour changer l’ordre de tri. Nous verrons plus loin comment cette variable pilote le tri de la source de données.

  • Nouvel élément (IconNewItem1) avec, dans la propriété OnSelect, la formule NewForm(EditForm1);;Navigate(EditScreen1; ScreenTransition.None). La fonction NewForm place le formulaire en mode création, puis l’application navigue vers l’écran d’édition.

Sous la barre d’action se trouvent un champ de recherche (TextSearchBox1, entrée de texte) et son icône (SearchIcon1). Cette entrée permet de rechercher un élément dans la galerie principale située en dessous (BrowseGallery1) via la propriété Items de la galerie :

SortByColumns(     Filter([@'Gestion des demandes']; StartsWith(Title;...

Personnaliser les écrans

Il s’agit ici d’adapter l’application générée. L’auto-générateur pose de bonnes bases de travail. Dans le cadre d’une montée en compétence, il aide à comprendre les fonctions et les interactions. Il permet aussi d’apprendre à apporter des modifications simples à une application sans devoir en créer une de toutes pièces.

 Commencez par renommer les écrans et les principaux contrôles dans le volet gauche (Arborescence).

 Remplacez par exemple BrowseScreen1 par EcranListe, DetailScreen1 par EcranDetail et EditScreen1 par EcranFormulaire. 

 Renommez aussi BrowseGallery1 en Gal_Demandes et EditForm1 en Frm_Demande.

Lorsque vous écrirez des formules, des noms explicites rendront vos éléments plus faciles à retrouver et vos expressions plus faciles à comprendre.

 Ensuite, ajustez l’affichage de la galerie : placez le Titre en première ligne, le Service en deuxième ligne, puis la Description en troisième ligne si elle est courte. Vous pouvez aussi remplacer cette troisième ligne par le Statut, souvent plus lisible dans une liste.

Dans la propriété Text du contrôle concerné, par exemple Body1, remplacez le service par :

"Statut : " & ThisItem.Statut.Value  

Les champs...

Comprendre les propriétés et formules clés rencontrées

Ce que nous venons d’explorer couvre une bonne partie des notions à connaître pour se lancer dans Power Apps. Récapitulons les points structurants que nous avons croisés :

  • Items de la galerie : combinaison de Filter et SortByColumns. Le filtrage et le tri d’une liste sont des points majeurs dans la construction d’une application.

    Pour le tri, nous pouvons aussi utiliser la fonction Sort, que nous verrons plus loin.

  • OnSelect des icônes : Refresh pour actualiser les données, UpdateContext pour gérer un état local, NewForm/EditForm pour définir le mode du formulaire, et Navigate pour gérer la navigation entre les écrans.

  • FormViewer et Form : ces contrôles reposent sur une structure de DataCards, mais répondent à deux usages distincts : l’affichage en lecture seule et l’édition.

  • DataCard.Update : valeur écrite dans la source de données lors de l’exécution de SubmitForm. C’est le premier point à vérifier lorsqu’un champ ne s’enregistre pas correctement.

  • DataSourceInfo : fonction qui expose les métadonnées de la source, par exemple les droits, les longueurs maximales ou les libellés. L’application générée s’en sert pour...

Remplacer une colonne de type Choix en colonne de recherche

Dans la première partie, Service concerné est une colonne de type Choix. C’est parfait pour débuter. Mais, dans un cas réel, on préfère souvent créer une liste Services séparée, avec ses propres colonnes (Responsable, Code, Description…), puis ajouter une colonne de recherche (Lookup) dans la liste Gestion des demandes.

Voici comment procéder dans le même projet :

 Créez une liste SharePoint nommée Services avec au minimum :

  • Titre : nom du service, par exemple Informatique ou RH.

  • Responsable : colonne de type Personne, facultative à ce stade.

 Retournez dans la liste Gestion des demandes, puis ajoutez une colonne en cliquant sur le bouton +.

  • Nom : Service ou Service concerné. Le nom Service reste toutefois plus court et plus lisible dans les formules.

  • Type : Recherche (Lookup).

  • Source : Services.

  • Colonne à afficher : Titre.

  • Autoriser plusieurs valeurs : laissez l’option désactivée afin de conserver une sélection simple.

 Supprimez ou masquez l’ancienne colonne Service concerné de type Choix pour éviter toute confusion, puis régénérez l’application si vous le souhaitez.

Vous pouvez aussi adapter l’application existante en modifiant la DataCard correspondante...

Supprimer et ajouter une source de données

Il est possible d’ajouter ou de supprimer des sources de données selon les besoins de l’application. Dans notre cas avancé, par exemple, nous avons créé une nouvelle liste Services qu’il faut maintenant connecter à l’application.

 Pour l’ajouter à votre application, ouvrez le menu Données, à gauche de l’écran.

 Cliquez sur Ajouter des données.

 Choisissez ensuite le connecteur souhaité, puis la connexion à utiliser.

images/02RI15.png

Le choix de la connexion permet de s’authentifier auprès du connecteur sélectionné. Les sites SharePoint auxquels vous avez accès apparaissent alors dans la liste.

images/02RI16.png
images/02RI17.png

 Sélectionnez votre site SharePoint de travail, puis les listes à ajouter comme sources de données.

 Pour supprimer une source de données, revenez dans le menu Données.

 Sur la source concernée, faites un clic droit ou cliquez sur les trois points.

 Cliquez sur Supprimer.

images/02RI18.png

Pour des projets plus industrialisés, vous pouvez utiliser des variables d’environnement afin de changer les sources SharePoint de l’application selon l’environnement dans lequel elle est déployée.

Erreurs fréquentes et dépannage

Lors du développement d’une application, certaines erreurs sont fréquentes. Soyez particulièrement attentif aux points ci-dessous :

  • Mauvais type de colonne : vous créez Statut en type Texte plutôt qu’en type Choix : dans l’application, vous obtenez alors une zone de saisie libre au lieu d’une liste déroulante. Corrigez la colonne côté SharePoint, puis actualisez la source dans Power Apps.

  • DataCard mal liée : la DataCard affiche le bon libellé, mais DataField pointe encore vers l’ancienne colonne, par exemple Service_concerne au lieu de Service. Ouvrez la DataCard, puis vérifiez les propriétés DataField et Update.

  • Droits insuffisants : un utilisateur ne peut pas enregistrer ? Vérifiez ses autorisations sur la liste : le niveau Contributeur est nécessaire a minima. L’application générée désactive d’ailleurs les icônes si DataSourceInfo détecte l’absence de permissions suffisantes.

  • Délégation ignorée : vous filtrez avec une fonction non délégable sur une liste volumineuse : vous ne voyez alors qu’une partie des résultats. Par défaut, Power Apps récupère 500 éléments, ou 2 000 si vous augmentez la limite dans les paramètres...

Performance et bonnes pratiques

Même si SharePoint est un excellent tremplin, quelques règles simples rendent votre application plus fluide :

  • Affichez peu de champs dans la galerie : le titre et quelques informations clés. Les autres détails seront présentés sur l’écran de détail.

  • Préférez les champs Choix au texte libre. Vous gagnerez en cohérence, notamment pour le filtrage, le tri et l’expérience utilisateur.

  • Rafraîchissez les données à bon escient. La fonction Refresh est utile après des opérations externes, mais évitez d’en abuser : elle interroge de nouveau SharePoint.

  • Anticipez l’évolutivité. SharePoint gère de gros volumes de données, mais Power Apps ne charge pas toute une liste volumineuse côté application. Si le processus devient central et fortement relationnel, Dataverse sera plus adapté ; vous pourrez alors évoluer vers une architecture plus robuste.

Si vous devez afficher une liste fixe, par exemple des priorités, vous pouvez aussi la charger dans une petite collection au démarrage ou utiliser des formules nommées afin d’éviter d’interroger SharePoint à chaque ouverture de formulaire. Gardez toutefois ce réflexe pour des données statiques et peu volumineuses.

Pour...

Mise en situation

 Il s’agit de tester le cycle complet de l’application.

 Passez en aperçu (Images/fleche.png).

 Créez une nouvelle demande à l’aide du bouton +, puis renseignez les champs Titre, Description, Service, Demandeur, Date, Statut et Priorité. Définissez le Statut sur Nouveau, la Priorité sur Normale, puis joignez un fichier.

 Validez la création de la demande.

 Revenez à la liste : la nouvelle carte apparaît immédiatement.

 Ouvrez cette carte en détail, puis cliquez sur Modifier et changez le Statut en En cours.

 Validez la modification, puis retournez à la liste : le cycle de vie de la demande est désormais engagé.

Conclusion du chapitre

Vous venez de franchir une étape essentielle : connecter votre application à une liste SharePoint et laisser Power Apps générer une application fonctionnelle. Loin d’être un simple gadget, cette autogénération met en place des modèles d’écrans pertinents, des formules structurées pour la recherche, le tri, la navigation, la soumission et la suppression, ainsi que des bonnes pratiques de base : gestion des droits via DataSourceInfo, contrôles ComboBox pour les choix et DataCards structurées.

Vous savez maintenant lire et adapter cette base : renommer des éléments, réorganiser les écrans, modifier les champs affichés, comprendre où Update écrit la donnée et comment SubmitForm orchestre l’enregistrement dans SharePoint. Vous avez également découvert la variante avec une colonne de recherche pour Service, plus réaliste dans les organisations qui maintiennent un référentiel de services distinct.

Dans le prochain chapitre, nous entrerons dans la personnalisation pas à pas : couleurs, thèmes, réorganisation des cartes, règles d’affichage conditionnel et premières formules Power FX appliquées aux propriétés Visible, Fill et Default, afin de transformer une application générée...