Listes déroulantes en cascade dans Power Apps

Listes déroulantes en cascade Power Apps

Dans cette manipulation, vous verrez comment créer des listes déroulantes en cascade Power Apps.

Si vous rencontrez des erreurs dans les manipulations ci-dessous, lisez l’article qui explique comment débuguer les erreurs dans Power Apps.

Gardez à l’esprit que l’interface a pu évoluer fortement depuis que cet article a été rédigé.

Cas d’usage

Grâce à la manipulation précédente, vous savez faire une application Power Apps de A à Z.

Dans cette manipulation, vous allez apprendre à créer des listes déroulantes en cascade Power Apps.

Les listes en cascade sont basées généralement sur au moins deux listes déroulantes. Il y a une relation de dépendance entre ces listes déroulantes.

Le principe des listes en déoulantes en cascade est donc d’avoir une première liste (par exemple, les régions françaises).

Quand l’utilisateur sélectionne un élément de la première liste (par exemple Bretagne), une deuxième liste déroulante affiche les valeurs correspondantes (par exemple la liste des départements de la Bretagne : Côtes-d’Armor, Finistère, Ille-et-Vilaine, Morbihan).

Ce mécanisme est très pratique. En effet, il réduit la quantité d’informations exposées à l’utilisateur. Celui-ci peut donc faire son choix plus efficacement.

Dans l’exemple de cet exercice, une liste déroulante va afficher la liste des identifiants des fournisseurs de la liste lstAffaires. Une seconde liste déroulante affichera la liste des affaires du fournisseur sélectionné.

La liste lstAffaires doit exister dans votre site SharePoint. Elle contient la liste de toutes les affaires en cours de la boutique. Bien évidemment, vous pouvez utiliser une autre liste en adaptant les manipulations.

Créer une application pour avoir des listes déroulantes en cascade Power Apps

Dans un premier temps, pour mettre en oeuvre des listes déroulantes en cascade Power Apps, vous devez créer une application.

Pour ce faire, ouvrez le site web Microsoft Power Apps :

https://make.powerapps.com/

Ensuite, dans le volet de navigation (à gauche), cliquez sur Applications.

Puis, dans la bannière du volet central (en haut), cliquez sur Créer une application (en haut, vers la gauche).

Ensuite, dans le menu qui s’affiche, cliquez sur Zone de dessin : un nouvel onglet s’ouvre.

Puis, dans le volet central du nouvel onglet et sous Démarrer avec un modèle ou un canevas vierge, cliquez sur Disposition de la tablette sous Application vide, puis patientez.

Pour vous aider, regardez la copie d’écran ci-dessous.

Démarrer avec un modèle tablette
Démarrer avec un modèle tablette

Enregistrer et renommer votre application Power Apps

Vous allez nommer votre application qui va manipuler des listes déroulantes en cascade Power Apps.

Pour ce faire, cliquez sur le ruban Fichier puis dans le volet de gauche, cliquez sur Enregistrer.

Puis, dans le volet central (vers la droite), remplacez le nom de l’application (« Application ») par canAffaires.

Ensuite, en bas, cliquez sur le bouton Enregistrer.

Si vous ne voyez pas le bouton Enregistrer, c’est parce que vous êtes dans les Paramètres de l’application. Dans ce cas, cliquez sur Enregistrer dans le volet de gauche.

Enfin, cliquez sur la flèche en haut et à gauche pour revenir à l’accueil.

Afin d’éviter toute ambiguïté, il est indiqué systématiquement le nom du contrôle. Toutefois, vous pouvez aussi sélectionner un contrôle dans la représentation graphique de l’écran au milieu.

Se connecter aux données pour alimenter les listes déroulantes en cascade dans Power Apps

Vous allez connecter aux données votre application qui va manipuler des listes déroulantes en cascade Power Apps. En effet, il faut au moins connexions car il y a deux listes SharePoint à connecter.

Pour ce faire, dans le menu du haut, cliquez sur le ruban Affichage.

Ensuite, sous Affichage, cliquez sur Source de données : le volet Source de données apparaît à gauche.

Puis, en haut du volet Source de données, cliquez dans la zone Rechercher…

Ensuite, dans cette zone de recherche, saisissez SharePoint puis cliquez sur l’icône bleue SharePoint aide les organisations à partager : ne cliquez pas sur les icônes violettes Common Data Service.

Puis, dans la liste qui s ‘affiche, cliquez sur la première connexion SharePoint : la liste des sites récents apparaît.

Patientez quelques instants.

Puis, dans cette liste, sélectionnez votre site SharePoint.

Ensuite, sous Choisir une liste, cochez la case lstAffaires, puis cliquez sur Se connecter (en bas du volet).

Enfin, lorsque la connexion est terminée, cliquez sur la croix en haut et à droite du volet Source de données pour fermer ce volet.

Insérer et définir un premier contrôle Liste déroulante

Pour obtenir des listes déroulantes en cascade Power Apps, vous devez insérer un premier contrôle de type liste déroulante.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran Screen1.

Ensuite, cliquez sur le ruban Insérer puis cliquez sur Contrôles puis cliquez sur Liste déroulante : une liste déroulante apparaît sur l’écran Screen1. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1: Dropdown1.

