Afișați, sortați și filtrați datele într-o galerie de aplicații proiectate pe pânză

Creați o galerie pentru a afișa imagini și text despre mai multe produse și sortați și filtrați informațiile respective.

În Power Apps, puteți utiliza o galerie pentru a afișa mai multe elemente conexe, la fel cum vedeți într-un catalog. Galeriile sunt foarte bune pentru afișarea informațiilor despre produse, cum ar fi nume și prețuri. În acest subiect, creăm o galerie și sortăm și filtrăm informațiile folosind funcții similare Excel. De asemenea, atunci când este selectat un element, este plasat un chenar în jurul articolului.

Notă

Acest subiect folosește o aplicație pentru tabletă. Puteți utiliza o aplicație pentru telefon, dar va trebui să redimensionați unele dintre controale.

Cerințe preliminare

• Înregistrare pentru Power Apps și apoi conectare utilizând aceleași acreditări pe care le-ați utilizat pentru a vă înregistra.
• Creați o aplicație pentru tabletă de la un șablon, de la date sau de la zero.
• Aflați cum să configurați un control.
• Acești pași folosesc CreateFirstApp ca eșantion de date de intrare, care includ imagini .jpg. Fișierul zip include un fișier XML care poate fi convertit în Excel. In caz contrar, Power Apps citește automat fișierele din fișiere .zip și le importă cu succes. Puteți descărca și utiliza aceste exemple de date sau le puteți importa.

Afișați datele într-o galerie

1. Creați o colecție numită Inventar folosind datele eșantion. Pașii includ:

   1. Pe fila Inserare, selectați Controale, apoi selectați Import:

      

   2. Setați proprietatea OnSelect a controlului de import la următoarea formulă:
      Colectați (Inventar, Import1.Data)

      

   3. Selectați butonul Import date pentru a deschide Windows Explorer. Selectați CreateFirstApp.zip și selectați Deschidere.

   4. În meniul Fişier, selectați Colecții. Colecția Inventar este listată cu datele pe care le-ați importat:

      

      Tocmai ați creat colecția Inventar, care conține informații despre cinci produse, inclusiv o imagine de design, numele produsului și numărul de unități în stoc.

      Notă

      Controlul importului este utilizat pentru a importa date similare Excel și pentru a crea colecția. Controlul importului importă date atunci când creați aplicația dvs. și previzualizați aplicația. În prezent, controlul de import nu importă date când publicați aplicația.

2. Selectați săgeata înapoi pentru a reveni la proiectant.

3. Pe fila Inserare, faceți clic sau atingeți Galerie, apoi faceți clic sau atingeți galeria Orizontal.

   

4. În panoul din dreapta, faceți clic sau atingeți opțiunea în care titlul și subtitlul se suprapun graficului:

   

5. Setați proprietatea Elemente a galeriei la Inventar:

   

6. Redenumiți galeria la ProductGallery și mutați galeria astfel încât să nu blocheze celelalte controale. Redimensionați galeria, astfel încât să prezinte trei produse:

   

7. În primul element al galeriei, selectați eticheta de jos:

   

   Notă

   Când schimbați primul element din orice galerie, schimbați automat toate celelalte elemente din galerie.

8. Setați proprietatea Text a etichetei la următoarea expresie:
   ThisItem.UnitsInStock
   

   Când faceți acest lucru, eticheta prezintă unitățile aflate în stoc pentru fiecare produs:

Notă

În mod implicit, proprietatea Text a etichetei superioare este setată la ThisItem.ProductName. Puteți să o schimbați în orice alt element din colecția dvs. De exemplu, dacă colecția dvs. are câmpurile Descriere produs sau Preț, puteți seta eticheta la ThisItem.ProductDescription sau ThisItem.Price.

Utilizând acești pași, ați importat date care includ imagini .jpg într-o colecție. Ați adăugat apoi o galerie care afișează datele și ați configurat o etichetă pentru a afișa unitățile aflate în stoc pentru fiecare produs.

Evidențiați elementul de galerie selectat

1. Selectați orice element din galerie cu excepția primului. Se afișează pictograma de editare (colțul din stânga sus). Selectați pictograma de editare:
   

2. Pe fila Inserare, selectați Forme, apoi selectați dreptunghiul. În fiecare element din galerie apare un dreptunghi solid albastru.

3. Pe fila Pornire, selectați Completare și apoi selectați Nicio completare.

4. Selectați Bordură, selectați Stil bordură, apoi selectați linia solidă.

5. Selectați Bordură din nou și setați grosimea la 3. Redimensionați dreptunghiul astfel încât să înconjoare elementul din galerie. Elementele din galeria dvs. au acum un chenar albastru și ar trebui să arate similar cu următoarele:
   

