Utilisez une collection pour stocker des données qui peuvent être utilisées dans votre application. Une collection est un groupe d’éléments similaires. Par exemple, vous pouvez créer une collection MyImages qui stocke toutes les images des produits vendus par votre société. Dans PowerApps, vous pouvez ajouter votre collection MyImages et créer une application qui affiche toutes les images de ces produits. Dans un autre exemple, vous pouvez créer une collection PriceList qui répertorie les produits et le prix de chaque produit.

Vous pouvez créer et utiliser ces collections dans PowerApps. Commençons.

Conditions préalables

  • Inscrivez-vous à PowerApps, installez-le, ouvrez-le, puis connectez-vous en fournissant les informations d’identification que vous avez utilisées pour vous inscrire.
  • Créez une application ou ouvrez une application existante dans PowerApps.
  • Découvrez comment configurer un contrôle dans PowerApps.
  • Ces étapes utilisent le fichier PriceList.zip comme exemples de données d’entrée. Le fichier zip comprend un fichier XML qui peut être converti au format Excel. Sinon, PowerApps lit automatiquement les fichiers dans les fichiers .zip et les importe. Vous pouvez télécharger et utiliser ces exemples de données ou importer vos propres données.

Créer une collection à une seule colonne

Les étapes suivantes vous montrent comment créer une collection dans votre application à l’aide de la fonction de collecte, et comment ajouter des éléments à votre collection.

  1. Ouvrez votre application.
  2. Dans l’onglet Insérer, sélectionnez Texte, puis Text input :

  3. Dans le coin supérieur gauche, sélectionnez Text1 et affectez au contrôle le nom Destination :

  4. Sous l’onglet Insert (Insertion), sélectionnez Button pour ajouter un contrôle de bouton à votre concepteur. Dans la liste déroulante, la propriété OnSelect est répertoriée. Définissez-la sur la fonction suivante :

    Collect(Destinations, Destination!Text)

    Elle devrait apparaître comme suit :

  5. Sélectionnez le texte du bouton, puis cliquez sur Add (Ajouter) :

  6. Sélectionnez le bouton Add (Ajouter) et déplacez-le sous votre contrôle de texte. Vous pouvez le déplacer n’importe où :

Dans ces étapes, vous avez utilisé la fonction de collecte pour créer une collection nommée Destinations. Vous avez également ajouté un contrôle de bouton et, après l’avoir sélectionné, ajouté des éléments à votre collection. Voyons maintenant ce que vous avez créé :

  1. Cliquez sur l’icône d’aperçu :

  2. Entrez un nom de ville dans la zone, puis sélectionnez le bouton Add (Ajouter).

  3. Entrez des noms de ville supplémentaires et sélectionnez à chaque fois le bouton Add (Ajouter).

  4. Appuyez sur la touche Échap pour fermer la fenêtre d’aperçu.

  5. Consultez votre collection Destinations et observez les valeurs de texte que vous avez saisies. Dans l’onglet File (Fichier), sélectionnez Collections. Le texte que vous avez entré est répertorié :

Crédit supplémentaire

À présent, nous allons lier la collection Destinations à une zone de liste :

  1. Revenez dans l’éditeur.
  2. Dans l’onglet Insert (Insertion), sélectionnez Controls (Contrôles), puis ListBox :

  3. Déplacer la zone de liste pour pouvoir la voir facilement. Définissez la propriété Items sur l’expression suivante :
    Destinations!Value

    Lorsque vous effectuez cette opération, la zone de liste est automatiquement remplie avec les éléments que vous avez entrés précédemment dans la collection Destinations :

Visualisez vos modifications : . Dans la zone de liste, vous pouvez voir les différentes villes que vous avez entrées. Dans le contrôle d’entrée de texte, entrez une nouvelle ville, puis sélectionnez le bouton Ajouter. La zone de liste est automatiquement mise à jour pour inclure la nouvelle ville que vous avez saisie.

Créer une collection à plusieurs colonnes

