Deli z drugimi prek

Prikaz, razvrščanje in filtriranje podatkov v galeriji aplikacij s platnom

  • Članek

Ustvarite galerijo, da prikažete slike in besedilo o številnih izdelkih, ter razvrstite in filtrirate te informacije.

V storitvi Power Apps lahko uporabite galerijo in prikažete več povezanih elementov na isti način kot v katalogu. Galerije so odlična rešitev za prikazovanje informacij o izdelkih, kot so imena in cene. V tej temi bomo ustvarili galerijo in razvrstili ter filtrirali podatke s funkcijami, ki so podobne Excelovim. Ko je element izbran, se okoli njega prikaže obroba.

Opomba

Pri tej temi se uporablja aplikacija za tablične računalnike. Uporabite lahko aplikacijo za telefone, toda morali boste spremeniti velikost nekaterih kontrolnikov.

Zahteve

  • Registrirajte se za Power Apps, nato se vpišite z istimi poverilnicami, ki ste jih uporabili za registracijo.
  • Ustvarite aplikacijo za tablične računalnike s predlogo, s podatki ali od začetka.
  • Naučite se konfigurirati kontrolnik.
  • V teh korakih se za vzorčne vhodne podatke uporabi datoteka CreateFirstApp, ki vključuje slike .jpg. Datoteka zip vključuje datoteko XML, ki jo je mogoče pretvoriti v Excelovo. Sicer Power Apps samodejno prebere datoteke iz datotek .zip in jih uspešno uvozi. Prenesete in uporabite lahko te vzorčne podatke ali pa uvezete svoje.

  1. Z vzorčnimi podatki ustvarite zbirko z imenom Zaloga. Koraki so naslednji:

    1. Na zavihku Vstavljanje izberite Kontrolniki in nato izberite Uvozi:

      Vstavljanje kontrolnika

    2. Nastavite lastnost OnSelect kontrolnika uvoza na naslednjo formulo:
      Collect(Inventory, Import1.Data)

      Lastnost »OnSelect«

    3. Izberite gumb Uvozi podatke, da odprete Windows Explorer. Izberite CreateFirstApp.zip in Odpri.

    4. V meniju Datoteka izberite Zbirke. Zbirka »Zaloga« je navedena s podatki, ki ste jih uvozili:

      Datoteka – zbirke

      Ustvarili ste zbirko zaloge, ki vsebuje informacije o petih izdelkih, vključno s sliko oblike, imenom izdelka in številom enot na zalogi.

      Opomba

      Kontrolnik uvoza se uporablja za uvoz podatkov, ki so podobni Excelovim, in ustvarjanje zbirke. Kontrolnik uvoza uvaža podatke ob ustvarjanju in predogledu vaše aplikacije. Trenutno kontrolnik uvoza podatkov ne uvaža, ko aplikacijo objavite.

  2. Izberite puščico nazaj za vrnitev v oblikovalnik.

  3. Na zavihku Vstavljanje kliknite ali tapnite Galerija in nato galerijo Vodoravno.

    Galerija – vodoravna

  4. V desnem podoknu kliknite ali tapnite možnost, v kateri naslov in podnaslov prekrivata grafiko:

    Postavitev

  5. Nastavite lastnost Items galerije na Inventory:

    Postavitev galerije

  6. Galerijo preimenujte v ProductGallery in jo premaknite, da ne blokira drugih kontrolnikov. Spremenite velikost galerije, da prikazuje tri izdelke:

    Preimenovanje galerije

  7. V prvem elementu galerije izberite spodnjo oznako:

    Aplikacija z galerijo

    Opomba

    Ko spremenite prvi element v kateri koli galeriji, samodejno spremenite tudi vse druge elemente v galeriji.

  8. Nastavite lastnost Text oznake na naslednji izraz:
    ThisItem.UnitsInStock

    Ko to storite, oznaka prikazuje enote na zalogi za posamezen izdelek:

Zaloga vsakega izdelka

Opomba

Lastnost Text zgornje oznake je privzeto nastavljena na ThisItem.ProductName. To lahko spremenite tako, da v svoji zbirki uporabljate poljuben drugi element. Če ima vaša zbirka polje ProductDescription ali Price, lahko oznako nastavite na ThisItem.ProductDescription ali ThisItem.Price.

S temi koraki ste v zbirko uvozili podatke, ki vključujejo slike .jpg. Nato ste dodali galerijo, v kateri so prikazani podatki, in konfigurirali oznako, da prikazuje enote na zalogi za posamezen izdelek.

  1. V galeriji izberite poljuben element, razen prvega. Prikaže se ikona za urejanje (zgornji levi kot). Izberite ikono za urejanje:
    Urejanje

  2. Na zavihku Vstavljanje izberite Oblike in nato izberite pravokotnik. V vsakem elementu v galeriji se prikaže moder polni pravokotnik.

  3. Na zavihku Osnovno izberite Polnilo in nato Brez polnila.

  4. Izberite Obroba, Slog obrobe in nato polno črto.

  5. Znova izberite Obroba in debelino nastavite na 3. Spremenite velikost pravokotnika tako, da obdaja element v galeriji. Zdaj imajo elementi v vaši galeriji modro obrobo in bi morali biti podobni naslednjim:
    Izbira obrobe

  6. Na zavihku Oblika izberite Vidno in nato v vnosno vrstico vnesite naslednjo formulo:

    If(ThisItem.IsSelected, true)

    Modri pravokotnik obdaja trenutni izbor v galeriji. Izberite nekaj elementov v galeriji, da preverite, ali se pravokotnik prikaže okoli vsakega izbranega elementa. Ne pozabite, da lahko odprete tudi Predogled Gumb za predogled, da vidite, kaj ustvarjate, in preizkusite.

