Vise, sortere og filtrere data i et lærredapp-galleri

Opret et galleri for at vise billeder og tekst om flere produkter, og sortér og filtrer disse oplysninger.

I Power Apps kan du bruge et galleri til at vise flere relaterede varer på samme måde som i et katalog. Gallerierne er velegnede til at vise oplysninger om produkter, f.eks. navne og priser. I dette emne opretter vi et galleri og sorterer og filtrerer oplysningerne ved hjælp af Excel-lignende funktioner. Og når en vare er markeret, anbringes der en ramme rundt om varen.

Forudsætninger

• Tilmeld dig for Power Apps, og log på ved hjælp af de samme legitimationsoplysninger, som du brugte ved tilmeldingen.
• Opret en tabletapp ud fra en skabelon, ud fra data eller fra bunden.
• Få mere at vide om, hvordan du konfigurerer et kontrolelement.
• I disse trin bruges CreateFirstApp som eksempeldata, og de indeholder .jpg-billeder. Zip-filen indeholder en XML-fil, der kan konverteres til Excel. Ellers læser Power Apps automatisk filerne i .zip-filerne og importerer dem. Du kan downloade og bruge disse eksempeldata eller importere dine egne.

Vise data i et galleri

1. Opret en samling kaldet Lager ved hjælp af eksempeldataene. Trinnene omfatter:

   1. Vælg Kontrolelementer i menuen Indsæt, og vælg derefter Importér:

      

   2. Angiv egenskaben OnSelect for importkontrolelementet til denne formel:
      Collect(Inventory, Import1.Data)

      

   3. Vælg knappen Importér data for at åbne Windows Stifinder. Vælg CreateFirstApp.zip, og vælg Åbn.

   4. Vælg Samlinger i menuen Filer. Samlingen Lager vises med de data, du har importeret:

      

      Du har netop oprettet samlingen Lager, der indeholder oplysninger om fem produkter, herunder et billede af designet, navnet på produktet og antallet af enheder på lager.

      Bemærk

      Importkontrolelementet bruges til at importere Excel-lignende data og oprette samlingen. Importkontrolelementet importerer data, når du opretter din app og får vist din app. I øjeblikket importerer importkontrolelementet ikke data, når du publicerer din app.

2. Vælg Pil tilbage for at vende tilbage til designeren.

3. Klik eller tryk på Galleri under fanen Indsæt, og klik eller tryk derefter på galleriet Vandret.

   

4. I højre rude skal du klikke eller trykke på den indstilling, hvor titlen og undertitlen overlejrer grafikken:

   

5. Angiv egenskaben Items for galleriet til Lager:

   

6. Omdøb galleriet til Produktgalleri, og flyt galleriet, så det ikke blokerer for de andre kontrolelementer. Tilpas størrelsen på galleriet, så det viser tre produkter:

   

7. Vælg den nederste etiket i det første element i galleriet:

   

   Bemærk

   Når du ændrer det første element i et galleri, ændrer du automatisk alle andre elementer i galleriet.

8. Angiv egenskaben Text for etiketten til følgende udtryk:
   ThisItem.UnitsInStock
   

   Når du gør det, viser etiketten antallet af enheder på lager for hvert produkt:

Ved hjælp af disse trin har du importeret data, der indeholder .jpg-billeder, til en samling. Du har derefter tilføjet et galleri, der viser dataene, og konfigureret en etiket til at vise antallet af enheder på lager for hvert produkt.

Fremhæve det gallerielement, du vælger

1. Vælg et hvilket som helst element i galleriet undtagen det første. Redigeringsikonet vises (øverste venstre hjørne). Vælg redigeringsikonet:
   

2. Vælg Figurer under fanen Indsæt, og vælg derefter rektanglet. Et blåt udfyldt rektangel vises i de enkelte gallerielementer.

3. Under fanen Start skal du vælge Udfyldning og derefter vælge Ingen udfyldning.

4. Vælg Ramme, vælg Rammetype, og vælg derefter den udfyldte linje.

5. Vælg Ramme igen, og angiv tykkelsen til 3. Skift størrelsen på rektanglet, så det omgiver gallerielementet. Elementer i galleriet har nu en blå ramme og ser sådan ud:
   

