Objectif
Dans cet exemple, vous allez procéder à plusieurs personnalisations de l’application Power Apps qui a été générée automatiquement à partir d’une liste SharePoint, dans l’exercice Créer automatiquement une application Power Apps à partir de Sharepoint.
Notamment, vous verrez comment appliquer un formatage conditionnel à la liste afin de faire apparaître en rouge, certains éléments.
Vous verrez aussi comment mettre en œuvre une liste déroulante à l’aide de la fonction Filter(). Cette fonction affiche les éléments sélectionnés selon le critère que vous avez indiqué.
Vous mettrez aussi en œuvre un second filtre pour n’afficher que les éléments qui correspondent à la saisie des premières lettres du titre.
Enfin, vous approfondirez le tri Power Apps, que vous mettrez aussi en œuvre.
Si vous faites des modifications dans votre liste SharePoint, comme l’ajout d’une colonne ou d’un élément, Power Apps ne peut pas le “savoir”. Vous devrez actualiser systématiquement votre connexion de données dans Power Apps pour que vos modifications soient prises en compte.
Pour ce faire, vous cliquerez sur le menu Affichage puis Source de données. En face de la source de données, vous cliquerez sur …, puis Actualiser.
Préparation
- La liste lstAffaires doit exister dans votre site SharePoint.
Modifier une application existante
Ouvrez le site web Microsoft Power Apps.
Dans le volet de gauche, cliquez sur Applications.
Dans le volet central de droite, sous l’onglet Applications récentes, cliquez sur les 3 petits points en face du nom de votre application shpAffaires.
Dans la liste qui apparaît, cliquez sur : Modifier.
Patientez quelques instants. Si vous obtenez un pop-up de bienvenue, cliquez sur le bouton Ignorer : votre application s’ouvre en modification.
Appliquer un formatage conditionnel
Dans l’écran BrowseScreen1, vous souhaitez que le titre des jouets dont le montant hors taxe est supérieur à 20 euros, s’affiche en noir. Le titre des jouets dont le montant hors taxe est inférieur ou égal à 20 euros, s’affiche en rouge.
Dans l’écran BrowseScreen1, cliquez sur BrowseGallery1.
Ensuite, cliquez sur Title1.
Définissez sa propriété Color avec la formule :
If(MontantHT > 20;Color.Black;Color.Red)
Pour vous aider, regardez la copie d’écran ci-dessous.
Filtrer avec une liste déroulante
Dans l’écran BrowseScreen1, vous souhaitez disposer d’une liste déroulante pour filtrer les jouets sur leur état de conservation.
C’est une bonne pratique que la liste des valeurs d’une liste déroulante provienne d’une source de données externes comme une liste SharePoint. Toutefois, pour des raisons pédagogiques et afin d’éviter d’alourdir les manipulations, vous allez alimenter directement cette liste dans l’application.
Définissez l’écran BrowseScreen1 avec la propriété suivante :
OnVisible = ClearCollect( AffairesEtats;
{ Etat: "Tous"};
{ Etat: "Neuf"};
{ Etat: "Comme neuf"};
{ Etat: "Très bon"};
{ Etat: "Bon"};
{ Etat: "Acceptable"} )
La fonction ClearCollect crée une collection nommée AffairesEtats. Cette collection énumère tous les états, ainsi que l’état “Tous” qui permet d’afficher tous les éléments. La collection sera créée et provisionnée lorsque la propriété OnVisible de l’écran BrowseScreen1 sera appelée.
La propriété OnVisible définit le comportement d’une application quand l’utilisateur accède à un écran. Autrement dit quand une action de l’utilisateur dans l’application affiche l’écran. Un simple aperçu F5 dans Power Apps ne déclenche pas l’action.
Vous allez insérer le contrôle de liste dé roulante qui va afficher les valeurs de la collection AffairesEtats.
Pour ce faire, cliquez sur le menu Insérer, puis cliquez sur Contrôles, puis sélectionnez Liste déroulante: le contrôle Dropdown1 est créé.
Vous allez recouvrir le contrôle TextSearchBox1 par le nouveau contrôle et indiquer qu’il est alimenté par la collection AffairesEtats.
Pour ce faire, définissez le contrôle Dropdown1 avec les propriétés suivantes :
Height = 71
Items = AffairesEtats
Width = 640
X = 0
Y = RectQuickActionBar1.Height
Maintenant, vous allez lier le contrôle Dropdown1 au contrôle BrowseGallery1 afin de filtrer les éléments.
Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :
Items = If(Dropdown1.Selected.Etat="Tous";lstAffaires;Filter(lstAffaires;Dropdown1.Selected.Etat = Etat.Value))
La formule est composée d’une fonction If() qui vérifie si l’utilisateur a sélectionné la valeur “Tous”. Si c’est le cas, Items est alimenté par tous les éléments de la liste lstAffaires. Si ce n’est pas le cas, la fonction Filter() s’applique. Dans cette formule, la liste lstAffaires est filtrée pour n’afficher que les éléments dont l’état est identique à l’état sélectionné par l’utilisateur dans la liste déroulante.
Le changement de la formule peut changer l’affectation des champs de la galerie. Vous allez donc vérifier l’affectation et éventuellement la corriger.
Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :
Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier à côté de l’étiquette Champs.
- Dans la zone Body1, sélectionnez Responsable, avec la valeur d’affichage DisplayName. Si c’est déjà le bon champ, ne faites rien.
- Dans la zone Subtitle1, sélectionnez IDaffaire. Si c’est déjà le bon champ, ne faites rien.
- Dans la zone Title1, sélectionnez Title. Si c’est déjà le bon champ, ne faites rien.
Cliquez sur la croix en haut et à droite du volet Données pour fermer ce volet.
Cliquez sur l’écran DetailScreen1.
À partir de l’écran DetailScreen1, appuyez sur la touche F5 de votre clavier. Ensuite, cliquez sur Revenir à la liste (icône < en haut et à gauche) pour revenir à la liste.
Attention. Si vous faites F5 à partir de BrowseScreen1, le sélecteur sera vide. Ce qui est normal, car la propriété OnVisible définit le comportement d’une application quand l’utilisateur accède à un écran.
Si vous êtes face à un sélecteur vide, cliquez sur Créer un élément (icône + en haut et à droite), puis sur le bouton Annuler (icône X en haut et à gauche).
Ensuite, sélectionnez par exemple la valeur Très bon dans la liste déroulante.
Pour vous aider, regardez la copie d’écran ci-dessous.
À plusieurs reprises, changez la valeur de la liste déroulante afin de vérifier que les éléments correspondants s’affichent bien.
À la fin de vos tests, fermez l’application.
Filtrer sur les premières lettres
En plus du filtre précédent sur la liste déroulante, vous souhaitez filtrer les enregistrements du champ Titre en fonction des premières lettres de la zone de recherche. Cela requiert l’utilisation d’une seconde fonction Filter().
Tout d’abord, vous allez faire réapparaître la zone TextSearchBox1 en redimensionnant le contrôle BrowseGallery1, puis en déplaçant le contrôle Dropdown1.
Définissez le contrôle BrowseGallery1 avec les propriétés suivantes :
Y = 222
Grâce à ce paramétrage, vous avez abaissé le point haut du contrôle BrowseGallery1.
Définissez le contrôle Dropdown1 avec la propriété suivante :
Y = 154
Grâce à ce paramétrage, vous avez déplacé vers le bas le contrôle Dropdown1.
Maintenant, vous allez filtrer les enregistrements du champ Titre en fonction des premières lettres de la zone de recherche.
Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :
Items = Filter(If(Dropdown1.Selected.Etat="Tous";lstAffaires;Filter(lstAffaires;Dropdown1.Selected.Etat = Etat.Value));StartsWith(Title;TextSearchBox1.Text))
La formule est composée d’une fonction Filter() qui encapsule la fonction If(). L’explication de cette fonction est donnée dans l’étape précédente.
Afin de mieux comprendre le rôle du Filter(), la formule est réécrite différemment. Faites attention que cette écriture n’est pas valide dans Power Apps. Son rôle est uniquement de vous aider à mieux comprendre la fonction Filter().
Filter("Résultats du If()";StartsWith(Title;TextSearchBox1.Text))
La fonction Filter() n’affiche que les éléments issus du If() dont le titre débute comme les premières lettres saisies dans TextSearchBox1.
Le changement de la formule peut changer l’affectation des champs de la galerie. Vous allez donc vérifier l’affectation et éventuellement la corriger.
Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :
Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier à côté de l’étiquette Champs.
- Dans la zone Body1, sélectionnez Responsable, avec la valeur d’affichage DisplayName. Si c’est déjà le bon champ, ne faites rien.
- Dans la zone Subtitle1, sélectionnez IDaffaire. Si c’est déjà le bon champ, ne faites rien.
- Dans la zone Title1, sélectionnez Title. Si c’est déjà le bon champ, ne faites rien.
Cliquez sur la croix en haut et à droite du volet Données pour fermer ce volet.
Appuyez sur la touche F5 de votre clavier.
Ensuite, sélectionnez par exemple la valeur Très bon dans la liste déroulante.
Saisissez les caractères poup dans la zone de recherche.
Pour vous aider, regardez la copie d’écran ci-dessous.
À la fin de vos tests, fermez l’application.
Trier sur une colonne
Vos utilisateurs souhaitent que le résultat de la liste soit trié sur le titre de l’élément. Cela nécessite d’utiliser la fonction SortByColumns(). Vous trouverez l’aide de la fonction SortByColumns() sur le lien ci-dessous qui présente toutes les fonctions de Power Apps.
Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :
Items = SortByColumns((Filter(If(Dropdown1.Selected.Etat="Tous";lstAffaires;Filter(lstAffaires;Dropdown1.Selected.Etat = Etat.Value));StartsWith(Title;TextSearchBox1.Text)));"Title";If(SortDescending1;Descending;Ascending))
La formule est composée d’une fonction SortByColumns() qui récupère le résultat de la première fonction Filter(). L’explication de cette dernière fonction est donnée dans l’étape précédente.
Afin de mieux comprendre le rôle de SortByColumns(), la formule est réécrite différemment. Faites attention que cette écriture n’est pas valide dans Power Apps. Son rôle est uniquement de vous aider à mieux comprendre la fonction SortByColumns().
SortByColumns("Résultats du Filter()";"Title";If(SortDescending1;Descending;Ascending))
La fonction SortByColumns() trie tous les résultats du Filter() sur la colonne Title. En plus, l’ordre dépend de la variable booléenne SortDescending1. La valeur de cette variable est définie par le contrôle IconSortUpDown1. En effet, la propriété OnSelect de ce contrôle est définie ainsi :
UpdateContext({SortDescending1: !SortDescending1})
Le changement de la formule peut changer l’affectation des champs de la galerie. Vous allez donc vérifier l’affectation et éventuellement la corriger.
Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :
Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier à côté de l’étiquette Champs.
- Dans la zone Body1, sélectionnez Responsable, avec la valeur d’affichage DisplayName. Si c’est déjà le bon champ, ne faites rien.
- Dans la zone Subtitle1, sélectionnez IDaffaire. Si c’est déjà le bon champ, ne faites rien.
- Dans la zone Title1, sélectionnez Title. Si c’est déjà le bon champ, ne faites rien.
Cliquez sur la croix en haut et à droite du volet Données pour fermer ce volet.
Appuyez sur la touche F5 de votre clavier.
Effacez le contenu de la zone de recherche, si des caractères sont toujours présents, comme poup.
Ensuite, sélectionnez par exemple la valeur Très bon dans la liste déroulante.
Cliquez sur Trier (icône avec une flèche montante et descendante).
Pour vous aider, regardez la copie d’écran ci-dessous.
À la fin de vos tests, fermez l’application.
Enregistrer l’application
Cliquez sur le ruban Fichier puis dans le volet de gauche, cliquez sur Enregistrer.
Publier l’application
La publication d’une application la rend disponible auprès des utilisateurs autorisés.
Dans l’écran Enregistrer, cliquez sur Publier : une boîte de dialogue vous informe que la publication donne accès aux utilisateurs dotés d’autorisations.
Dans cette boîte de dialogue, cliquez sur le bouton Publier cette version.
Cliquez sur la flèche en haut et à gauche pour revenir à l’accueil.
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.
L’exercice est terminé.
Résumé
Dans cet exercice, vous avez appris à modifier une application Power Apps SharePoint. Notamment, vous avez vu comment appliquer un formatage conditionnel à la liste afin de faire apparaître en rouge les éléments dont le montant était inférieur à 20 euros.
Vous avez vu aussi comment n’afficher que les éléments qui correspondent au choix d’une liste déroulante, et ceux qui correspondent à la saisie de premières lettres.
Enfin, vous avez découvert le fonctionnement du tri dans Power Apps.
Article mis à jour le 07.04.2020
