Mostrar, ordenar i filtrar dades en una galeria d'aplicacions de llenç

Creeu una galeria per mostrar imatges i text sobre diversos productes i ordeneu i filtreu aquesta informació.

Al Power Apps, podeu utilitzar una galeria per mostrar diversos elements relacionats, com podeu veure en un catàleg. Les galeries són genials per mostrar informació sobre els productes, com ara els noms i els preus. En aquest tema, creem una galeria i ordenem i filtrem la informació mitjançant funcions tipus Excel. A més, quan se selecciona un element, s'hi col·loca una vora al voltant.

Nota

Aquest tema utilitza una aplicació de tauleta. Podeu utilitzar una aplicació de telèfon, però haureu de redimensionar alguns controls.

Requisits previs

• Registreu-vos al Power Apps i després inicieu la sessió amb les mateixes credencials utilitzades per al registre.
• Creeu una aplicació de tauleta a partir d'una plantilla, a partir de dades o des de zero.
• Descobriu com configurar un control.
• Aquests passos utilitzen CreateFirstApp com a dades d'entrada d'exemple, la qual cosa inclou imatges .jpg. El fitxer zip inclou un fitxer XML que es pot convertir a l'Excel. Altrament, el Power Apps llegeix automàticament els fitxers dels fitxers. zip i els importa correctament. Podeu baixar i utilitzar aquestes dades d'exemple, o importar-ne de pròpies.

Mostrar dades en una galeria

1. Creeu una col·lecció anomenada inventari mitjançant les dades d'exemple. Els passos inclouen:

   1. A la pestanya Insereix, seleccioneu Controls i, a continuació, seleccioneu Importa.

      

   2. Definiu la propietat OnSelect del control d'importació com aquesta fórmula:
      Collect(Inventory, Import1.Data)

      

   3. Seleccioneu el botó Importa les dades per obrir el Windows Explorer. Seleccioneu CreateFirstApp. zip i seleccioneu Obre.

   4. Al menú Fitxer, seleccioneu Col·leccions. La col·lecció Inventari apareix amb les dades que heu importat:

      

      Acabeu de crear la col·lecció Inventari, que conté informació sobre cinc productes, incloent-hi una imatge de disseny, el nom del producte i el nombre d'unitats en estoc.

      Nota

      El control d'importació s'utilitza per importar dades tipus Excel i crear la col·lecció. El control d'importació importa dades quan creeu l'aplicació i la visualitzeu prèviament. Actualment, el control d'importació no importa les dades quan publiqueu l'aplicació.

2. Seleccioneu la fletxa enrere per tornar al dissenyador.

3. A la pestanya Insereix, toqueu o feu clic a Galeria i després toqueu o feu clic a la galeria Horitzontal.

   

4. A la subfinestra de la dreta, toqueu o feu clic a l'opció en la qual el títol i el subtítol se superposen al gràfic:

   

5. Definiu la propietat Items de la galeria com a Inventari:

   

6. Canvieu el nom de la galeria a ProductGallery i moveu la galeria per tal que no bloquegi els altres controls. Redimensioneu la galeria de manera que mostri tres productes:

   

7. Al primer element de la galeria, seleccioneu l'etiqueta inferior:

   

   Nota

   Quan canvieu el primer element de qualsevol galeria, canvieu automàticament la resta d'elements de la galeria.

8. Definiu la propietat Text de l' etiqueta com l'expressió següent:
   ThisItem.UnitsInStock
   

   Quan ho feu, l'etiqueta mostra les unitats en estoc per a cada producte:

Nota

Per defecte, la propietat Text de l'etiqueta superior està definida com a ThisItem.ProductName. Podeu canviar-la a qualsevol altre element de la col·lecció. Per exemple, si la vostra col·lecció té els camps ProductDescription o Price, podeu definir l'etiqueta com a ThisItem.ProductDescription o ThisItem.Price.

Amb aquests passos, heu importat dades que inclouen imatges .jpg en una col·lecció. A continuació, heu afegit una galeria que mostra les dades i heu configurat una etiqueta per mostrar les unitats en estoc per a cada producte.

Ressaltar l'element de la galeria seleccionat

1. Seleccioneu qualsevol element de la galeria tret del primer. Es mostra la icona Edita (cantonada superior esquerra). Seleccioneu la icona Edita:
   

2. A la pestanya Insereix, seleccioneu Formes i, a continuació, seleccioneu el rectangle. Un rectangle sòlid blau apareix a cada element de la galeria.

3. A la pestanya Inici, seleccioneu Emplenament i, a continuació, seleccioneu Sense emplenament.

4. Seleccioneu Vora, Estil de la vora i, a continuació, la línia contínua.

5. Torneu a seleccionar Vora i definiu el gruix en 3. Redimensioneu el rectangle de manera que envolto l'element de la galeria. Els elements de la galeria tenen ara una vora blava i han de tenir una aparença semblant a la següent:
   