Les étapes suivantes vous montrent comment créer une collection dans votre application à l’aide de la fonction de collecte, et comment ajouter plusieurs lignes à votre collection.

  1. Sur l’onglet Home (Accueil), ouvrez un nouvel écran.
  2. Dans l’onglet Insérer, sélectionnez Texte, puis Text input.
  3. Renommez le contrôle de texte City :

  4. Insérez un autre contrôle d’entrée de texte et renommez-le en States.

  5. Déplacer les contrôles de texte City et States pour pouvoir visualiser les deux :

    Remarque : Comme dans l’image, vous pouvez remplacer « Text input » par quelque chose comme « City » ou « State ».

  6. Dans l’onglet Insert (Insertion), sélectionnez Button. Définissez la fonction suivante dans la propriété OnSelect :
    Collect(Destinations, {Cities:City!Text, States:States!Text})

    Elle devrait apparaître comme suit :

    Remarque : vous pouvez utiliser cette même fonction pour ajouter des colonnes supplémentaires à cette collection. Par exemple, vous pouvez ajouter un autre contrôle d’entrée de texte pour Country et ajouter une colonne Countries :

    Collect(Destinations, {Cities:City!Text, States:States!Text}, {Countries:Country!Text})

  7. Renommez le contrôle de bouton AddCityStateButton et définissez sa propriété Text sur Add City and State :

Dans ces étapes, vous avez ajouté une colonne Cities et une colonne States à la collection Destinations. Le contrôle de bouton ajoute ces nouveaux éléments de texte à votre collection. Voyons maintenant ce que vous avez créé :

  1. Cliquez sur l’icône d’aperçu :

  2. Tapez du texte dans les zones City et State, puis sélectionnez le bouton Add City and State.
  3. Ajouter d’autres villes et états.
  4. Appuyez sur la touche Échap pour fermer la fenêtre d’aperçu.
  5. Pour afficher les éléments que vous avez ajoutés à la collection Destinations, sélectionnez l’onglet File (Fichier), puis sélectionnez Collections :

Ajouter des colonnes à une collection

Cette procédure pas à pas comporte quelques sections. Lorsque vous aurez terminé, vous saurez comment importer des données dans votre collection, créer une galerie qui affiche des données dans une liste de prix et utiliser un contrôle de curseur qui détermine la quantité d’un produit.

Importer la liste de prix et créer la collection

  1. Téléchargez le fichier zip PriceList.
  2. Dans l’onglet Home (Accueil), ajoutez un nouvel écran.
  3. Dans l’onglet Insert (Insertion), sélectionnez Controls (Contrôles), puis Import (Importer) :

  4. Dans l’onglet Action, sélectionnez OnSelect. Entrez la fonction suivante :

    Collect(PriceList, Import1!Data)

  5. Visualisez votre application. Sélectionnez le bouton Import Data (Importer des données), sélectionnez le fichier PriceList.zip, puis sélectionnez Open (Ouvrir).

  6. Fermez la fenêtre d’aperçu.

  7. Sélectionnez l’onglet File (Fichier), puis Collections. Les éléments PriceList que vous avez importés sont répertoriés :

Ajouter la galerie pour afficher les éléments de la collection

  1. Revenez dans l’éditeur.
  2. Sur l’onglet Insert (Insertion), sélectionnez Gallery, accédez aux galeries personnalisées, puis sélectionnez Portrait :

  3. Renommez la galerie PriceGallery et définissez la propriété Items sur PriceList :

  4. Déplacez la galerie PriceList sous le contrôle Import Data. Sélectionnez les bordures de la galerie et utilisez la fonction cliquer-déposer pour redimensionner la galerie de manière à faire apparaître trois carrés.
  5. Dans la galerie, sélectionnez le premier carré et ajoutez trois libellés (onglet Insert > Label (Insertion > Libellé)).
  6. Redimensionnez et réorganisez les libellés dans une ligne vers le haut du premier carré. Vous obtenez une galerie semblable à ce qui suit :
  7. Définissez la propriété Text de chaque libellé sur l’expression suivante :

    Libellé Définissez la propriété Text sur
    Label1 ThisItem!Name
    Label2 Text(ThisItem!Price, "$#")
    Label3 ThisItem!Maker

    Lorsque vous effectuez cette opération, les libellés sont automatiquement mis à jour avec les valeurs nom, prix et fabricant contenues dans la collection PriceList.

  8. Redimensionnez les étiquettes et la galerie pour supprimer les espaces supplémentaires. Votre écran doit ressembler à ceci :

