Andmete kuvamine, sortimine ja filtreerimine lõuendi rakenduse galeriis

  • Artikkel

Looge Galerii, et kuvada mitme toote pilte ja teksti ning seda teavet sortida ja filteerida.

Rakenduses Power Apps saate kasutada galeriid, et kuvada mitut seotud üksust, just nagu näete kataloogis. Galeriid näitavad suurepäraselt tooteinfot, näiteks nimesid ja hindu. Selles teemas loome galerii ja sordime ning filtreerime teavet Excelile sarnanevate funktsioonide abil. Samuti, kui üksus on valitud, paigutatakse selle üksuse ümber ääris.

Märkus

Selles teemas kasutatakse tahvelarvuti rakendust. Võite kasutada telefonirakendust, kuid peate mõnede juhtelementide suurust muutma.

Eeltingimused

  • Registreerige Power Appsi kasutajaks ja seejärel logige sisse sama identimisteabega, mida kasutasite registreerumiseks.
  • Looge tahvelarvuti rakendus mallist, andmetest või täiesti nullist.
  • Juhtelemendi konfigureerimise teave.
  • Need etapid kasutavad sisendandmete näidet CreateFirstApp, mis sisaldab jpg-pilte. ZIP-fail sisaldab XML-faili, mida saab teisendada Exceli failiks. Vastasel juhul loeb Power Apps .zip failis olevaid faile automaatselt ja impordib selle edukalt. Võite alla laadida ja kasutada neid näidisandmeid või importida enda omad.

  1. Looge näidisandmeid kasutades kogumik nimega Varud. Etapid on järgmised.

    1. Valige vahekaardil Lisa suvand Juhtelemendid ja valige seejärel suvand Impordi.

      Sisestage juhtelement

    2. Seadke impordi juhtelemendi atribuut OnSelect järgmisele valemile.
      Collect(Inventory, Import1.Data)

      OnSelect atribuut

    3. Valige Windows Exploreri avamiseks nupp Impordi andmed. Valige CreateFirstApp.zip ja seejärel Ava.

    4. Valige menüüs Fail suvand Kogumikud. Kogumik Varud on loetletud koos imporditud andmetega.

      Fail – kogud

      Olete äsja loonud varude kogumiku, mis sisaldab teavet viie toote kohta, sh kujunduse pilti, toote nime ja ühikute arvu laos.

      Märkus

      Importimise juhtelementi kasutatakse Excelile sarnanevate andmete importimiseks ja kogumiku loomiseks. Importimise juhtelement impordib andmeid, kui loote rakendust ja vaatate rakenduse eelvaadet. Impordi juhtelement ei impordi praegu andmeid rakenduse avaldamisel.

  2. Valige tagasinool, et naasta tagasi kujundajasse.

  3. Klõpsake või koputage vahekaardil Lisa valikut Galerii ja klõpsake või koputage seejärel galeriil Horisontaalne.

    Galerii – horisontaalne

  4. Klõpsake või koputage parempoolsel paanil või suvandil, milles pealkiri ja alampealkiri katavad graafikat.

    Paigutus

  5. Seadke galerii atribuut Üksused väärtusele Varud:

    Galerii paigutus

  6. Pange galeriile uueks nimeks ProductGallery ja liigutage galeriid, et see ei blokeeriks muid juhtelemente. Muutke galerii suurust nii, et see näitaks kolme toodet.

    Nimeta galerii ümber

  7. Valige galerii esimesest üksusest alumine silt.

    Galeriiga rakendus

    Märkus

    Kui muudate mis tahes galerii esimest üksust, muudate automaatselt kõiki teisi üksusi galeriis.

  8. Seadke sildi atribuut Tekst järgmisele avaldisele.
    ThisItem.UnitsInStock

    Seda tehes kuvatakse etiketil iga toote kohta laos olevad ühikud.

Iga toote varu

Märkus

Vaikimisi on ülemise sildi atribuut Tekst seatud väärtusele ThisItem.ProductName. Saate seda muuta mitahes muuks üksuseks oma kogumikus. Näiteks kui teie kogumikul on väljad ProductDescription või Hind, saate sildi seada väärtusele ThisItem.ProductDescription või ThisItem.Price.

Nende juhiste abil importisite kogumikku andmed, mis sisaldavad .jpg pilte. Seejärel lisasite galerii, kus kuvatakse andmed ja konfigureerisite sildi, et kuvada iga toote laos olevad ühikud.

  1. Valige mis tahes galeriis olev üksus väljaarvatud esimene. Kuvatakse redigeerimise ikoon (vasakus ülanurgas). Valige redigeerimise ikoon.
    Muuda

  2. Valige vahekaardil Lisa suvand Kujundid ja valige seejärel ristkülik. Igasse galeriiüksusessse ilmub ühtlane sinine ristkülik.

  3. Valige vahekaardil Avaleht käsk Täida ja seejärel käsk Ei täida.

  4. Valige Ääris, valige Äärise laad ja seejärel valige ühtlane joon.

  5. Valige uuesti Ääris ja seadke paksuseks 3. Muutke ristkülikut, et see ümbritseks galerii üksust. Teie galerii üksustel on nüüd sinine ääris ja need peaksid sarnanema järgmisega.
    Vali ääris

  6. Valige vahekaardil Kujund valik Nähtav ja seejärel sisestage valemiribale järgmine valem.

    If(ThisItem.IsSelected, true)

    Sinine ristkülik ümbritseb galerii praegust valikut. Valige mõni galerii üksus, et kontrollida, kas ristkülik kuvatakse iga valitud üksuse ümber. Pidage meeles, et samuti saate avada Eelvaate Eelvaate nupp et vaadata ja testida seda, mida loote.

