Exercice : utiliser des collections et manipuler des tables

  • 15 minutes

Au cours de cet exercice, vous allez vous exercer à utiliser des tables. Vous allez créer une collection, filtrer la collection, effectuer une recherche dans la collection, modifier un enregistrement dans la collection, ajouter un enregistrement à une collection et supprimer un enregistrement de la collection.

Créer la collection de données

  1. Connectez-vous à Power Apps.

  2. Sur l’écran d’accueil, cliquez sur + Créer dans le volet de navigation gauche. Ensuite, sélectionnez Application vide.

    Enfin, cliquez sur Créer sous Application canevas vide.

  3. Nommez votre application et cliquez sur Créer.

  4. Cliquez sur l’onglet Insérer, ajoutez un bouton, puis définissez sa propriété OnSelect sur cette formule :

    ClearCollect(CityPopulations, 
{City:"London", Country:"United Kingdom", Population:8615000}, 
{City:"Berlin", Country:"Germany", Population:3562000}, 
{City:"Madrid", Country:"Spain", Population:3165000}, 
{City:"Rome", Country:"Italy", Population:2874000}, 
{City:"Paris", Country:"France", Population:2273000}, 
{City:"Hamburg", Country:"Germany", Population:1760000}, 
{City:"Barcelona", Country:"Spain", Population:1602000}, 
{City:"Munich", Country:"Germany", Population:1494000}, 
{City:"Milan", Country:"Italy", Population:1344000})

  5. Maintenez enfoncée la touche Alt, puis sélectionnez le contrôle Bouton. (Cette opération entraîne la création de votre collection et le stockage de toutes les informations.) Redéfinissez la propriété Text du bouton sur « Recueillir ».

  6. Insérez un contrôle Galerie verticale et choisissez CityPopulations comme source de données. (Vous pouvez également redéfinir la propriété Items de la galerie sur CityPopulations.)

  7. Avec la galerie sélectionnée, dans le volet Propriétés sur le côte droit de l’écran, redéfinissez la propriété Layout sur Titre, sous-titre et corps. Cliquez ensuite sur Fields et redéfinissez l’option déroulante Body sur Population. Consultez l’image ci-dessous.

    Capture d’écran de la nouvelle galerie mettant en évidence les options Data source et Fields dans le volet Propriétés et Population comme choix sélectionné sous Body1.

  8. Toujours avec la galerie sélectionnée, redéfinissez la propriété OnSelect sur la formule suivante :

     Set(varRecord,ThisItem)

Filtrer votre collection

  1. Insérez un contrôle Libellé de texte et redéfinissez la propriété Text sur « Population ». Déplacez-le ensuite vers la droite de la galerie.

  2. Ensuite, insérez un contrôle Curseur et placez-le sous le libellé que nous avons créé. Vous pouvez trouver le contrôle rapidement en saisissant « curseur » dans le champ de recherche.

  3. Sélectionnez le contrôle Curseur, puis redéfinissez la propriété Min sur :

    Min(CityPopulations, Population)

  4. Redéfinissez ensuite la propriété Max sur :

    Max(CityPopulations, Population)

  5. Sélectionnez maintenant la galerie, puis redéfinissez la propriété Items sur :

    Filter(CityPopulations, Population>= Slider1.Value)

  6. Désormais, nous ne verrons que les enregistrements supérieurs à la valeur de curseur sélectionnée. Passez l’application en mode Aperçu et déplacez le curseur pour voir cela à l’œuvre. Avec le curseur complètement à gauche, vous voyez toutes les villes. À mesure que vous déplacez le curseur vers la droite, la liste se rétrécit de sorte que seule Londres reste dans la galerie.

    Animation du filtre de curseur.