Ajouter le curseur de quantité et mettre à jour la collection

  1. Dan le menu Insert (Insertion), sélectionnez Controls (Contrôles), puis sélectionnez Slider. Renommez le curseur OrderQty et déplacez-le dans la galerie.
  2. Ajoutez un bouton, définissez sa propriété Text sur Add, et placez-le sous le curseur OrderQty. Votre application doit être semblable à ceci :
  3. Définissez la propriété OnSelect du bouton Add sur l’expression suivante :

    Collect(OrderList, {Name:PriceGallery!Selected!Name, Qty:OrderQty!Value, Cost:OrderQty!Value*LookUp(PriceList, PriceGallery!Selected!Name in Name, Price)});SaveData(OrderList, "orderfile")

    Remarque : lorsque vous sélectionnez ce bouton plus loin dans cette procédure, vous allez créer et enregistrer une collection nommée OrderList. La collection contient le nom d’un produit que vous entrez dans la galerie, une quantité que vous choisissez avec le curseur, et le coût total calculé en multipliant la quantité par le prix du produit.

  4. Sélectionnez l’onglet Screen et définissez la propriété OnVisible sur l’expression suivante :

    If(IsEmpty(PriceList), LoadData(PriceList, "pricefile"));If(IsEmpty(OrderList), LoadData(OrderList, "orderfile"))

Voyons maintenant ce que vous avez créé :

  1. Ouvrez l’aperçu.
  2. Sélectionnez un produit dans la galerie, déplacez le curseur sur la quantité souhaitée, puis sélectionnez le bouton Add (Ajouter).

    Important :

    Lorsque vous sélectionnez un produit, il n’est pas mis en surbrillance. Lorsque nous avons créé la galerie, nous n’avez pas ajouté cette fonctionnalité. Vous devez savoir que le simple fait de cliquer sur un produit suffit pour le sélectionner.

  3. Répétez ces étapes pour ajouter deux autres produits. Appuyez sur Échap pour fermer la fenêtre d’aperçu.

  4. Sur l’onglet File (Fichier), sélectionnez Collections pour afficher un aperçu de la collection OrderList que vous avez créée :

Conseil :

Pour supprimer tous les éléments de la liste des commandes, ajoutez un bouton, définissez sa propriété Text sur Clear et définissez sa propriété OnSelect sur l’expression suivante :
Clear(OrderList);SaveData(OrderList, "orderfile")
Pour supprimer un élément à la fois, affichez la collection OrderList dans une galerie, puis définissez la propriété OnSelect d’un libellé de cette galerie sur l’expression suivante :
Remove(OrderList, ThisItem);SaveData(OrderList, "orderfile")

astuces et conseils

  • Vous pouvez à tout moment sélectionner le bouton d’aperçu ( ) pour afficher vos graphiques et voir leur rendu lorsque vous y ajoutez des données.
  • Lorsque vous concevez votre application, vous pouvez redimensionner les contrôles et les déplacer par cliquer-déplacer.

Ce que vous avez appris

Dans cette rubrique, vous avez effectué les opérations suivantes :

  • Vous avez ajouté la fonction Collect() pour créer une collection dans votre application.
  • Vous avez ajouté un contrôle de bouton et, après l’avoir sélectionné, ajouté des éléments à votre collection.
  • Vous avez utilisé une zone de liste pour ajouter des éléments à votre collection.
  • Vous avez ajouté un contrôle de curseur pour mettre à jour les éléments dans la collection.