Visa, sortera och filtrera data i ett arbetsyteapp-galleri

Skapa ett galleri om du vill visa bilder och text för flera produkter och sortera och filtrera den informationen.

I Power Apps kan du använda ett galleri för att visa flera relaterade objekt, precis som du ser dem i en katalog. Gallerier är mycket användbara för att visa information om produkter, till exempel namn och priser. I det här ämnet skapar vi ett galleri och sorterar och filtrerar informationen med Excel-liknande funktioner. När ett objekt markeras placeras även en kantlinje runt objektet.

Förutsättningar

• Registrera dig för Power Apps och logga in med samma autentiseringsuppgifter som du använde när du registrerade dig.
• Skapa en surfplatteapp från en mall, från data eller från grunden.
• Lär dig hur du konfigurerar en kontroll.
• I de här stegen används CreateFirstApp som inkommande exempeldata, vilket inkluderar .jpg-bilder. Zip-filen innehåller en XML-fil som kan konverteras till Excel. I annat fall läser Power Apps automatiskt filerna i zip-filerna och importerar dem korrekt. Du kan hämta och använda dessa exempeldata eller importera egna.

Visa data i ett galleri

1. Skapa en samling som heter Inventory med dina exempeldata. Dessa steg ingår:

   1. Välj Controls på fliken Insert och välj sedan Importera:

      

   2. Ställ in OnSelect-egenskapen för importkontrollen till följande formel:
      Collect(Inventory, Import1.Data)

      

   3. Välj Import Data-knappen för att öppna Windows Explorer. Välj CreateFirstApp.zip och välj Open.

   4. Välj Collections på File-menyn. Inventeringssamlingen förses med de data som du har importerat:

      

      Du har precis skapat en inventeringssamling som innehåller information om fem produkter, inklusive en designbild, namnet på produkten och antal enheter i lager.

      Anteckning

      Importkontrollen används för att importera Excel-liknande data och skapa samlingen. Importkontrollen importerar data när du skapar din app och förhandsgranskar din app. För närvarande importerar importkontrollen inte data när du publicerar din app.

2. Välj bakåtpilen för att återgå till designern.

3. Klicka eller tryck på Galleri på fliken Infoga och klicka eller tryck sedan på galleriet Vågrätt.

   

4. Klicka eller tryck på det alternativ där rubriken och undertexten överlappar bilden i rutan till höger:

   

5. Ställ in galleriets Items-egenskap till Inventory:

   

6. Byt namn på galleriet till ProductGallery och flytta galleriet så att det inte blockerar andra kontroller. Ändra storlek på galleriet så att det visar tre produkter:

   

7. Välj den nedersta etiketten i det första objektet i galleriet:

   

   Anteckning

   När du ändrar det första objektet i något galleri, ändrar du automatiskt alla andra objekt i galleriet.

8. Ställ in Text-egenskapen för etiketten till följande uttryck:
   ThisItem.UnitsInStock
   

   När du gör detta visar etiketten de enheter som finns i lager för varje produkt:

Med de här stegen importerade du data som innehåller .jpg-bilder i en samling. Du lade sedan till ett galleri som visar dina data och konfigurerade en etikett för att visa de enheter som finns i lager för varje produkt.

Markera den galleriartikel som du väljer

1. Markera valfri artikel i galleriet , med undantag för det första. Redigeringsikonen visas (övre vänstra hörnet). Välj redigeringsikonen:
   

2. Välj Shapes på fliken Insert och välj därefter rektangeln. En blå solid rektangel visas på varje galleriartikel.

3. På Home-fliken väljer du Fill och sedan No FIll.

4. Välj Border och Border Style och välj sedan heldragen linje.

5. Välj Border igen och ange tjockleken till 3. Ändra storleken på rektangeln så att den omger galleriartikeln. Objekten i galleriet har nu en blå kantlinje och bör se ut ungefär så här:
   