Utiliser les fonctions LookUp et Patch

  1. Insérez un contrôle Libellé de texte, redéfinissez la propriété Text sur « City » et placez-le sous le curseur.

  2. Ensuite, insérez un contrôle Liste déroulante et déplacez-le sous le libellé City.

  3. Dans la propriété Items du contrôle Liste déroulante, saisissez la formule suivante :

    CityPopulations.City

  4. Dans la propriété OnChange du contrôle Liste déroulante, saisissez la formule suivante :

    Set(varRecord, LookUp(CityPopulations, City=Self.SelectedText.City))

  5. Insérez un autre contrôle Libellé de texte et redéfinissez la propriété Text sur « Country ».

  6. Insérez un contrôle Saisie de texte et déplacez-le sous le libellé « Country ».

  7. Pour la propriété Default du contrôle Saisie de texte, saisissez varRecord.Country.

  8. Redéfinissez le nom de ce contrôle Saisie de texte sur txtCountry.

  9. Répétez les quatre étapes précédentes pour ajouter des contrôles Libellé de texte et Saisie de texte pour Ville et Population, en redéfinissant les propriétés Default des contrôles Saisie de texte sur varRecord.City et varRecord.Population, respectivement. Ensuite, votre écran devrait ressembler à l’image ci-dessous :

    Capture d’écran d’entrées de texte et de nouveaux libellés.

  10. Maintenant, ajoutez un bouton sur l’écran et placez-le sous l’entrée de texte Population. Redéfinissez la propriété Text sur « Submit ».

  11. Redéfinissez la propriété OnSelect du bouton sur la formule suivante :

    Patch(CityPopulations, varRecord, {Country: txtCountry.Text, City: txtCity.Text, Population: Value(txtPopulation.Text)})

    Remarque

    Nous devons inclure txtPopulation.Text dans un wrapper avec Value(), car l’entrée de texte renvoie une chaîne par défaut et notre collection attend un nombre.

  12. Passez l’application en mode Aperçu et sélectionnez un élément dans la galerie. Modifiez l’une des valeurs, appuyez sur le bouton « Submit » et vous voyez que l’élément a changé dans votre galerie.

  13. Repassez l’application en mode Édition.

Ajouter et supprimer des enregistrements

  1. Sélectionnez le bouton « Submit » et copiez-le. Collez-le trois fois.

  2. Redéfinissez la propriété Text des trois nouveaux boutons sur Clear, New et Remove.

  3. Positionnez les boutons sur deux rangées de deux boutons alignés sur votre bouton Submit d’origine (« New » sous « Submit », « Clear » à droite de « Submit » et « Remove » sous « Clear »).

  4. Appuyez sur la touche Ctrl et sélectionnez les boutons Clear et Remove. Redéfinissez la propriété DisplayMode sur :

    If(IsBlank(varRecord), DisplayMode.Disabled, DisplayMode.Edit)

    Désormais, il est possible de cliquer sur ces boutons seulement si un enregistrement est sélectionné.

  5. Appuyez sur la touche Ctrl et sélectionnez le bouton Remove pour le désélectionner. Redéfinissez la propriété OnSelect du bouton Clear sur la formule suivante :

    Set(varRecord, Blank())

    Vous pouvez maintenant effacer l’enregistrement sélectionné à l’aide de ce bouton. Prévisualisez l’application et cliquez sur votre bouton Clear.

    Notez que les boutons Clear et Remove semblent désactivés.

  6. Avec l’application de nouveau en mode Édition, sélectionnez le bouton Remove. Redéfinissez la propriété OnSelect sur :

    Remove(CityPopulations, varRecord)

  7. Enfin, sélectionnez le bouton New et redéfinissez sa propriété OnSelect sur :

    Collect(CityPopulations, {Country: txtCountry.Text, City: txtCity.Text, Population: Value(txtPopulation.Text)})

  8. Passez votre application en mode Aperçu et essayez d’ajouter un nouvel enregistrement et de supprimer un enregistrement existant.

    Capture d’écran de l’enregistrement venant d’être créé avec le nouvel enregistrement et le bouton New mis en évidence.

Vous savez maintenant utiliser des tables de manière plus approfondie dans Power Apps. Vous pouvez ajouter des fonctionnalités supplémentaires aux différentes propriétés de vos boutons pour une meilleure expérience utilisateur, mais j’espère que cet exercice vous a donné une idée des possibilités offertes.