Exercice : mettre en forme des données avec des applications canevas

  • 15 minutes

Dans cet exercice, vous allez mettre en forme des données dans votre application canevas.

Vous devrez télécharger la feuille de calcul pour mener cet exercice à bien. Sélectionnez Télécharger une fois le lien ouvert. Extrayez la feuille de calcul Excel, puis chargez-la dans OneDrive.

Ajouter une source de données

  1. Connectez-vous à Power Apps.

  2. Créez une application canevas Power Apps à partir de zéro et nommez-la « ShapeData ». Sélectionnez le format Tablette.

  3. Vérifiez que vous avez ajouté cette feuille Excel à votre OneDrive.

  4. Dans l’onglet Insérer, sélectionnez Galerie, puis l’option pour une galerie verticale.

  5. Dans le volet des propriétés à droite, cliquez sur le menu déroulant pour la propriété Data source.

  6. Dans la zone de recherche, saisissez OneDrive Entreprise, puis sélectionnez OneDrive Entreprise dans la liste. Vous auriez également pu développer Connecteurs et parcourir tous les connecteurs disponibles jusqu’à ce que vous trouviez le connecteur OneDrive Entreprise.

  7. Cliquez sur + Ajouter une connexion.

  8. En bas de OneDrive Entreprise, cliquez sur Connecter.

  9. Lorsque vous êtes invité à Choisir un fichier Excel, accédez à l’emplacement où vous avez stocké le fichier Excel que vous avez téléchargé à l’étape 3, puis sélectionnez-le.

  10. Cochez la table Items, puis cliquez sur Connecter.

Vous êtes maintenant connecté à votre table Excel dans OneDrive Entreprise et pouvez afficher les données dans le contrôle Gallery.

Mettre en forme les données dans votre galerie

  1. Sélectionnez la galerie que vous avez ajoutée.

  2. Dans le volet des propriétés à droite, cliquez sur le menu déroulant pour la propriété Layout.

  3. Sélectionnez la présentation Image, titre, sous-titre et corps.

  4. Dans le volet des propriétés à droite, cliquez sur le bouton Modifier pour la propriété columns, puis définissez les points suivants :

    • Body1 : Description

    • Image2 : Image

    • Subtitle2 : UnitPrice

    • Title2 : Nom

  5. Sélectionnez le X vers la droite de Données pour quitter.

  6. Dans la galerie, cliquez sur le prix sur la première ligne.

  7. Dans la barre de formule, assurez-vous que la propriété Text est sélectionnée, puis tapez ce qui suit :

    "$" & ThisItem.UnitPrice

  8. Dans la galerie, cliquez sur l’image sur la première ligne.

  9. Dans le volet des propriétés à droite, cliquez sur le menu déroulant pour la propriété Image Position.

  10. Sélectionnez Remplir afin que l’image remplisse l’espace.

Vous avez maintenant configuré et manipulé les données dans votre galerie.

Filtrer les données dans une galerie

  1. Sélectionnez la galerie.

  2. Assurez-vous que la propriété Items est sélectionnée dans la barre de formule.

  3. Modifiez l’expression comme suit :

    Filter(Items, Origin = "China")

    Notez que la galerie n’affiche plus que deux articles dont l’origine est la Chine.

  4. Tentez de faire la même chose, mais avec l’opérateur And.

    Filter(Items, Origin = "China" And UnitsSold > 25)

    Notez que la galerie n’affiche plus qu’un seul article correspondant aux deux critères ci-dessus.

  5. Maintenant, nous allons définir la propriété Items sur la source de données Items. Nous reviendrons à cette fonction Filter ultérieurement.

    Items

Utilisation de la fonction Search

  1. Dans l’onglet Insérer, sélectionnez Saisie, puis Text Input. Positionnez le contrôle Text Input au-dessus de la galerie.

  2. Dans le volet gauche, sous Arborescence > Écrans > Screen1 >, cliquez sur les trois points à droite, puis sélectionnez Renommer pour donner le nom SearchInput au contrôle Text Input.

    capture d’écran de la vue Galerie dans votre application

  3. Maintenant, cliquez sur la galerie. Assurez-vous que la propriété Items est sélectionnée dans la barre de formule, puis saisissez cette expression :

    Search(Items, SearchInput.Text, "Name")

    Cette expression se compose des éléments suivants :

    Search(Items...) : fonction qui vous permet d’effectuer une requête plus flexible sur une colonne de chaîne.

    SearchInput.Text : élément qui permet de récupérer le texte saisi dans le contrôle Text Input SearchInput.

    "Name" : représente la colonne où la recherche est effectuée.

    Cette expression retourne toutes les lignes où la colonne Name contient la valeur saisie dans le contrôle Text Input SearchInput.

  4. Si vous souhaitez rechercher plusieurs colonnes, vous pouvez ajouter les noms des colonnes à la fin de l’expression.

    Search(Items, SearchInput.Text, "Name", "Description")

Combiner des fonctions de mise en forme des données

