Dans la partie 1 de ce tuto Power Apps pour débutant, vous avez créé une première application : une liste de tâches avec sa table, son formulaire et sa galerie. Cette deuxième partie la rend vraiment utilisable : voir le détail d’une tâche, la modifier, en ajouter une, la supprimer et retrouver une tâche par son nom.
En bref : ce que vous allez construire
- Un écran de gestion : la liste des tâches à gauche, le détail de la tâche choisie à droite.
- Un bouton Enregistrer qui met la tâche à jour avec la fonction Patch.
- Un bouton Ajouter qui crée une tâche avec Patch et Defaults.
- Une corbeille sur chaque ligne qui supprime la tâche avec Remove.
- Une barre de recherche qui filtre la liste avec Search.
Prérequis : l’application de la partie 1 et sa table Dataverse TODO__Liste, avec trois colonnes : Tache_Nom, Tache_Etat et Tache_Description. Comptez une trentaine de minutes.
Petit rappel : Power Apps, c’est quoi ?
Power Apps est la plateforme low-code de Microsoft pour créer des applications métier : on place des écrans et des contrôles, on les relie à des données (Dataverse, SharePoint, Excel, SQL) et on écrit des formules en Power Fx, un langage proche de celui d’Excel. Les applications s’utilisent dans un navigateur, sur téléphone et dans Teams. Pour la définition complète et les prix, voir Power Apps, c’est quoi.
Étape 1 : afficher et modifier une tâche
Ouvrir l’application de la partie 1
Commencez par ouvrir votre projet précédent dans l'environnement où il a été créé, puis lancez-le en mode édition.
Créer un nouvel écran
Pour partir sur de bonnes bases, nous allons créer un nouvel écran dans notre application. Pour cela, cliquez sur le bouton « Nouvel écran » > « Vierge ».
Ajouter la galerie des tâches
Pour afficher nos différentes tâches, nous allons les disposer dans une galerie. Pour cela, il suffit de faire glisser-déposer le contrôle « Galerie verticale » dans notre application et de la connecter à notre source de données.
Personnalisez ensuite la galerie pour afficher l’essentiel de chaque tâche : son nom (Tache_Nom) en titre et son état (Tache_Etat) en sous-titre.
Pour finaliser l'ajout de cette galerie, on ajoute un titre pour plus de lisibilité dans l'application.
Ainsi qu'un séparateur entre la galerie et la future partie pour la visualisation des détails de la tâche.
Afficher le détail de la tâche choisie
Une tâche comprend un titre, un état et une description. Dans notre galerie, seuls les deux premiers éléments sont visibles. Ajoutons maintenant la description en intégrant :
- Deux contrôles « Entrée de texte » (Titre et description)
- Un menu déroulant « Dropdown » (état)
Il est maintenant temps de raccorder cette partie avec la sélection de nos tâches ! Pour cela, nous allons voir contrôle par contrôle comment faire.
Les entrées de texte
Pour celles-ci, il suffit de modifier leur champ « Par défaut » en indiquant que l'on se base sur notre galerie.
D’une part pour le nom de la tâche (TextInput2) : Gallery2.Selected.Tache_Nom
D’autre part pour la description (TextInput3), en passant son mode sur « Multiligne » pour plus de confort : Gallery2.Selected.Tache_Description
Le menu déroulant (Dropdown)
Un peu plus délicat que les entrées de texte, le menu déroulant (Dropdown1) voit lui aussi sa propriété « Par défaut » calée sur la galerie : Gallery2.Selected.Tache_Etat
Il faut aussi lui donner la liste des choix possibles, dans sa propriété Items : ["A faire"; "Fait"; "En attente"]
Grâce à cette étape, nous pouvons voir le détail d'une tâche ! Si tout s'est bien déroulé, nous pouvons aussi éditer les différentes caractéristiques de la tâche. Nous allons maintenant travailler sur l'enregistrement de ces modifications.
Enregistrer les modifications avec Patch
Dans un premier temps, ajoutons un bouton d'enregistrement.
Passez ensuite à la propriété OnSelect du bouton : c’est elle qui dit ce que fait le clic.
On utilise la fonction Patch, qui met à jour la tâche sélectionnée dans la galerie avec le contenu des trois champs (tout sur cette fonction : la fonction Patch dans Power Apps) :
Patch(TODO__Liste; Gallery2.Selected; {Tache_Nom: TextInput2.Text; Tache_Etat: Dropdown1.SelectedText.Value; Tache_Description: TextInput3.Text})
Sur une application récente, Dropdown1.Selected.Value donne le même résultat : SelectedText est une ancienne propriété, toujours acceptée.
Au clic sur Enregistrer, la tâche sélectionnée est mise à jour avec les valeurs des champs. Pour confirmer à l’utilisateur que c’est fait, ajoutez à la suite de la formule : ;; Notify("Tâche enregistrée"; NotificationType.Success)
Nous pouvons donc maintenant consulter nos tâches et les modifier. Passons maintenant à l'ajout d'une nouvelle tâche !
Étape 2 : ajouter une tâche
Comme pour le bouton Enregistrer, cela se fait en deux temps.
D'une part, nous ajoutons le bouton « Ajouter ».
D’autre part, la logique du clic, dans OnSelect : on réutilise Patch, non plus pour modifier une ligne mais pour en créer une, à partir de Defaults, qui fournit une ligne vide avec les valeurs par défaut de la table :
Patch(TODO__Liste; Defaults(TODO__Liste))
Astuce : donnez à la nouvelle tâche un nom provisoire pour la repérer tout de suite dans la galerie : Patch(TODO__Liste; Defaults(TODO__Liste); {Tache_Nom: "Nouvelle tâche"; Tache_Etat: "A faire"})
Consultation, modification et ajout : passons maintenant à la suppression.
Étape 3 : supprimer une tâche
Même technique que pour les deux étapes précédentes.
Ajout du bouton corbeille directement dans la galerie. Un bouton étant présent de base lors de la création de la galerie, on vient le modifier en corbeille.
Puis on ajoute la logique du bouton, dans son OnSelect, avec la fonction Remove. Dans une galerie, ThisItem désigne la ligne sur laquelle se trouve la corbeille :
Remove(TODO__Liste; ThisItem)
Pour éviter une suppression par erreur, ajoutez une confirmation avant le Remove : une fenêtre « Supprimer cette tâche ? » avec deux boutons.
Avant de finir ce deuxième tuto, ajoutons une dernière fonctionnalité bonus : la recherche !
Étape 4 : rechercher une tâche
La recherche se fait en deux temps. Commencez par ajouter une barre de recherche : une entrée de texte au-dessus de la galerie (ici TextInput4).
Paramétrez-la à votre goût : ici, un texte d’information « Rechercher une tâche » pour guider l’utilisateur.
Passez ensuite à la logique : dans la propriété Items de la galerie, remplacez la table par la fonction Search, qui ne garde que les tâches dont le nom contient le texte saisi :
Search(TODO__Liste; TextInput4.Text; Tache_Nom)
Vous pouvez maintenant rechercher vos tâches grâce à leur nom directement depuis le champ de recherche !
Sur une grande table, si la formule est soulignée en bleu (avertissement de délégation), la recherche ne porte que sur les premières lignes chargées, 500 par défaut. Remplacez alors Search par Filter(TODO__Liste; StartsWith(Tache_Nom; TextInput4.Text)) : la recherche porte sur le début du nom, mais reste délégable sur Dataverse comme sur SharePoint.
Récapitulatif des formules de la partie 2
| Contrôle | Propriété | Formule |
|---|---|---|
| TextInput2 (nom de la tâche) | Default | Gallery2.Selected.Tache_Nom |
| TextInput3 (description) | Default | Gallery2.Selected.Tache_Description |
| Dropdown1 (état) | Default | Gallery2.Selected.Tache_Etat |
| Dropdown1 (état) | Items | ["A faire"; "Fait"; "En attente"] |
| Bouton Enregistrer | OnSelect | Patch(TODO__Liste; Gallery2.Selected; {Tache_Nom: TextInput2.Text; Tache_Etat: Dropdown1.SelectedText.Value; Tache_Description: TextInput3.Text}) |
| Bouton Ajouter | OnSelect | Patch(TODO__Liste; Defaults(TODO__Liste)) |
| Corbeille (dans la galerie) | OnSelect | Remove(TODO__Liste; ThisItem) |
| Gallery2 (liste des tâches) | Items | Search(TODO__Liste; TextInput4.Text; Tache_Nom) |
Les formules sont écrites comme dans Power Apps réglé en français : point-virgule entre les arguments, double point-virgule pour enchaîner deux formules. Avec Power Apps en anglais, remplacez les points-virgules par des virgules, et les doubles points-virgules par des points-virgules simples.
Les erreurs fréquentes
- Les champs ne changent pas quand on clique sur une tâche : leur propriété Default pointe vers une autre galerie (Gallery1 au lieu de Gallery2, par exemple). Renommez vos contrôles (galTaches, txtNom, ddEtat) pour ne plus les confondre.
- Patch signale une erreur : la valeur envoyée ne correspond pas au type de la colonne (un texte dans une colonne de choix, par exemple), ou une colonne obligatoire reste vide. Le message nomme la colonne en cause.
- La recherche oublie des tâches : sur une grande table, c’est la délégation (voir l’étape 4).
- Vos collègues ne voient pas les changements : l’application a été enregistrée, mais pas publiée.
Aller plus loin
Votre application sait maintenant afficher, modifier, ajouter, supprimer et rechercher des tâches : ce sont les cinq gestes de presque toutes les applications de gestion.
Pour la suite : remplacer les entrées de texte par un formulaire Power Apps (validation, modes création et modification), découvrir les fonctionnalités avancées de Power Apps, ou suivre la formation Power Apps de YoungData : 2 ou 3 jours, à partir de 3 500 € HT la session, certifiée Qualiopi et finançable par votre OPCO. Pour voir des applications en production, parcourez nos cas clients.
Questions fréquentes
Comment modifier un élément d’une galerie Power Apps ?
Reliez les champs de détail à la galerie (propriété Default égale à Galerie.Selected.Colonne), puis mettez sur un bouton Enregistrer la formule Patch(Table; Galerie.Selected; {Colonne: Champ.Text}). La ligne sélectionnée est mise à jour dans la source de données.
Comment supprimer un élément dans Power Apps ?
Avec la fonction Remove. Placez une icône corbeille dans la ligne type de la galerie et mettez Remove(Table; ThisItem) dans sa propriété OnSelect. Ajoutez une confirmation pour éviter les suppressions par erreur.
Comment ajouter une recherche dans une galerie Power Apps ?
Ajoutez une entrée de texte au-dessus de la galerie, puis remplacez la propriété Items de la galerie par Search(Table; Entrée.Text; Colonne). Sur une grande table, préférez Filter avec StartsWith, qui reste délégable.
Quelle différence entre Patch et SubmitForm ?
SubmitForm enregistre un contrôle Formulaire, avec ses validations et ses modes création et modification. Patch écrit directement dans la source de données à partir de n’importe quels champs : c’est ce que fait ce tutoriel avec de simples entrées de texte.