Jootraha

Valige ristkülik, valige Ümberjärjestamine vahekaardil Avaleht seejärel valige käsk Saada tagasi. Selle funktsiooni abil saate valida galeriiüksuse, ilma et ääris midagi blokeeriks.

Nende juhiste abil lisasite galerii praeguse valiku ümber äärise.

Nendes toimingutes sordime galeriiüksused kasvavas ja kahanevas järjekorras. Lisaks lisame liuguriga juhtelemendi, et "filtreerida" galeriiüksuseid valitud laosolevate ühikute järgi.

Kasvavas või kahanevas järjekorras sortimine

  1. Valige mis tahes galeriis olev üksus väljaarvatud esimene.

  2. Atribuut Üksused on praegu seatud varude peale (teie kogumiku nimi). Muutke seda järgmiselt.

    Sort(Inventory, ProductName)

    Kui te seda teete, sorditakse galerii üksused toote nime järgi kasvavas järjestuses: galerii on sorditud

    Proovige kahanevat järjestust. Seadke galerii atribuut Üksused järgmisele valemile.

    Sort(Inventory, ProductName, Descending)

  1. Lisage liuguriga juhtelement (vahekaart Lisa > Juhtelemendid), muutke selle nimeks StockFilter ja teisaldage see galerii alla.

  2. Konfigureerige liugur nii, et kasutajad ei saaks määrata selle väärtuseks väljaspool laos olevate ühikute vahemikku.

    1. Valige vahekaardil Sisu nupp Min ja sisestage seejärel järgmine avaldis.
      Min(Inventory, UnitsInStock)
    2. Valige vahekaardil Sisu nupp Max ja sisestage seejärel järgmine avaldis.
      Max(Inventory, UnitsInStock)

  3. Valige mis tahes galeriis olev üksus väljaarvatud esimene. Seadke galerii atribuut Üksused järgmisele avaldisele.
    Filter(Inventory, UnitsInStock<=StockFilter.Value)

  4. Seadke jaotises Eelvaade liugur väärtusele, mis on galerii kõrgeima ja väikseima koguse vahel. Liuguri kohandamisel kuvab galerii ainult need tooted, mis on teie valitud väärtusest väiksemad.
    Liuguriväärtusega eelvaate galerii

Nüüd lisame oma filtrisse järgmist.

  1. Liikuge tagasi kujundajasse.
  2. Valige vahekaardil Lisa nupp Tekst, valige Sisesta tekst ja pane uuele juhtelemendile uueks nimeks NameFilter. Teisaldage teksti juhtelement liuguri alla.
  3. Seadke galerii atribuut Üksused järgmisele avaldisele.
    Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
  4. Seadistage ligur jaotises Eelvaade väärtusele 30 ja sisestage tekstisisendi juhtelementi täht g. Galerii näitab, et ainsat toodet, mida on laos vähem kui 30 ühikut ja mille nimes on täht "g".
    Liuguri eelvaade 30-ga

Näpunäited

  • Igal ajal saate valida eelvaatenupu (Eelvaate nupu kujutis) et vaadata, mida te lõite ja seda testida.
  • Rakenduse kujundamisel saate juhtelementide suurust muuta ja neid lohistades ümber paigutada.
  • Eelvaate akna sulgemiseks vajutage klahvi ESC või valige nupp X.
  • Kui kasutate galeriid, valige galerii esimene üksus, et muuta kõiki galerii üksusi. Näiteks valige esimene üksus, et lisada ääris kõigile galerii üksustele.
  • Galerii atribuutide värskendamiseks valige galeriis mõni üksus välja arvatud esimene. Näiteks valige teine üksus, et värskendada atribuute Üksused, ShowScrollbar ja teised, mis rakenduvad galeriile (mitte galerii üksustele).

Mida õppisite

Selles teemas saavutasite järgmist.

  • Lõite kogumiku, importisite .jpg pilte sisaldavad andmed sellesse kogumikku ja kuvasite andmeid galeriis.
  • Konfigureerisite iga galerii pildi alla sildi, mis kuvab selle üksuse laos olevaid ühikuid.
  • Lisasite valitud üksuse ümber äärise.
  • Sortisite üksuseid tootenime järgi kasvavas ja kahanevas järjestuses.
  • Lisasite liuguriga ja sisendi tekstiga juhtelemendid toodete laosolevate ühikute ja tootenime järgi filtreerimiseks.

Märkus

Kas saaksite meile dokumentatsiooniga seotud keele-eelistustest teada anda? Osalege lühikeses uuringus. (Uuring on ingliskeelne.)

Uuringus osalemine võtab umbes seitse minutit. Isikuandmeid ei koguta (privaatsusavaldus).