6. A la pestanya Forma, seleccioneu Visible i, a continuació, introduïu la fórmula següent a la barra de fórmules:

   If(ThisItem.IsSelected, true)

   Un rectangle blau envolta la selecció actual en una galeria. Seleccioneu uns quants elements de la galeria per confirmar que el rectangle apareix al voltant de cada element que heu seleccionat. Recordeu que també podeu obrir la versió preliminar per veure i provar el que esteu creant.

Suggeriment

Seleccioneu el rectangle, seleccioneu Reordena a la pestanya Inici i, a continuació, seleccioneu Envia al darrere. Amb aquesta característica, podeu seleccionar un element de la galeria sense que la vora bloquegi res.

Amb aquests passos, heu afegit una vora al voltant de la selecció actual a la galeria.

Ordenar i filtrar elements a la galeria

En aquests passos, ordenarem els elements de la galeria en ordre ascendent i descendent. A més, afegirem un control lliscant per "filtrar" els elements de la galeria per les unitats en estoc que seleccioneu.

Ordenar en sentit ascendent o descendent

1. Seleccioneu qualsevol element de la galeria tret del primer.

2. La propietat Items està definida actualment com a Inventari (el nom de la vostra col·lecció). Canvieu-la al següent:

   Sort(Inventory, ProductName)

   Quan ho feu, els elements de la galeria s'ordenen pel nom del producte en ordre ascendent:

   Proveu l'ordre descendent. Definiu la propietat Items de la galeria com la fórmula següent:

   Sort(Inventory, ProductName, Descending)

Afegir un control lliscant i filtrar elements de la galeria

1. Afegiu un control lliscant (pestanya Insereix > Controls), canvieu-li el nom a StockFilter i moveu-lo a la galeria.

2. Configureu el control lliscant per tal que els usuaris no el puguin definir com un valor fora de l'interval d'unitats en estoc:

   1. A la pestanya Contingut, seleccioneu Mín. i, a continuació, introduïu l'expressió següent:
      Min(Inventory, UnitsInStock)
   2. A la pestanya Contingut, seleccioneu Màx. i, a continuació, introduïu l'expressió següent:
      Max(Inventory, UnitsInStock)

3. Seleccioneu qualsevol element de la galeria tret del primer. Definiu la propietat Items de la galeria com l'expressió següent:
   Filter(Inventory, UnitsInStock<=StockFilter.Value)

4. A Visualització prèvia, ajusteu el control lliscant en un valor que estigui entre la quantitat més alta i la més baixa de la galeria. Mentre ajusteu el control lliscant, la galeria només mostra els productes que són inferiors al valor que trieu:
   

Ara, l'afegirem al nostre filtre:

1. Torneu al dissenyador.
2. A la pestanya Insereix, seleccioneu Text, seleccioneu Text d'entrada i canvieu el nom del nou control a NameFilter. Moveu el control de text a sota del control lliscant.
3. Definiu la propietat Items de la galeria com l'expressió següent:
   Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
4. A Visualització prèvia, definiu el control lliscant com a 30 i escriviu la lletra g al control d'entrada de text. A la galeria s'hi mostra l'únic producte amb menys de 30 unitats en estoc i té un nom amb la lletra "g":
   

Consells i suggeriments

• En qualsevol moment, podeu seleccionar el botó de versió preliminar () per veure què heu creat i provar-ho.
• Quan dissenyeu l'aplicació, podeu redimensionar els controls i desplaçar-los fent-hi clic i arrossegant-los.
• Premeu Esc o seleccioneu la X per tancar la finestra de visualització prèvia.
• Quan utilitzeu una galeria, seleccioneu-ne el primer element per canviar tots els elements de la galeria. Per exemple, seleccioneu el primer element per afegir una vora a tots els elements de la galeria.
• Per actualitzar les propietats de la galeria, seleccioneu qualsevol element de la galeria excepte el primer. Per exemple, seleccioneu el segon element per actualitzar Items, ShowScrollbar i altres propietats que s'apliquen a la galeria (no els elements de la galeria).

El que heu après

En aquest tema:

• Heu creat una col·lecció, heu importat dades que inclouen imatges .jpg en aquesta col·lecció i heu visualitzat les dades en una galeria.
• Sota cada imatge de la galeria, heu configurat una etiqueta que mostra les unitats en estoc per a l'element en qüestió.
• Heu afegit una vora al voltant de l'element que heu seleccionat.
• Heu ordenat els elements per nom de producte en ordre ascendent i descendent.
• Heu afegit un control lliscant i un control de text d'entrada per filtrar els productes per les unitats en estoc i pel nom del producte.

Nota

Ens podeu dir quines són les vostres preferències d'idioma per a la documentació? Responeu una breu enquesta. (tingueu en compte que l'idioma de l'enquesta és l'anglès)

Trigareu uns set minuts a completar l'enquesta. No es recopilen dades personals (declaració de privadesa).