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

I PowerApps 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.

Note:

I det här ämnet används en surfplatteapp. Du kan använda en telefonapp men behöver då ändra storlek på vissa kontroller.

Förutsättningar

  • Registrera dig för PowerApps och installera PowerApps. Logga in med samma autentiseringsuppgifter som du använde för att registrera dig när du öppnar PowerApps.
  • 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 PowerApps 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 Import:

    2. Ställ in OnSelect-egenskapen för importkontrollen till följande uttryck:
      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 CollectionsFile-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.

    Note:

    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. Välj Gallery på fliken Insert. Under Image Galleries väljer du det horisontella With Text- bildgalleriet:

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

  5. 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:

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

    Note:

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

  7. 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:

Note:

Som standard är Text-egenskapen för den översta etiketten inställd på ThisItem!ProductName. Du kan ändra det till vilket annat objekt som helst i din samling. Om din samling till exempel har fälten ProductDescription eller Price kan du ställa in etiketten till ThisItem!ProductDescription eller ThisItem!Price.

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. 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 Shape väljer du Visible och anger sedan följande uttryck i funktionsfä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 Preview för att visa och testa det som du skapar.

Tip:

Välj rektangeln, välj ReorderHome-fliken och välj sedan Send to Back. Med den här funktionen kan du välja en galleriartikel utan att kantlinjen blockerar något.

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 Items-egenskapen för galleriet till följande uttryck:
    Sort(Inventory, ProductName, Descending)

Lägg till en skjutreglage och filtrera objekten i galleriet

  1. Lägg till en skjutreglageskontroll (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 Preview ställer du in skjutreglaget till 30 och skriver in bokstaven g i textinmatningsrutan. Galleriet visar den enda produkten med mindre än 30 enheter i lager och har ett namn med bokstaven ”g”:

Tips

  • 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.