Précédent

Suivant

Exercice : utiliser des données externes dans une application canevas

Effectué

Dans cet exercice, vous allez travailler avec des données externes dans votre application canevas, en ajoutant une source de données à votre application, en créant/modifiant des données à l’aide de collections et en modifiant des données au moyen de la fonction Patch.

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 ExternalData. Sélectionnez le format Tablette.

3. Veillez à ajouter la feuille Excel (lien ci-dessus) à OneDrive.

4. À partir du bouton Insérer dans le ruban d’en-tête, sélectionnez l’option Vertical gallery.

5. Dans le volet Sélectionner une source de données de votre galerie, tapez « OneDrive » dans le champ de recherche, puis sélectionnez OneDrive Entreprise dans la liste. Vous pouvez également développer Connecteurs et parcourir les connecteurs disponibles jusqu’à ce que vous trouviez OneDrive Entreprise.

   

6. Sous Ajouter une connexion, sélectionnez la connexion que vous souhaitez utiliser pour OneDrive Entreprise. (Celle-ci a une adresse e-mail répertoriée en dessous.)

   

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

8. Lorsque vous êtes invité à Choisir un fichier Excel, recherchez le fichier Excel que vous avez téléchargé à l’étape 3 ou accédez-y, puis sélectionnez-le.

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

   

Votre galerie est désormais connectée à votre table Excel dans OneDrive Entreprise et vous pouvez afficher les données dans le contrôle Galerie.

Afficher et interagir avec des données dans une 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 Propriétés à droite, cliquez sur le bouton Modifier pour la propriété Fields et définissez les champs comme suit (notez que les contrôles sont numérotés, par exemple Corps sera « Body1 » ; voir l’image ci-dessous pour référence) :

   • Body : Description

   • Image : Image

   • Subtitle : UnitPrice

   • Title : Name

   

5. Fermez la boîte de dialogue Données. (Cliquez sur le X en haut à droite.)

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. Remplacez la propriété Fit par Fill. L’image s’agrandit alors pour remplir les dimensions du contrôle Image.

Vous avez maintenant ajouté, personnalisé et configuré des données dans votre galerie.

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

1. Cliquez sur Screen1 (n’importe où en dehors de la galerie).

2. Ajoutons un bouton en cliquant sur le bouton Insérer dans le ruban de l’application. Sélectionnez Bouton, puis positionnez le nouveau bouton sous votre galerie.

3. Remplacez le Texte sur le bouton par Ajouter à la collection, et ajustez la Taille de la police de 15 à 12 afin que le texte s’adapte au bouton sur une seule ligne.

