Prikaz, razvrstavanje i filtriranje podataka u galeriji aplikacija od gotovih gradivnih elemenata

Stvorite galeriju za prikaz slika i teksta o nekoliko proizvoda te sortirajte i filtrirajte te informacije.

Na usluzi Power Apps možete upotrebljavati galeriju za prikaz nekoliko povezanih stavki, baš kao što je prikazano u katalogu. Galerije su izvrstan način za prikaz informacija o proizvodima, poput imena i cijena. U ovoj temi stvaramo galeriju te sortiramo i filtriramo informacije pomoću funkcija poput Excela. Također, kada odaberete stavku, oko nje se postavlja rub.

Preduvjeti

• Registrirajte se za Power Apps, zatim se prijavite pomoću istih vjerodajnicama kojima ste se registrirali.
• Stvorite aplikaciju za tablet iz obrasca, od podataka ili od početka.
• Saznajte kako konfigurirati kontrolu.
• Ti koraci upotrebljavaju aplikaciju CreateFirstApp kao uzorak podataka za unos koji uključuju .jpg slike. Zip datoteka uključuje XML datoteku koja se može pretvoriti u Excel. U suprotnom slučaju, usluga Power Apps automatski čita datoteke u .zip datotekama i uspješno ih uvozi. Te ogledne podatke možete preuzeti i upotrijebiti ili možete uvesti vlastite.

Prikaz podataka u galeriji

1. Stvorite kolekciju naziva Zaliha pomoću oglednih primjeraka. Koraci uključuju:

   1. U kartici Umetni odaberite Kontrole, a zatim odaberite Uvoz:

      

   2. Postavite svojstvo OnSelect kontrole uvoza na sljedeću formulu:
      Collect(Inventory, Import1.Data)

      

   3. Odaberite gumb Uvoz podataka da biste otvorili Windows Explorer. Odaberite CreateFirstApp.zip i odaberite Otvori.

   4. U izborniku Datoteka odaberite Zbirke. Zbirka Zaliha navedena je s podacima koje ste uvezli:

      

      Upravo ste stvorili zbirku Zaliha koja sadrži informacije o otprilike pet proizvoda, uključujući i sliku dizajna, naziv proizvoda te broj jedinica na zalihi.

      Napomena

      Kontrola uvoza koristi se za uvoz podataka sličnih onima u programu Excel i stvaranje zbirke. Kontrola uvoza uvozi podatke kada izrađujete svoju aplikaciju i kada je pregledavate. Kontrola uvoza trenutno ne uvozi podatke kada svoju aplikaciju objavite.

2. Odaberite strelicu za povratak da biste se vratili na dizajnera.

3. Na kartici Umetanje kliknite ili dodirnite Galerija, a zatim kliknite ili dodirnite galeriju Okomito.

   

4. U oknu s desne strane kliknite ili dodirnite opciju u kojoj naslov i podnaslov prekrivaju grafiku:

   

5. Postavite svojstvo galerije Items na Inventory:

   

6. Preimenujte galeriju u ProductGallery i premjestite je tako da ne blokira ostale kontrole. Promijenite veličinu galerije tako da prikazuje tri proizvoda:

   

7. Odaberite donju oznaku u prvoj stavci galerije:

   

   Napomena

   Kad promijenite prvu stavku u bilo kojoj galeriji, automatski se mijenjaju i sve ostale stavke u galeriji.

8. Postavite svojstvo oznake Text na sljedeći izraz:
   ThisItem.UnitsInStock
   

   Kada to učinite, oznaka će prikazivati jedinice na zalihi za svaki proizvod:

Pomoću tih koraka uvezli ste podatke u zbirku koji uključuju .jpg slike. Zatim ste dodali galeriju koja prikazuje podatke i konfigurirali oznaku za prikaz jedinica na zalihi za svaki proizvod.

Isticanje stavke galerije koju odaberete

1. Odaberite bilo koju stavku u galeriji osim prve. Prikazuje se ikona za uređivanje (gornji lijevi kut). Odaberite ikonu za uređivanje:
   

2. Na kartici Umetanje odaberite Oblici, zatim odaberite pravokutnik. Puni plavi pravokutnik prikazuje se u svakoj stavki galerije.

3. Na kartici Početak odaberite Ispuna, a zatim odaberite Nema ispune.

4. Odaberite Obrub, odaberite Stil obruba i zatim odaberite punu liniju.

5. Ponovno odaberite Obrub i postavite debljinu na 3. Promijenite veličinu pravokutnika tako da okružuje stavku galerije. Stavke galerije sada imaju plavi obrub i trebale bi nalikovati sljedećim slikama:
   

