Creare una raccolta per visualizzare immagini e testo di prodotti diversi e ordinare e filtrare le informazioni.

In PowerApps è possibile usare una raccolta per visualizzare diversi elementi correlati, come in un catalogo. Le raccolte sono ideali per la visualizzazione di informazioni sui prodotti, ad esempio nomi e prezzi. In questo argomento viene creata una raccolta e vengono ordinate e filtrate le informazioni usando funzioni simili a quelle di Excel. Inoltre, quando viene selezionato un elemento, viene inserito un bordo intorno all'elemento.

Nota:

In questo argomento viene usata un'app per tablet. È possibile usare un'app per telefono ma è necessario ridimensionare alcuni controlli.

Prerequisiti

  • Iscriversi in PowerApps e installare PowerApps. Dopo aver aperto PowerApps, accedere usando le stesse credenziali usate per l'iscrizione.
  • Creare un'app per tablet basata su un modello, sui dati o completamente nuova.
  • Informazioni su come configurare un controllo.
  • Questa procedura usa CreateFirstApp come dati di input di esempio contenente immagini con estensione jpg. Il file con estensione zip include un file XML che può essere convertito in Excel. In caso contrario, PowerApps legge automaticamente i file contenuti nei file con estensione zip e ne esegue l'importazione. È possibile scaricare e usare questi dati di esempio o importare i propri dati.

Visualizzare dati in una raccolta

  1. Creare una raccolta denominata Inventory usando i dati di esempio. La procedura include i passaggi seguenti:

    1. Nella scheda Inserisci selezionare Controlli e quindi Importa:


    1. Impostare la proprietà OnSelect del controllo di importazione sulla formula seguente:
    Collect(Inventory, Import1!Data)


    1. Selezionare il pulsante Importa dati per aprire Esplora risorse. Selezionare CreateFirstApp.zip e quindi Apri. 1. Nel menu File selezionare Raccolte. Viene visualizzata la raccolta Inventory con i dati importati:

    È stata creata la raccolta Inventory contenente informazioni su cinque prodotti, tra cui immagine, nome del prodotto e numero delle unità a magazzino.

    Nota:

    Il controllo di importazione consente di importare dati in formato Excel e creare la raccolta. Il controllo di importazione esegue l'importazione dei dati durante la creazione e la visualizzazione in anteprima dell'app. Attualmente, il controllo di importazione non importa i dati durante la pubblicazione dell'app.

  2. Selezionare la freccia Indietro per tornare alla finestra di progettazione.

  3. Nella scheda Inserisci scegliere o toccare Raccolta, quindi scegliere o toccare la raccolta Orizzontale.

  4. Nel riquadro di destra, scegliere o toccare l'opzione in cui il titolo e sottotitolo si sovrappongono alla grafica:

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

  6. Rinominare la raccolta in ProductGallery e spostare la raccolta in modo che non blocchi gli altri controlli. Ridimensionare la raccolta in modo che visualizzi tre prodotti:

  7. Nel primo elemento della raccolta selezionare l'etichetta inferiore:

    Nota:

    Quando si modifica il primo elemento di una raccolta, si modificano automaticamente tutti gli altri elementi della raccolta.

  8. Impostare la proprietà Text dell'etichetta sull'espressione seguente:
    ThisItem!UnitsInStock

    In questo caso, l'etichetta visualizza le unità a magazzino per ogni prodotto:

Nota:

Per impostazione predefinita, la proprietà Text dell'etichetta superiore è impostata su ThisItem!ProductName. È possibile modificarla impostandola su qualsiasi altro elemento della raccolta. Ad esempio, se la raccolta include campi ProductDescription o Price, è possibile impostare l'etichetta su ThisItem!ProductDescription o ThisItem!Price.

Eseguendo questa procedura sono stati importati dati contenenti immagini con estensione jpg in una raccolta. È stata quindi aggiunta una raccolta che visualizza i dati ed è stata configurata un'etichetta per visualizzare le unità a magazzino per ogni prodotto.

Evidenziare l'elemento della raccolta selezionato

  1. Selezionare un elemento della raccolta, ad eccezione del primo. Nell'angolo superiore sinistro viene visualizzata l'icona di modifica. Selezionare l'icona di modifica:

  2. Nella scheda Inserisci selezionare Forme e quindi il rettangolo. In ogni elemento della raccolta viene visualizzato un rettangolo blu.
  3. Nella scheda Home selezionare Riempimento e quindi Nessun riempimento.
  4. Selezionare Bordo, Stile bordo e quindi la linea continua.
  5. Selezionare di nuovo Bordo e impostare lo spessore su 3. Ridimensionare il rettangolo in modo che circondi l'elemento della raccolta. Gli elementi della raccolta hanno ora un bordo blu e dovrebbero apparire come segue:

  6. Nella scheda Forma selezionare Visibile e immettere la formula seguente nella barra della formula:

    If(ThisItem!IsSelected, true)

    Un rettangolo blu racchiude la selezione corrente in una raccolta. Selezionare alcuni elementi della raccolta per verificare che sia presente il rettangolo attorno a ogni elemento selezionato. Tenere presente che è anche possibile aprire Anteprima per visualizzare e testare gli elementi che si stanno creando.

Suggerimento:

Selezionare il rettangolo, selezionare Riordina nella scheda Home e quindi Porta in secondo piano. Usando questa funzionalità è possibile selezionare un elemento della raccolta senza il bordo bloccando tutti gli altri elementi.

Eseguendo questa procedura è stato aggiunto un bordo alla sezione corrente nella raccolta.

Ordinare e filtrare gli elementi nella raccolta

In questa procedura gli elementi della raccolta vengono ordinati in ordine crescente o decrescente. Viene anche aggiunto un dispositivo di scorrimento per filtrare gli elementi della raccolta in base alle unità a magazzino specificate.

Ordinare in ordine crescente o decrescente

  1. Selezionare un elemento della raccolta, ad eccezione del primo.
  2. La proprietà Items è impostata su Inventory, ovvero sul nome della raccolta. Modificare la proprietà impostandola su:

    Sort(Inventory, ProductName)

    Quando si esegue questa operazione, gli elementi della raccolta vengono ordinati in base al nome del prodotto in ordine crescente:

    Provare l'ordine decrescente. Impostare la proprietà Items della raccolta sulla formula seguente:

    Sort(Inventory, ProductName, Descending)

Aggiungere un dispositivo di scorrimento e filtrare gli elementi della raccolta

  1. Aggiungere un dispositivo di scorrimento (scheda Inserisci > Controlli), rinominarlo in StockFilter e spostarlo nella raccolta.
  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:

    1. Nella scheda Contenuto selezionare Min e quindi immettere l'espressione seguente:
      Min(Inventory, UnitsInStock)
    2. Nella scheda Contenuto selezionare Max e quindi immettere l'espressione seguente:
      Max(Inventory, UnitsInStock)
  3. Selezionare un elemento della raccolta, ad eccezione del primo. Impostare la proprietà Items della raccolta sull'espressione seguente:
    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. Quando si regola il dispositivo di scorrimento, la raccolta visualizza solo i prodotti in quantità inferiore al valore specificato:

Si procede ora all'aggiunta del filtro:

  1. Tornare alla finestra di progettazione.
  2. Nella scheda Inserisci selezionare Testo, Input di testo e rinominare il nuovo controllo NameFilter. Spostare il controllo di testo sotto il dispositivo di scorrimento.
  3. Impostare la proprietà Items della raccolta sull'espressione seguente:
    Filter(Inventory, UnitsInStock<=StockFilter!Value && NameFilter!Text in ProductName)
  4. In Anteprima impostare il dispositivo di scorrimento su 30*e digitare la lettera *g nel controllo di input di testo. La raccolta visualizza il solo prodotto con meno di 30 unità a magazzino e con un nome con la lettera "g":

suggerimenti e consigli

  • In qualsiasi momento è possibile selezionare pulsante Anteprima ( ) per visualizzare l'elemento creato e testarlo.
  • Quando si progetta l'app, è possibile ridimensionare i controlli e spostarli facendo clic e trascinando.
  • Premere ESC o fare clic sulla X per chiudere la finestra di anteprima.
  • Quando si usa una raccolta, selezionare il primo elemento della raccolta per modificare tutti gli elementi della raccolta. Ad esempio, selezionare il primo elemento per aggiungere un bordo a tutti gli elementi nella raccolta.
  • Per aggiornare le proprietà della raccolta, selezionare un elemento della raccolta, ad eccezione del primo. 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).

Che cosa si è appreso

In questo argomento:

  • È stata creata una raccolta, sono stati importati dati contenenti immagini con estensione jpg nella raccolta e sono stati visualizzati i dati in una raccolta.
  • In ogni immagine della raccolta è stata configurata un'etichetta che visualizza le unità a magazzino per l'elemento.
  • È stato aggiunto un bordo intorno all'elemento selezionato.
  • Sono stati ordinati gli elementi in base al nome di prodotto in ordine crescente o decrescente.
  • È 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.