6. Under fanen Figur skal du vælge Visible og derefter angive følgende formel på formellinjen:

   If(ThisItem.IsSelected, true)

   Et blåt rektangel omgiver den aktuelle markering i et galleri. Vælg et par gallerielementer for at kontrollere, at rektanglet vises rundt om alle de elementer, du vælger. Husk, at du kan også åbne Eksempelvisning for at se og teste det, du opretter.

Ved hjælp af disse trin har du tilføjet en ramme omkring den aktuelle markering i galleriet.

Sortere og filtrere elementer i galleriet

I disse trin vil vi sortere gallerielementerne i stigende og faldende rækkefølge. Desuden tilføjer vi en skyder til 'filtrering' af gallerielementer efter enheder på lager, som du vælger.

Sortere i stigende eller faldende rækkefølge

1. Vælg et hvilket som helst element i galleriet undtagen det første.

2. Egenskaben Items er angivet til Lager (navnet på din samling). Du kan ændre det til følgende:

   Sort(Inventory, ProductName)

   Når du gør det, sorteres elementerne i galleriet efter produktets navn i stigende rækkefølge:

   Prøv at sortere i faldende rækkefølge. Angiv egenskaben Items for galleriet til følgende formel:

   Sort(Inventory, ProductName, Descending)

Tilføje en skyder og filtrere elementer i galleriet

1. Tilføj en skyder (fanen Indsæt > Kontrolelementer), omdøb den til StockFilter, og flyt den under galleriet.

2. Konfigurer skyderen, så brugere ikke kan konfigurere den til en værdi uden for området for antal enheder på lager:

   1. Under fanen Indhold skal du vælge Min og derefter angive følgende udtryk:
      Min(Inventory, UnitsInStock)
   2. Under fanen Indhold skal du vælge Maks og derefter angive følgende udtryk:
      Max(Inventory, UnitsInStock)

3. Vælg et hvilket som helst element i galleriet undtagen det første. Angiv egenskaben Items for galleriet til følgende udtryk:
   Filter(Inventory, UnitsInStock<=StockFilter.Value)

4. I Eksempel skal du justere skyderen til en værdi, der er mellem det højeste og det laveste antal i galleriet. Når du justerer skyderen, viser galleriet kun de produkter, der er mindre end den værdi, du vælger:
   

Lad os nu tilføje vores filter:

1. Gå tilbage til designeren.
2. Under fanen Indsæt skal du vælge Tekst, vælge Inputtekst og omdøbe det nye kontrolelement til NameFilter. Flyt tekstkontrolelementet under skyderen.
3. Angiv egenskaben Items for galleriet til følgende udtryk:
   Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
4. I Eksempel skal du indstille skyderen til 30 og skrive bogstavet g i kontrolelementet til tekstinput. Galleriet viser det eneste produkt med mindre end 30 enheder på lager, og som har et navn med bogstavet "g":
   

Tip og trick til

• Du kan når som helst vælge knappen Eksempelvisning () for at se, hvad du har oprettet, og teste det.
• Når du designer din app, kan du ændre størrelsen på kontrolelementer og flytte dem rundt ved hjælp af klik og træk.
• Tryk på ESC, eller vælg X for at lukke eksempelvinduet.
• Når du bruger et galleri, kan du markere det første element i galleriet for at ændre alle elementer i galleriet. Vælg f.eks. det første element for at føje en ramme til alle elementer i galleriet.
• Hvis du vil opdatere egenskaberne for galleriet, skal du vælge et element i galleriet undtagen det første. Du kan f.eks. vælge det andet element for at opdatere Items , ShowScrollbar og andre egenskaber, der gælder for galleriet (ikke elementerne i galleriet).

Det har du lært

I dette emne har du:

• Oprettet en samling, importeret data, der indeholder .jpg-billeder, til denne samling og vist dataene i et galleri.
• Konfigureret en etiket, der viser en liste over enheder på lager for den pågældende vare, under de enkelte billeder i galleriet.
• Tilføjet en ramme omkring det element, du har valgt.
• Sorteret elementerne efter produktnavn i stigende og faldende rækkefølge.
• Tilføjet en skyder og et kontrolelement for inputtekst for at filtrere produkter efter antal enheder på lager og produktnavn.