Comme expliqué dans l’unité 3, vous pouvez combiner des fonctions pour des fonctionnalités plus complexes dans votre application. Nous avons testé les fonctions Filter et Search et il est maintenant temps de les combiner en une seule fonction.

  1. Commencez par la fonction Search que nous avons configurée à l’étape précédente.

  2. Remplacez Items par Filter(Items, Origin = "Chine"), afin que votre expression ressemble à ceci :

    Search(Filter(Items, Origin = "China"), SearchInput.Text, "Name", "Description")

Pour la fonction Search, la première option que vous devez renseigner est une table de données. La fonction Filter retourne une table de données. Autrement dit, il est possible d’utiliser la fonction Filter comme source de données pour votre fonction Search. En l’ajoutant comme formule pour la propriété Items de votre contrôle Gallery, vous présentez à vos utilisateurs les données dont ils ont besoin tout en leur permettant d’effectuer des recherches.

Dans Power Apps, vous pouvez appliquer le concept d’utilisation d’une fonction pour fournir des informations à une autre fonction à de nombreux endroits.

Déplacer des données entre des collections et des sources de données

  1. Dans l’onglet Insérer, sélectionnez Bouton, puis positionnez votre bouton sous votre galerie.

  2. Définissez le texte du bouton sur Ajouter à la collection.

  3. Sélectionnez le bouton, puis dans la barre de formule, remplacez False par cette expression :

    Collect(ItemsCollection, Items)

    ItemsCollection : fait référence au nom de la collection.

    Items : fait référence au nom de la source de données.

    Collect : copie toutes les lignes de la source de données Items dans la collection ItemsCollection.

  4. Exécutez l’application. Cliquez sur le bouton. Arrêtez l’exécution de l’application.

  5. Dans l’onglet Afficher, sélectionnez Collections, puis ItemsCollection. Vous verrez alors que toutes les lignes de la source de données Items ont été ajoutées à la collection ItemsCollection.

Explorer d’autres fonctions utilisables avec les collections

  1. Dans l’onglet Insérer, sélectionnez Nouvel écran, puis cliquez sur Vide.

  2. Dans l’onglet Insérer, sélectionnez Table de données, puis positionnez ce composant en regard de la galerie.

  3. Dans la barre de formule, assurez-vous que la propriété Items est sélectionnée, puis saisissez ItemsCollection.

    Autrement dit, la source de données de la table est la collection ItemsCollection et non la table Items dans la feuille Excel.

  4. Dans le volet des propriétés à droite, cliquez sur le bouton Modifier les colonnes pour la propriété columns.

  5. Cliquez sur + Ajouter une colonne

  6. Sélectionnez toutes les colonnes disponibles, puis cliquez sur Ajouter.

  7. Sélectionnez le X vers la droite de Données pour quitter.

  8. Dans l’onglet Insérer, sélectionnez Bouton, puis positionnez votre bouton sous votre table. Répétez ce processus quatre fois.

  9. Définissez le texte des quatre boutons sur Ajouter une colonne, Supprimer la colonne, Afficher la colonne, Renommer la colonne respectivement.

  10. Cliquez sur le bouton Ajouter une colonne.

  11. Mettez à jour la barre de formule avec cette expression :

    Collect(AddCollection, AddColumns(ItemsCollection, "Revenue", UnitPrice * UnitsSold))

    Ici, nous avons non seulement créé une collection nommée AddCollection, qui copie toutes les données de la collection ItemsCollection, mais nous utilisons aussi la fonction AddColumns pour ajouter une nouvelle colonne nommée Revenue, qui est calculée comme suit : Prix unitaire * Nombre d’unités vendues.

  12. Cliquez sur le bouton Supprimer la colonne.

  13. Mettez à jour la barre de formule avec cette expression :

    Collect(DropCollection, DropColumns(ItemsCollection, "UnitPrice"))

    Ici, nous avons créé une collection nommée DropCollection, qui copie toutes les données de la collection ItemsCollection, mais nous utilisons également la fonction DropColumns pour supprimer la colonne Prix unitaire.

  14. Cliquez sur le bouton Renommer la colonne.

  15. Mettez à jour la barre de formule avec cette expression :

    Collect(RenameCollection, RenameColumns(ItemsCollection, "Name", "Product"))

    Ici, nous avons créé une collection nommée RenameCollection, qui copie toutes les données de la collection ItemsCollection, mais nous utilisons également la fonction RenameColumns pour renommer la colonne Name en Product.

  16. Cliquez sur le bouton Afficher la colonne.

  17. Mettez à jour la barre de formule avec cette expression :

    Collect(ShowCollection, ShowColumns(ItemsCollection, "Name"))

    Ici, nous avons créé une collection nommée ShowCollection, qui copie toutes les données de la collection ItemsCollection, mais nous utilisons également la fonction ShowColumns pour afficher uniquement la colonne Name.

  18. Exécutez l’application. Cliquez sur les quatre boutons. Arrêtez l’exécution de l’application.

  19. Dans l’onglet Afficher, sélectionnez Collections, puis chacune des collections supplémentaires que vous avez créées pour voir l’effet des fonctions.