6. Pe fila Formă, selectați Vizibil, apoi introduceți următoarea formulă în bara de formule:

   Dacă (ThisItem.IsSelected, true)

   Un dreptunghi albastru înconjoară selecția actuală într-o galerie. Selectați câteva elemente de galerie pentru a confirma că dreptunghiul apare în jurul fiecărui element selectat. Amintiți-vă, puteți deschide, de asemenea Previzualizare pentru a vedea și testa ceea ce creați.

Sfat

Selectați dreptunghiul, selectați Reordonare pe fila Pornire, apoi selectați Trimiteți Înapoi. Utilizând această caracteristică, puteți selecta un articol de galerie fără ca Bordura să blocheze ceva.

Cu acești pași, ați adăugat un chenar în jurul selecției actuale din galerie.

Sortarea și filtrarea elementelor din galerie

În acești pași, vom sorta elementele din galerie în ordine ascendentă și descendentă. De asemenea, vom adăuga un control glisor la elementele de galerie „filtrate” de către unitățile pe care le alegeți.

Sortarea în ordine ascendentă sau descendentă

1. Selectați orice element din galerie cu excepția primului.

2. Proprietatea Elemente este în prezent setată la Inventar (numele colecției dvs.). Modificați în următoarele:

   Sortare (inventar, nume de produs)

   Când faceți acest lucru, articolele din galerie sunt sortate după numele produsului în ordine crescătoare:

   Testați ordinea descendentă. Setați proprietatea Elemente a galeriei după următoarea formulă:

   Sortare (Inventar, Nume de produs, Descendente)

Adăugați un control glisor și filtrați elementele în galerie

1. Adăugați un control glisor (fila Inserare > Controale), redenumiți în Filtru stoc și mutați sub galerie.

2. Configurați glisorul astfel încât utilizatorii să nu-l poată seta pe o valoare în afara zoneu de unități aflate în stoc:

   1. Pe fila Conţinut, selectați Min, apoi introduceți următoarea expresie:
      Min(Inventory, UnitsInStock)
   2. Pe fila Conţinut, selectați Max, apoi introduceți următoarea expresie:
      Max(Inventory, UnitsInStock)

3. Selectați orice element din galerie cu excepția primului. Setați proprietatea Elemente a galeriei la următoarea expresie:
   Filter(Inventory, UnitsInStock<=StockFilter.Value)

4. În Previzualizare, reglați glisorul la o valoare care este între cea mai mare și cea mai mică cantitate din galerie. Pe măsură ce reglați glisorul, galeria afișează numai acele produse care sunt mai mici decât valoarea pe care o alegeți:
   

Acum, să adăugăm la filtrul nostru:

1. Mergeți înapoi la proiectant.
2. Pe fila Inserare, selectați Text, selectați Intrare text și redenumiți noul control în NumeFiltru. Mutați controlul text sub glisor.
3. Setați proprietatea Elemente a galeriei la următoarea expresie:
   Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
4. În Previzualizare, setați glisorul la 30 și introduceți litera g în controlul de introducere a textului. Galeria arată singurul produs cu mai puțin de 30 de unități în stoc și are un nume cu litera "g":
   

Sfaturi

• În orice moment, puteți selecta butonul de previzualizare () pentru a vedea ce ați creat și pentru a-l testa.
• Când proiectați aplicația, puteți redimensiona controalele și le puteți muta folosind clic și glisați.
• Apăsați ESC sau selectați tasta X pentru a închide fereastra de previzualizare.
• Când utilizați o galerie, selectați primul element din galerie pentru a schimba toate elementele din galerie. De exemplu, selectați primul element pentru a adăuga un chenar la toate elementele din galerie.
• Pentru a actualiza proprietățile galeriei, selectați orice element din galerie cu excepția primului. De exemplu, selectați al doilea element pentru a actualiza Elemente, ShowScrollbar și alte proprietăți care se aplică galeriei (nu elementele din galerie).

Ce ați învățat

În cadrul acestui subiect:

• Ați creat o colecție, ați importat date care includ imagini .jpg în acea colecție și ați arătat datele dintr-o galerie.
• Sub fiecare imagine din galerie, ați configurat o etichetă care listează unitățile în stoc pentru acel element.
• Ați adăugat un chenar în jurul elementului selectat.
• Ați sortat articolele după numele produsului în ordine ascendentă și descendentă.
• Ați adăugat un glisor și un control text de introducere pentru a filtra produsele pe unități din stoc și numele produsului.

Notă

Ne puteți spune care preferințele dvs. lingvistice pentru documentație? Răspundeți la un chestionar scurt. (rețineți că acest chestionar este în limba engleză)

Chestionarul va dura aproximativ șapte minute. Nu sunt colectate date personale (angajament de respectare a confidențialității).