6. På fliken Form väljer du Synlig och anger sedan följande formel i formelfältet:

   If(ThisItem.IsSelected, true)

   En blå rektangel omger den aktuella markeringen i ett galleri. Markera några galleriartiklar för att bekräfta att rektangeln visas runt varje objekt som du markerar. Kom ihåg att du även kan öppna förhandsversion för att visa och testa det som du skapar.

Med de här stegen har du lagt till en kantlinje kring det aktuella valet i galleriet.

Sortera och filtrera objekt i galleriet

I följande steg ska vi sortera galleriartiklarna i stigande och fallande ordning. Dessutom ska vi lägga till ett skjutreglage för att ”filtrera” galleriartiklar efter de enheter som finns i lager som du väljer.

Sortera i stigande eller fallande ordning

1. Markera valfri artikel i galleriet , med undantag för det första.

2. Items-egenskapen är för närvarande inställd på Inventory (namnet på din samling). Ändra det till följande:

   Sort(Inventory, ProductName)

   När du gör detta, sorteras objekten i galleriet efter produktnamn i stigande ordning:

   Prova fallande ordning. Ställ in egenskapen Items för galleriet till följande formel:

   Sort(Inventory, ProductName, Descending)

Lägg till en skjutreglage och filtrera objekten i galleriet

1. Lägg till en Reglage-kontroll (fliken Insert > Controls), byt namn på den till StockFilter och placera den under galleriet.

2. Konfigurera skjutreglaget så att användare inte kan ställa in det till ett värde utanför intervallet för enheter i lager:

   1. På fliken Content väljer du Min och anger sedan följande uttryck:
      Min(Inventory, UnitsInStock)
   2. På fliken Content väljer du Max och anger sedan följande uttryck:
      Max(Inventory, UnitsInStock)

3. Markera valfri artikel i galleriet , med undantag för det första. Ställ in Items-egenskapen för galleriet till följande uttryck:
   Filter(Inventory, UnitsInStock<=StockFilter.Value)

4. I Preview justerar du skjutreglaget till ett värde som ligger mellan det högsta och lägsta antalet i galleriet. När du justerar skjutreglaget, visar galleriet endast de produkter som understiger det värde som du väljer:
   

Nu ska vi lägga till vårt filter:

1. Gå tillbaka till designern.
2. På fliken Insert väljer du Text och Input Text och byter namn på den nya kontrollen till NameFilter. Flytta textkontrollen under skjutreglaget.
3. Ställ in Items-egenskapen för galleriet till följande uttryck:
   Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
4. I Förhandsgranskning ställer du in skjutreglaget till 30 och skriver in bokstaven g i kontrollen för Textinmatning. Galleriet visar den enda produkten med mindre än 30 enheter i lager och har ett namn med bokstaven ”g”:
   

Tips och råd

• Du kan när som helst välja förhandsgranskningsknappen () för att se vad du har skapat och testa det.
• När du utformar din app kan du ändra kontrollernas storlek och flytta dem genom att klicka och dra.
• Tryck på ESC eller välj X för att stänga förhandsgranskningsfönstret.
• När du använder ett galleri väljer du det första objektet i galleriet för att ändra alla objekt i galleriet. Välj till exempel det första objektet för att lägga till en kantlinje till alla objekt i galleriet.
• Markera valfritt objekt i galleriet med undantag för det första om du vill uppdatera egenskaperna för galleriet. Markera till exempel det andra objektet för att uppdatera Items, ShowScrollbar och andra egenskaper som gäller för galleriet (inte objekten i galleriet).

Det här har du lärt dig

I det här ämnet har du:

• Skapat en samling, importerat data som innehåller .jpg-bilder i samlingen och visat dessa data i ett galleri.
• Under varje bild i galleriet konfigurerat en etikett som visar enheter i lager för objektet.
• Lagt till en kantlinje runt det objekt som du väljer.
• Sorterat objekten efter produktnamn i stigande och fallande ordning.
• Lagt till ett skjutreglage och en kontroll för inmatningstext för att filtrera produkterna efter enheter i lager och produktnamn.