Visualizzare, ordinare e filtrare i dati in una raccolta di PowerAppsShow, sort, and filter data in a PowerApps gallery

Creare una raccolta per visualizzare immagini e testo di prodotti diversi e ordinare e filtrare le informazioni.Create a gallery to show images and text about several products, and sort and filter that information.

In PowerApps è possibile usare una raccolta per visualizzare diversi elementi correlati, come in un catalogo.In PowerApps, you can use a gallery to show several related items, just as you see in a catalog. Le raccolte sono ideali per la visualizzazione di informazioni sui prodotti, ad esempio nomi e prezzi.Galleries are great for showing information about products, such as names and prices. In questo argomento viene creata una raccolta e vengono ordinate e filtrate le informazioni usando funzioni simili a quelle di Excel.In this topic, we create a gallery and sort and filter the information using Excel-like functions. Inoltre, quando viene selezionato un elemento, viene inserito un bordo intorno all'elemento.Also, when an item is selected, a border is placed around the item.

Nota

In questo argomento viene usata un'app per tablet.This topic uses a tablet app. È possibile usare un'app per telefono ma è necessario ridimensionare alcuni controlli.You can use a phone app but you will need to resize some of the controls.

PrerequisitiPrerequisites

  • Iscriversi in PowerApps e installare PowerApps.Sign up for PowerApps and install PowerApps. Dopo aver aperto PowerApps, accedere usando le stesse credenziali usate per l'iscrizione.When you open PowerApps, sign-in using the same credentials that you used to sign up.
  • Creare un'app per tablet basata su un modello, sui dati o completamente nuova.Create a tablet app from a template, from data, or from scratch.
  • Informazioni su come configurare un controllo.Learn how to configure a control.
  • Questa procedura usa CreateFirstApp come dati di input di esempio contenente immagini con estensione jpg.These steps use the CreateFirstApp as sample input data, which includes .jpg images. Il file con estensione zip include un file XML che può essere convertito in Excel.The zip file includes an XML file that can be converted to Excel. In caso contrario, PowerApps legge automaticamente i file contenuti nei file con estensione zip e ne esegue l'importazione.Otherwise, PowerApps automatically reads the files in the .zip files and imports it successfully. È possibile scaricare e usare questi dati di esempio o importare i propri dati.You can download and use this sample data, or import your own.
  1. Creare una raccolta denominata Inventory usando i dati di esempio.Create a collection named Inventory using the sample data. La procedura include i passaggi seguenti:Steps include:

    1. Nella scheda Inserisci selezionare Controlli e quindi Importa:On the Insert tab, select Controls, and then select Import:

    2. Impostare la proprietà OnSelect del controllo di importazione sulla formula seguente:Set the OnSelect property of the import control to the following formula:
      Collect(Inventory, Import1!Data)Collect(Inventory, Import1!Data)

    3. Selezionare il pulsante Importa dati per aprire Esplora risorse.Select the Import Data button to open Windows Explorer. Selezionare CreateFirstApp.zip e quindi Apri.Select CreateFirstApp.zip, and select Open.
    4. Nel menu File selezionare Raccolte.In the File menu, select Collections. Viene visualizzata la raccolta Inventory con i dati importati:The Inventory collection is listed with the data you imported:

      È stata creata la raccolta Inventory contenente informazioni su cinque prodotti, tra cui immagine, nome del prodotto e numero delle unità a magazzino.You've just created the Inventory collection, which contains information about five products, including a design image, the name of the product, and the number of units in stock.

      Nota

      Il controllo di importazione consente di importare dati in formato Excel e creare la raccolta.The import control is used to import Excel-like data and create the collection. Il controllo di importazione esegue l'importazione dei dati durante la creazione e la visualizzazione in anteprima dell'app.The import control imports data when you are creating your app, and previewing your app. Attualmente, il controllo di importazione non importa i dati durante la pubblicazione dell'app.Currently, the import control does not import data when you publish your app.

  2. Selezionare la freccia Indietro per tornare alla finestra di progettazione.Select the back arrow to return to the designer.
  3. Nella scheda Inserisci scegliere o toccare Raccolta, quindi scegliere o toccare la raccolta Orizzontale.On the Insert tab, click or tap Gallery, and then click or tap the Horizontal gallery.

  4. Nel riquadro di destra, scegliere o toccare l'opzione in cui il titolo e sottotitolo si sovrappongono alla grafica:In the right-hand pane, click or tap the option in which the title and the subtitle overlay the graphic:

  5. Impostare la proprietà Items della raccolta su Inventory:Set the Items property of the gallery to Inventory:

  6. Rinominare la raccolta in ProductGallery e spostare la raccolta in modo che non blocchi gli altri controlli.Rename the gallery to ProductGallery, and move the gallery so it doesn't block the other controls. Ridimensionare la raccolta in modo che visualizzi tre prodotti:Resize the gallery so it shows three products:

  7. Nel primo elemento della raccolta selezionare l'etichetta inferiore:In the first item of the gallery, select the bottom label:

    Nota

    Quando si modifica il primo elemento di una raccolta, si modificano automaticamente tutti gli altri elementi della raccolta.When you change the first item in any gallery, you automatically change all other items in the gallery.

  8. Impostare la proprietà Text dell'etichetta sull'espressione seguente:Set the Text property of the label to the following expression:
    ThisItem!UnitsInStockThisItem!UnitsInStock

    In questo caso, l'etichetta visualizza le unità a magazzino per ogni prodotto:When you do this, the label shows the units in stock for each product:

Nota

Per impostazione predefinita, la proprietà Text dell'etichetta superiore è impostata su ThisItem!ProductName.By default, the Text property of the top label is set to ThisItem!ProductName. È possibile modificarla impostandola su qualsiasi altro elemento della raccolta.You can change it to any other item in your collection. Ad esempio, se la raccolta include campi ProductDescription o Price, è possibile impostare l'etichetta su ThisItem!ProductDescription o ThisItem!Price.For example, if your collection has ProductDescription or Price fields, you can set the label to ThisItem!ProductDescription or ThisItem!Price.

Eseguendo questa procedura sono stati importati dati contenenti immagini con estensione jpg in una raccolta.Using these steps, you imported data that includes .jpg images into a collection. È stata quindi aggiunta una raccolta che visualizza i dati ed è stata configurata un'etichetta per visualizzare le unità a magazzino per ogni prodotto.You then added a gallery that displays the data and configured a label to show the units in stock for each product.

  1. Selezionare un elemento della raccolta, ad eccezione del primo.Select any item in the gallery except the first one. Nell'angolo superiore sinistro viene visualizzata l'icona di modifica.The edit icon displays (upper left corner). Selezionare l'icona di modifica:Select the edit icon:
  2. Nella scheda Inserisci selezionare Forme e quindi il rettangolo.On the Insert tab, select Shapes, and then select the rectangle. In ogni elemento della raccolta viene visualizzato un rettangolo blu.A blue solid rectangle appears in each gallery item.
  3. Nella scheda Home selezionare Riempimento e quindi Nessun riempimento.On the Home tab, select Fill, and then select No Fill.
  4. Selezionare Bordo, Stile bordo e quindi la linea continua.Select Border, select Border Style, and then select the solid line.
  5. Selezionare di nuovo Bordo e impostare lo spessore su 3.Select Border again, and set the thickness to 3. Ridimensionare il rettangolo in modo che circondi l'elemento della raccolta.Resize the rectangle so that it surrounds the gallery item. Gli elementi della raccolta hanno ora un bordo blu e dovrebbero apparire come segue:The items in your gallery now have a blue border and should look similar to the following:
  6. Nella scheda Forma selezionare Visibile e immettere la formula seguente nella barra della formula:On the Shape tab, select Visible, and then enter the following formula in the Formula Bar:

    If(ThisItem!IsSelected, true)If(ThisItem!IsSelected, true)

    Un rettangolo blu racchiude la selezione corrente in una raccolta.A blue rectangle surrounds the current selection in a gallery. Selezionare alcuni elementi della raccolta per verificare che sia presente il rettangolo attorno a ogni elemento selezionato.Select a few gallery items to confirm that the rectangle appears around each item that you select. Tenere presente che è anche possibile aprire Anteprima per visualizzare e testare gli elementi che si stanno creando.Remember, you can also open Preview to see and test what you're creating.

Suggerimento

Selezionare il rettangolo, selezionare Riordina nella scheda Home e quindi Porta in secondo piano.Select the rectangle, select Reorder on the Home tab, and then select Send to Back. Usando questa funzionalità è possibile selezionare un elemento della raccolta senza il bordo bloccando tutti gli altri elementi.Using this feature, you can select a gallery item without the border blocking anything.

Eseguendo questa procedura è stato aggiunto un bordo alla sezione corrente nella raccolta.Using these steps, you added a border around the current selection in the gallery.

In questa procedura gli elementi della raccolta vengono ordinati in ordine crescente o decrescente.In these steps, we are going to sort the gallery items in ascending and descending order. Viene anche aggiunto un dispositivo di scorrimento per filtrare gli elementi della raccolta in base alle unità a magazzino specificate.Also, we'll add a slider control to 'filter' gallery items by the units in stock that you choose.