6. Na kartici Oblik odaberite Vidljivo i zatim unesite sljedeću formulu u Traku formule:

   If(ThisItem.IsSelected, true)

   Plavi pravokutnik okružuje trenutačan odabir u galeriji. Odaberite nekoliko stavki galerije da biste potvrdili pojavljivanje pravokutnika oko svake stavke koju odaberete. Nemojte zaboraviti da možete i otvoriti Pretpregled da biste prikazali i testirali ono što stvarate.

Pomoću tih koraka dodali ste obrub oko trenutačnog odabira u galeriji.

Sortiranje i filtriranje stavki u galeriji

U sljedećim ćemo koracima sortirati stavke galerije u uzlaznom i silaznom redoslijedu. Također, dodat ćemo kontrolu klizača za „filtriranje” stavki galerije prema jedinicama na zalihi koje odaberete.

Sortiranje uzlaznim ili silaznim redoslijedom

1. Odaberite bilo koju stavku u galeriji osim prve.

2. Svojstvo Items trenutačno je postavljeno na Zaliha (naziv zbirke). Promijenite ga u sljedeće:

   Sort(Inventory, ProductName)

   Kada to učinite, stavke u galeriji razvrstavaju se prema nazivu proizvoda uzlazno:

   Isprobajte silazni redoslijed. Postavite svojstvo Items za galeriju na sljedeću formulu:

   Sort(Inventory, ProductName, Descending)

Dodavanje kontrole klizača i filtriranja stavki u galeriji

1. Dodajte kontrolu klizača (kartica Umetanje > Kontrole), preimenujte je u StockFilter i premjestite je ispod galerije.

2. Konfigurirajte klizač tako da ga korisnici ne mogu postaviti na vrijednost izvan raspona jedinica na zalihi:

   1. Na kartici Sadržaj odaberite Min., a zatim unesite sljedeći izraz:
      Min(Inventory, UnitsInStock)
   2. Na kartici Sadržaj odaberite Maks., a zatim unesite sljedeći izraz:
      Max(Inventory, UnitsInStock)

3. Odaberite bilo koju stavku u galeriji osim prve. Postavite svojstvo Items za galeriju na sljedeći izraz:
   Filter(Inventory, UnitsInStock<=StockFilter.Value)

4. Podesite klizač na kartici Pregled na vrijednost između najveće i najmanje količine u galeriji. Dok podešavate klizač, galerija prikazuje samo one proizvode koji su manji od vrijednosti koju odaberete:
   

Dodajmo to sada filtru:

1. Vratite se dizajneru.
2. Na kartici Umetanje odaberite Tekst pa Tekst unosa i preimenujte novu kontrolu u NameFilter. Pomaknite kontrolu teksta ispod klizača.
3. Postavite svojstvo Items za galeriju na sljedeći izraz:
   Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
4. Na kartici Pregled postavite klizač na 30 i unesite slovo g u kontrolu za unos teksta. Galerija prikazuje jedini proizvod koji ima manje od 30 jedinica na zalihi i slovo „g” u nazivu.
   

Korisni savjeti

• U bilo kojem trenutku možete odabrati gumb za pretpregled () da biste prikazali što ste stvorili i testirali.
• Prilikom dizajniranja aplikacije možete promijeniti veličinu kontrola i pomicati ih pomoću funkcije klika i povlačenja.
• Pritisnite ESC ili odaberite X za zatvaranje prozora za pregled.
• Kad upotrebljavate galeriju, odaberite prvu stavku u galeriji da biste promijenili sve stavke u galeriji. Na primjer, odaberite prvu stavku za dodavanje obruba svim stavkama u galeriji.
• Da biste ažurirali svojstva galerije, odaberite bilo koju stavku u galeriji osim prve. Na primjer, odaberite drugu stavku za ažuriranje svojstava Stavke, ShowScrollbar i drugih koji se odnose na galeriju (ne stavke u galeriji).

Što ste naučili

U ovoj temi saznali ste kako učiniti sljedeće:

• izraditi kolekciju, uvoziti podatke koji sadrže .jpg slike u tu kolekciju i prikazivati podatke u galeriji
• konfigurirati oznaku ispod svake slike u galeriji koja navodi jedinice na zalihama za tu stavku
• dodati obrub oko odabrane stavke
• uzlaznim i silaznim redoslijedom sortirati stavke prema nazivu proizvoda
• dodati klizač i kontrolu unosa teksta za filtriranje proizvoda prema jedinicama na zalihama i nazivu proizvoda.