4. Cliquez sur le bouton puis, dans la barre de formule, remplacez la valeur false de la propriété OnSelect par cette expression :

    Collect(colItemsCollection, Items)`
   

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

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

   Collect : copiera tous les enregistrements de la source de données Items dans la collection colItemsCollection.

   

5. Cliquez sur le bouton Version préliminaire en haut de l’éditeur Power Apps à droite (ou appuyez sur la touche F5) pour passer en mode Version préliminaire. Cliquez sur le bouton Ajouter à la collection et quittez le mode Version préliminaire. Vous pouvez également maintenir la touche Alt enfoncée et cliquer sur le bouton Ajouter à la collection.

6. Dans le rail de gauche, cliquez sur le bouton Variables, développez l’option Collections et sélectionnez les points de suspension en regard de colItemsCollection que vous avez créé. Cliquez sur l’option Afficher la table.

   

7. Une fenêtre contextuelle devrait s’afficher, avec la table stockée dans votre collection. Notez que les trois enregistrements de la source de données Items ont été ajoutés à la collection colItemsCollection. Vous pouvez afficher toutes les collections et d’autres variables de votre application à l’aide de cette technique.

   

8. Cliquez sur Annuler pour fermer la vue contextuelle et revenir au canevas de votre application.

Explorer d’autres fonctions utilisables avec les collections

1. Dans l’Arborescence, cliquez sur Nouvel écran >Vide.

2. Cliquez sur le bouton Insérer, recherchez Données, puis sélectionnez Table de données.

   

3. Dans le volet de dialogue Sélectionner une source de données pour votre nouvelle table de données, sélectionnez colItemsCollection.

   

   Nous avons désormais défini la collection colItemsCollection comme source de données pour ce contrôle et non la table Éléments dans la feuille Excel. L’étape suivante consiste à définir les champs que nous souhaitons afficher.

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

5. Cliquez sur Ajouter un champ.

6. Sélectionnez tous les champs disponibles, puis cliquez sur Ajouter.

   

7. Fermez le volet Données. (Cliquez sur le X vers la droite de Données.)

8. Insérez un bouton en cliquant sur Insérer dans le ruban et en sélectionnant Bouton, puis positionnez votre bouton sous votre table. Ajoutez trois autres boutons de gauche à droite, sous le contrôle de la table de données sur votre écran.

9. Définissez le texte des quatre boutons sur Ajouter une colonne, Supprimer la colonne, Afficher la colonne, Renommer la colonne respectivement. Pour ce faire, double-cliquez simplement sur chaque bouton et saisissez le nouveau nom. Ajustez la taille de la police du bouton Renommer la colonne en le définissant sur 12, afin qu’il tienne sur une seule ligne.

10. Cliquez sur le bouton Ajouter une colonne et mettez à jour la propriété OnSelect en saisissant cette expression :

    Collect(colAddCollection, AddColumns(colItemsCollection, "Revenue", UnitPrice * UnitsSold))
    

    Le fait de cliquer sur ce bouton crée une collection nommée colAddCollection, qui récupère les données de la collection colItemsCollection et, grâce à la fonction AddColumns, les ajoute à une nouvelle colonne dénommée Chiffre d’affaires, qui est calculée comme suit : UnitPrice * UnitsSold.

11. Cliquez sur le bouton Supprimer colonne sur le canevas et mettez à jour la propriété OnSelect en saisissant cette expression :

    Collect(colDropCollection, DropColumns(colItemsCollection, "UnitPrice"))
    

    Le fait de cliquer sur ce bouton crée une collection nommée colDropCollection, qui copie toutes les données de la collection colItemsCollection et, grâce à la fonction DropColumns, supprime la colonne UnitPrice.

12. Cliquez sur le bouton Afficher la colonne et mettez à jour la propriété OnSelect en saisissant cette expression :

    Collect(colShowCollection, ShowColumns(colItemsCollection, "Name"))
    

    Le fait de cliquer sur ce bouton crée une collection nommée *colShowCollection, qui inclut toutes les données de la collection colItemsCollection, et qui utilise la fonction ShowColumns pour afficher uniquement la colonne Nom.

13. Cliquez sur le bouton Renommer la colonne et mettez à jour la propriété OnSelect en saisissant cette expression :

    Collect(colRenameCollection, RenameColumns(colItemsCollection, "Name", "Product"))
    

    Le fait de cliquer sur ce bouton crée une collection nommée colRenameCollection, qui inclut toutes les données de la collection colItemsCollection et qui, grâce à la fonction RenameColumns remplace la colonne Nom par la colonne Produit.

    Une fois que vous avez terminé, vos boutons devraient ressembler à ceci :

    

14. Cliquez sur le bouton Version préliminaire (ou Lecture) en haut de l’éditeur Power Apps à droite pour passer en mode Version préliminaire. Cliquez sur les quatre boutons. Quittez ensuite le mode Version préliminaire. Nous venons de créer quatre collections supplémentaires.

15. Jetons un œil aux quatre nouvelles collections que nous avons créées. Cliquez sur Variables>Collections, puis sélectionnez les trois points de suspension sur colAddCollection, puis View Table. Vous remarquerez que votre fenêtre contextuelle Variables contient un menu sur le côté gauche qui affiche les quatre nouvelles collections que nous avons créées, ainsi que la collection d’origine. Vous pouvez sélectionner chacune d’elles pour voir l’effet sur la collection d’origine affichée dans notre table de données.

    colAddCollection

    
    colDropCollection

    colShowCollection

    colRenameCollection

    

    Fermez la fenêtre contextuelle Variables après l’avoir examinée. Gardez à l’esprit que les collections sont des tables de données temporaires, lesquelles sont uniquement disponibles lorsque l’application est en cours d’utilisation, et uniquement pour l’utilisateur actuel. Par conséquent, une fois que vous fermez l’application, celles-ci disparaissent.

Utiliser la fonction Patch

1. Revenez à Screen 1 dans votre application.

2. Ajoutez un contrôle Libellé de texte (cliquez sur le bouton Insérer, puis sélectionnez Libellé de texte). Renommez la propriété Text pour l’intituler Product Name. Pour ce faire, double-cliquez sur le libellé et entrez votre saisie directement dans le contrôle. Positionnez ensuite le libellé en regard de la galerie.

   Astuce

   Une technique simple pour copier-coller rapidement un contrôle consiste à sélectionner le contrôle, maintenir la touche Ctrl enfoncée et appuyer sur C, puis (tout en maintenant la touche Ctrl enfoncée) appuyer sur V. Votre élément est alors collé légèrement en dessous et à droite du contrôle que vous venez de copier.

3. Une fois le libellé sélectionné, copiez-le et nommez le Text du libellé copié New description.

4. Cliquez à nouveau sur le bouton Insérer pour insérer un contrôle Saisie de texte. Effacez la propriété par défaut et laissez-la vide. Ensuite, copiez ce contrôle et positionnez les deux contrôles Saisie texte en regard des libellés que vous avez créés aux étapes ci-dessus. Votre écran devrait maintenant ressembler à ceci :

   

5. Insérez ensuite un contrôle Bouton et positionnez-le sous vos libellés. Définissez la propriété Text sur Mettre à jour.

6. Sélectionnez le contrôle Saisie de texte à droite du libellé Nom du produit.

7. Dans la barre de formule, assurez-vous que la propriété Default est sélectionnée, puis modifiez l’expression comme suit (gardez à l’esprit que votre contrôle de galerie peut avoir un nom différent de Gallery1 ; modifiez la formule en conséquence) :

   Gallery1.Selected.Name
   

   Ce libellé affiche désormais le Nom de l’enregistrement sélectionné dans la galerie. Vous pouvez tester cela en mettant l’application en mode Version préliminaire (ou en maintenant la touche Alt enfoncée) et en sélectionnant différents éléments de la galerie. Notez que le Nom du produit qui s’affiche change lorsque vous sélectionnez différents éléments de la galerie.

8. Répétez ce processus pour le contrôle Saisie texte à droite du libellé Nouvelle description. Définissez la propriété Default sur la formule suivante :

   Gallery1.Selected.Description
   

   Une autre chose à noter est la barre verticale sombre qui s’affiche sur le côté gauche de l’élément de galerie sélectionné.

9. Cliquez sur le bouton Mettre à jour.

10. Redéfinissez la propriété OnSelect du bouton sur l’expression suivante :

    Patch(Items,LookUp(Items, Name = TextInput1.Text), { Description: TextInput1_1.Text })
    

    Remarque

    Vos contrôles Saisie de texte peuvent avoir des noms différents de cet exemple. Ajustez votre formule en conséquence.

Récapitulons ce que nous avons réalisé. Nous avons créé un moyen de mettre à jour la description de notre produit.

• Patch : permet de modifier ou créer un enregistrement dans votre source de données ; dans le cas présent, nous modifions un enregistrement.

• LookUp : recherche l’enregistrement que nous souhaitons modifier à l’aide du nom de notre produit ; renvoie le premier enregistrement qui correspond à notre condition : Name = TextInput1.Text.

• Une fois que Power Apps trouve l’enregistrement correspondant (au moyen de la fonction LookUp), la Description de l’élément est mise à jour dans la source de données selon ce que vous avez saisi dans le contrôle Saisie texte nommé New Description.

Testez cela en prévisualisant votre application. Sélectionnez l’élément Cannelle dans la galerie, puis remplacez la description actuelle par « Thé vert aromatisé à la cannelle », puis sélectionnez Mettre à jour. La description dans la galerie est alors remplacée par la nouvelle description.

Félicitations ! Vous avez découvert une technique permettant de mettre à jour votre source de données.

Continuer