Ordinare in ordine crescente o decrescenteSort in ascending or descending order

  1. Selezionare un elemento della raccolta, ad eccezione del primo.Select any item in the gallery except the first one.
  2. La proprietà Items è impostata su Inventory, ovvero sul nome della raccolta.The Items property is currently set to Inventory (the name of your collection). Modificare la proprietà impostandola su:Change it to the following:

    Sort(Inventory, ProductName)Sort(Inventory, ProductName)

    Quando si esegue questa operazione, gli elementi della raccolta vengono ordinati in base al nome del prodotto in ordine crescente: When you do this, the items in the gallery are sorted by the product name in ascending order:

    Provare l'ordine decrescente.Try descending order. Impostare la proprietà Items della raccolta sulla formula seguente:Set the Items property of the gallery to the following formula:

    Sort(Inventory, ProductName, Descending)Sort(Inventory, ProductName, Descending)

  1. Aggiungere un dispositivo di scorrimento (scheda Inserisci > Controlli), rinominarlo in StockFilter e spostarlo nella raccolta.Add a Slider control (Insert tab > Controls), rename it to StockFilter, and move it under the gallery.
  2. Configurare il dispositivo di scorrimento in modo che gli utenti non possano impostarlo su un valore non compreso nell'intervallo di unità a magazzino:Configure the slider so that users can't set it to a value outside the range of units in stock:

    1. Nella scheda Contenuto selezionare Min e quindi immettere l'espressione seguente:On the Content tab, select Min, and then enter the following expression:
      Min(Inventory, UnitsInStock)
    2. Nella scheda Contenuto selezionare Max e quindi immettere l'espressione seguente:On the Content tab, select Max, and then enter the following expression:
      Max(Inventory, UnitsInStock)
  3. Selezionare un elemento della raccolta, ad eccezione del primo.Select any item in the gallery except the first one. Impostare la proprietà Items della raccolta sull'espressione seguente:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value)
  4. In Anteprima regolare il dispositivo di scorrimento su un valore compreso tra la quantità massima e minima nella raccolta.In Preview, adjust the slider to a value that's between the highest and the lowest quantity in the gallery. Quando si regola il dispositivo di scorrimento, la raccolta visualizza solo i prodotti in quantità inferiore al valore specificato:As you adjust the slider, the gallery shows only those products that are less than the value you choose:

Si procede ora all'aggiunta del filtro:Now, let's add to our filter:

  1. Tornare alla finestra di progettazione.Go back to the designer.
  2. Nella scheda Inserisci selezionare Testo, Input di testo e rinominare il nuovo controllo NameFilter.On the Insert tab, select Text, select Input Text, and rename the new control to NameFilter. Spostare il controllo di testo sotto il dispositivo di scorrimento.Move the text control below the slider.
  3. Impostare la proprietà Items della raccolta sull'espressione seguente:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value && NameFilter!Text in ProductName)
  4. In Anteprima impostare il dispositivo di scorrimento su 30e digitare la lettera g nel controllo di input di testo.In Preview, set the slider to 30, and type the letter g in the text-input control. La raccolta visualizza il solo prodotto con meno di 30 unità a magazzino e con un nome con la lettera "g":The gallery shows the only product with less than 30 units in stock and has a name with the letter "g":

suggerimenti e consigliTips and Tricks

  • In qualsiasi momento è possibile selezionare pulsante Anteprima () per visualizzare l'elemento creato e testarlo.At anytime, you can select the preview button () to see what you created and test it.
  • Quando si progetta l'app, è possibile ridimensionare i controlli e spostarli facendo clic e trascinando.When designing your app, you can re-size the controls and move them around using click-and-drag.
  • Premere ESC o fare clic sulla X per chiudere la finestra di anteprima.Press ESC or select the X to close the preview window.
  • Quando si usa una raccolta, selezionare il primo elemento della raccolta per modificare tutti gli elementi della raccolta.When using a gallery, select the first item in the gallery to change all items in the gallery. Ad esempio, selezionare il primo elemento per aggiungere un bordo a tutti gli elementi nella raccolta.For example, select the first item to add a border to all items in the gallery.
  • Per aggiornare le proprietà della raccolta, selezionare un elemento della raccolta, ad eccezione del primo.To update the properties of the gallery, select any item in the gallery except the first one. Ad esempio, selezionare il secondo elemento per aggiornare la proprietà Items, ShowScrollbar e altre proprietà che si applicano alla raccolta (non gli elementi nella raccolta).For example, select the second item to update the Items, ShowScrollbar, and other properties that apply to the gallery (not the items in the gallery).

Che cosa si è appresoWhat you learned

In questo argomento:In this topic, you:

  • È stata creata una raccolta, sono stati importati dati contenenti immagini con estensione jpg nella raccolta e sono stati visualizzati i dati in una raccolta.Created a collection, imported data that includes .jpg images into that collection, and showed the data in a gallery.
  • In ogni immagine della raccolta è stata configurata un'etichetta che visualizza le unità a magazzino per l'elemento.Under each image in the gallery, configured a label that lists the units in stock for that item.
  • È stato aggiunto un bordo intorno all'elemento selezionato.Added a border around the item that you select.
  • Sono stati ordinati gli elementi in base al nome di prodotto in ordine crescente o decrescente.Sorted the items by product name in ascending and descending order.
  • È stato aggiunto un dispositivo di scorrimento e un controllo di input di testo per filtrare i prodotti in base alle unità a magazzino e nome di prodotto.Added a slider and an input text control to filter the products by units in stock and product name.