Nasvet

Izberite pravokotnik in možnost Preuredi na zavihku Osnovno in nato še Pošlji v ozadje. S to funkcijo lahko izberete element v galeriji, ne da bi obroba kar koli blokirala.

S temi koraki ste dodali obrobo okoli trenutno izbranih elementov v galeriji.

V nadaljevanju bomo elemente iz galerije razvrstili po naraščajočem in padajočem vrstnem redu. Dodali bomo tudi kontrolnik drsnika, da lahko elemente iz galerije »filtriramo« po enotah na zalogi, ki jih izberete.

Razvrščanje po naraščajočem ali padajočem vrstnem redu

  1. V galeriji izberite poljuben element, razen prvega.

  2. Lastnost Items je trenutno nastavljena na »Inventory« (ime vaše zbirke). Spremenite jo na naslednje:

    Sort(Inventory, ProductName)

    Ko to storite, so elementi v galeriji razvrščeni po imenu izdelka v naraščajočem vrstnem redu: Razvrščena galerija

    Preizkusite padajoči vrstni red. Lastnost Items galerije nastavite na naslednjo formulo:

    Sort(Inventory, ProductName, Descending)

  1. Dodajte kontrolnik Slider (zavihek Vstavljanje > Kontrolniki), preimenujte ga v StockFilter in ga premaknite pod galerijo.

  2. Drsnik konfigurirajte tako, da ga uporabniki ne morejo nastaviti na vrednost, ki je zunaj obsega enot na zalogi:

    1. Na zavihku Vsebina izberite Min. in vnesite naslednji izraz:
      Min(Inventory, UnitsInStock)
    2. Na zavihku Vsebina izberite Maks. in vnesite naslednji izraz:
      Max(Inventory, UnitsInStock)

  3. V galeriji izberite poljuben element, razen prvega. Lastnost Items galerije nastavite na naslednji izraz:
    Filter(Inventory, UnitsInStock<=StockFilter.Value)

  4. Drsnik v predogledu prilagodite na vrednost med največjo in najmanjšo količino v galeriji. Med prilagajanjem drsnika so v galeriji prikazani samo tisti izdelki, ki so manjši od izbrane vrednosti:
    Predogled galerije z vrednostjo drsnika

Zdaj pa je čas za dodajanje v filter:

  1. vrnite se v oblikovalnik.
  2. Na zavihku Vstavljanje izberite Besedilo in nato Vnos besedila, potem pa novi kontrolnik preimenujte na NameFilter. Kontrolnik besedila premaknite nad drsnik.
  3. Lastnost Items galerije nastavite na naslednji izraz:
    Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
  4. V predogledu nastavite drsnik na 30 in v kontrolnik vnosa besedila vnesite črko g. V galeriji je prikazan edini izdelek, ki ima na zalogi manj kot 30 enot in ime s črko »g«.
    Predogled drsnika s 30

Namigi in nasveti

  • Kadar koli lahko izberete gumb za predogled (Gumb za predogled slike), da vidite, kaj ste ustvarili, in to preizkusite.
  • Med oblikovanjem aplikacije lahko spreminjate velikost kontrolnikov in jih premikate tako, da jih kliknete in povlečete.
  • Za zapiranje okna za predogled pritisnite tipko ESC ali izberite X.
  • Med uporabo galerije uporabite prvi element v njej, da spremenite vse elemente, ki jih vsebuje. Izberite na primer prvi element, da dodate obrobo vsem elementom v galeriji.
  • Če želite posodobiti lastnosti galerije, izberite kateri koli element v galeriji, razen prvega. Drugi element izberite, ko želite posodobiti lastnosti Items, ShowScrollbar in druge lastnosti, ki veljajo za galerijo (ne elemente v galeriji).

Kaj ste se naučili

V tej temi ste:

  • ustvarili zbirko, v njo uvozili podatke, ki vsebujejo slike .jpg, in podatke prikazali v galeriji;
  • pod vsako sliko v galeriji konfigurirali oznako, ki navaja enote na zalogi za ta element;
  • dodali obrobo okoli izbranega elementa;
  • predmete razvrstili glede na ime izdelka po naraščajočem in padajočem vrstnem redu;
  • dodali drsnik in kontrolnik za vnos besedila, da izdelke filtrirate po enotah na zalogi in imenu izdelka.

Opomba

Ali nam lahko poveste, kateri je vaš prednostni jezik za dokumentacijo? Izpolnite kratko anketo. (upoštevajte, da je v angleščini)

Z anketo boste porabili približno sedem minut. Ne zbiramo nobenih osebnih podatkov (izjava o zasebnosti).