Visualizzare, ordinare e filtrare i dati in una raccolta di app canvas

Creare una raccolta per visualizzare i dati relativi a diversi prodotti e ordinare e filtrare tali informazioni.

In Power Apps usare una raccolta per visualizzare diversi elementi correlati, in modo analogo a un catalogo prodotti. Le gallerie sono ideali per la visualizzazione di nomi di prodotti, prezzi e conteggi unità. Questo articolo illustra come creare una raccolta e ordinare e filtrare le informazioni usando le funzioni Power Fx. Quando viene selezionato un elemento, viene evidenziato un bordo.

Prerequisiti

• Iscriversi a Power Apps, quindi accedere usando le stesse credenziali usate per l'iscrizione.
• Crea un'app per tablet da un modello o da zero.
• Informazioni su come configurare un controllo.

Visualizzare dati in una raccolta

1. Creare una raccolta denominata Inventory aggiungendo un controllo Button e impostando la relativa proprietà OnSelect sulla formula seguente:

   ClearCollect(
       Inventory,
       { ProductName: "Europa",    UnitsInStock: 25 },
       { ProductName: "Ganymede",  UnitsInStock: 32 },
       { ProductName: "Callisto",  UnitsInStock: 12 },
       { ProductName: "Io",        UnitsInStock: 47 },
       { ProductName: "Titan",     UnitsInStock: 18 }
   )
   

2. Selezionare il pulsante tenendo premuto ALT (o selezionare Anteprima e quindi il pulsante) per popolare la raccolta Inventario con cinque prodotti, ognuno con un nome prodotto e un conteggio unità.

   Nota

   Questo articolo utilizza una piccola raccolta incorporata, così da poter seguire senza ricorrere a dati esterni. Per gli scenari di produzione, connettersi a un'origine dati reale, ad esempio SharePoint o Microsoft Dataverse.

3. Nella scheda Inserisci selezionare Layout>raccolta orizzontale.

4. Nel riquadro di destra selezionare un layout che mostra un titolo e un sottotitolo.

5. Impostare la proprietà Items della raccolta su Inventory.

6. Rinominare la raccolta in ProductGallery e ridimensionarla per visualizzare tre prodotti contemporaneamente.

7. Selezionare l'etichetta inferiore nel primo elemento della galleria.

   Nota

   Quando si modifica il primo elemento di una raccolta, la stessa modifica viene applicata automaticamente a tutti gli altri elementi.

8. Impostare la proprietà Text dell'etichetta su:

   ThisItem.UnitsInStock
   

L'etichetta mostra ora il numero di unità in magazzino per ogni prodotto.

Evidenziare l'elemento della raccolta selezionato

1. Selezionare qualsiasi elemento della raccolta ad eccezione del primo, quindi selezionare l'icona di modifica (matita) nell'angolo superiore sinistro per attivare la modalità di modifica dei modelli.

2. Nella scheda Inserisci, seleziona Forme>Rettangolo. In ogni elemento della galleria viene visualizzato un rettangolo pieno.

3. Nel riquadro Proprietà impostare Colore su Nessun riempimento (trasparente).

4. In Bordo imposta l'elenco a discesa stile su Solido e il valore di spessore su 3.

5. Ridimensionare il rettangolo in modo da racchiudere i contenuti dell'elemento della galleria.

6. Impostare la proprietà Visible del rettangolo su:

   ThisItem.IsSelected
   

Il bordo blu viene ora visualizzato solo intorno all'elemento selezionato.

Ordinare e filtrare gli elementi nella raccolta

Ordinare in ordine crescente o decrescente

1. Selezionare qualsiasi elemento della raccolta , ad eccezione del primo per aggiornare la proprietà Items della raccolta.

2. Modificare la proprietà Items per ordinare in base al nome del prodotto in ordine crescente:

   Sort(Inventory, ProductName)
   

3. Per ordinare in ordine decrescente, modificare la proprietà Items in:

   Sort(Inventory, ProductName, SortOrder.Descending)
   

Filtra gli elementi con uno slider e un campo di testo

1. Nella scheda Inserisci, seleziona Input>Dispositivo di scorrimento. Rinomina lo slider in StockFilter e posizionalo sotto la galleria.

2. Impostare l'intervallo del dispositivo di scorrimento in modo che corrisponda ai dati:

   • Impostare Min su: Min(Inventory, UnitsInStock)
   • Impostare Max su: Max(Inventory, UnitsInStock)

3. Selezionare un elemento della raccolta tranne il primo e impostare la proprietà Items su:

   Filter(Inventory, UnitsInStock <= StockFilter.Value)
   

4. Seleziona Anteprima (F5) e regola il cursore per vedere la galleria filtrare i prodotti in base alla quantità in magazzino.

5. Per filtrare anche in base al nome del prodotto, aggiungere un controllo Input di testo (nella scheda Inserisci selezionare Input>testo), rinominarlo NameFilter e posizionarlo sotto il dispositivo di scorrimento.

6. Aggiornare la proprietà Items per combinare entrambi i filtri:

   Filter(Inventory, UnitsInStock <= StockFilter.Value && NameFilter.Text in ProductName)
   

7. In Anteprima, imposta il cursore su 30 e digita g nel campo di testo. La galleria mostra solo i prodotti con 30 unità o meno in magazzino e con un nome del prodotto contenente la lettera "g".

Suggerimenti e trucchi

• Selezionare il pulsante di anteprima (F5) in qualsiasi momento per testare gli elementi creati.
• È possibile ridimensionare e riposizionare i controlli usando il trascinamento della selezione.
• Premere ESC o selezionare X per chiudere la finestra di anteprima.
• Per modificare tutti gli elementi in una raccolta contemporaneamente, selezionare il primo elemento nella raccolta.
• Per aggiornare le proprietà a livello di raccolta ,ad esempio Items o ShowScrollbar, selezionare qualsiasi elemento tranne il primo.

Sommario

In questo articolo, tu:

• Creazione di una raccolta con dati di prodotto di esempio.
• Dati della collezione visualizzati in una galleria orizzontale.
• Etichette configurate per visualizzare i valori dei campi da ogni record.
• È stato aggiunto un bordo di selezione intorno all'elemento attivo della galleria.
• Elementi della raccolta ordinati in base al nome del prodotto in ordine crescente e decrescente.
• Usato un dispositivo di scorrimento e un input di testo per filtrare i prodotti in base alla quantità e al nome delle scorte.