Puis, dans l’arborescence, double-cliquez sur Dropdown1, et nommez-le : ListeDeroulanteFournisseur.

Ensuite, définissez les propriétés suivantes de ListeDeroulanteFournisseur :

Items = Distinct(lstAffaires.FournisseurID;FournisseurID)

Cette liste déroulante affiche les identifiants des fournisseurs. Chaque identifiant est un nombre qui se termine par 5.

La fonction Distinct() élimine les doublons d’une liste de valeurs. Par ailleurs, elle retourne une table à une colonne des résultats avec des valeurs en double supprimées. Le nom de la colonne est result. Dans le cas présent, la fonction dédoublonne les valeurs en double de la colonne FournisseurID.

Petite astuce : la fonction Dictinct() permet de forcer l’alimentation d’une liste déroulante. En effet, il arrive que Power Apps ne renseigne pas le champ de la liste déroulante lors du premier accès à l’écran. L’utilisation, même temporaire, de cette fonction oblige Power Apps à alimenter la liste déroulante.

Insérer et définir un second contrôle Liste déroulante

Pour obtenir des listes déroulantes en cascade Power Apps, vous devez insérer un deuxième contrôle de type liste déroulante.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran Screen1.

Ensuite, cliquez sur le ruban Insérer puis cliquez sur Contrôles puis cliquez sur Liste déroulante : une liste déroulante apparaît sur l’écran Screen1. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1: Dropdown1.

Puis déplacez légèrement le contrôle sous le premier, afin de bien voir les deux contrôles.

Ensuite, dans l’arborescence, double-cliquez sur Dropdown1, et nommez-le : ListeDeroulanteAffaires.

Ensuite, définissez les propriétés suivantes de ListeDeroulanteAffaires :

Items = Distinct(Filter(lstAffaires;FournisseurID = ListeDeroulanteFournisseur.Selected.Result);Titre)

Cette liste déroulante affiche les affaires qui dépendent du fournisseur sélectionné dans la liste déroulante précédente.

Insérer et définir un contrôle Formulaire d’affichage

Pour afficher le détail de votre sélection, dans votre application de listes déroulantes en cascade Power Apps, vous devez insérer un contrôle de type formulaire.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran Screen1.

Ensuite, cliquez sur le ruban Insérer puis cliquez sur Formulaires puis cliquez sur Affichage : un formulaire d’affichage apparaît sur l’écran Screen1.

Ensuite, définissez les propriétés suivantes du formulaire d’affichage :

DataSource = lstAffaires

Ensuite, cliquez sur le lien Choisissez les champs à ajouter à partir du volet Personnalisation. Ce lien se trouve dans le formulaire.

Puis, dans le volet Champs qui s’ouvre, cliquez sur Ajouter un champ.

Ensuite, cochez :

  • Titre
  • Responsable
  • MontantHT

Puis cliquez sur le bouton Ajouter.

Enfin, fermez le volet Champs.

Ensuite, dans l’onglet Propriétés, modifiez la valeur de la propriété Colonnes de 3 à 1 : les champs se retrouvent l’un en-dessous de l’autre.

Ensuite, définissez les propriétés suivantes du formulaire d’affichage :

  • Item = LookUp(lstAffaires; Titre = ListeDeroulanteAffaires.Selected.Result)
  • Heigh = 358
  • Width = 436
  • X = 146
  • Y = 200

Dans ce scénario, la fonction LookUp() cherche dans la liste lstAffaires, l’élément dont le titre est égal au choix de la seconde liste déroulante.

La fonction LookUp() utilise 2 paramètres. Le premier paramètre indique la source de données utilisée. Le second paramètre est une formule de filtre.

Enregistrer et tester l’application

Pour tester votre application des listes déroulantes en cascade Power Apps, vous devez l’enregistrer.

Pour ce faire, Cliquez sur le ruban Fichier puis dans le volet de gauche, cliquez sur Enregistrer.

Ensuite, cliquez sur la flèche en haut et à gauche pour revenir à l’accueil.

Puis, appuyez sur la touche F5.

Enfin procédez à des tests.

Résultat des listes en cascade
Résultat des listes en cascade

Puis, une fois vos vérifications terminées, fermez la fenêtre en cliquant sur la croix en haut et à droite ou sur Échap du clavier.

Ensuite, fermez l’onglet de votre application : un pop-up apparaît pour confirmer la fermeture. Dans ce pop-up, cliquez sur le bouton Quitter la page. Vous retrouverez votre application sous le menu Applications de l’accueil du site Power Apps.

La manipulation est terminée.

Bonus : tri des éléments des listes déroulantes.

Les listes déroulantes ne sont pas triées.

Vous devez les trier dans l’ordre alphabétique du résultat.

Pour cela, utilisez la fonction SortByColumns() pour trier les éléments des listes déroulantes en ordre descendant.

Pour savoir comment utiliser la fonction SortByColumns(), consultez la page de Microsoft dédiée aux fonctions : https://coudr.com/powfn.

Résumé

Dans cette manipulation, vous avez appris comment réaliser des listes en cascade dans Power Apps, à partir d’une source de données.

Vous avez aussi vu comment afficher le résultat d’une sélection d’une liste déroulante.

Commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *