Esercizio - Uso dei dati relazionali

  • 10 minuti

In questo esercizio si impara come accedere ai dati correlati e come creare record correlati in più tabelle. Per questo esempio si usano le raccolte, che archiviano i dati solo temporaneamente. Se si desidera una soluzione che esegua il salvataggio in Dataverse o SharePoint, usare la funzione Patch.

Per questo esercizio si creerà un'app denominata Shopping Cart. Si usano una tabella padre (intestazione di carico), una tabella figlio (voci di carico) e una tabella Products (tabella di riferimento). Le relazioni si presentano come segue:

Diagramma delle relazioni tra le tre tabelle.

Il diagramma precedente mostra tre tabelle con chiavi primarie, ma la tabella ReceiptLineItems (a destra) ha due chiavi esterne che fanno riferimento rispettivamente all'ID di ReceiptHeader e all'ID di Products. I simboli delle linee del diagramma che vanno dalle tabelle ReceiptHeader e Products alla tabella ReceiptLineItems indicano una relazione uno-a-molti. Pertanto è possibile inserire un singolo campo ID (da ciascuno) per molti elementi diversi in ReceiptLineItems.

Inizio dell'esercizio

  1. Passare a make.powerapps.com.

  2. Selezionare + Crea.

  3. Selezionare App vuota, quindi App canvas vuota.

  4. Assegnare all'app il nome Shopping Cart, assicurarsi che il formato sia Tablet, quindi selezionare Crea.

    Screenshot del menu a comparsa Crea app canvas.

  5. A questo punto selezionare Inserisci dal menu in alto, quindi Pulsante.

  6. Nella proprietà OnSelect di questo pulsante inserire il codice seguente (è possibile copiare e incollare):

    ClearCollect(Products,
 {ID:1, Name:"T-Shirt", Category: "Clothing"},
 {ID:2, Name:"Sweatshirt", Category: "Clothing"},
 {ID:3, Name:"Socks", Category: "Clothing"},
 {ID:4, Name:"Necklace", Category: "Jewelry"},
 {ID:5, Name:"Ring", Category: "Jewelry"},
 {ID:6, Name:"Coffee Mug", Category: "Misc."},
 {ID:7, Name:"Keychain", Category: "Misc."}
)

  7. Tenere premuto il tasto ALT e selezionare il pulsante. È ora disponibile in memoria una raccolta (collection) chiamata Products che fornisce i dati per la prima raccolta (gallery). È possibile mettere da parte questo pulsante.

  8. Aggiungere un controllo Raccolta verticale alla schermata e selezionare la raccolta Products come origine dati. Questa operazione sostituisce CustomGallerySample con Products nella proprietà Items.

    Screenshot dell'inserimento della raccolta e della selezione di Products.

  9. Modificare il Layout in Titolo e sottotitolo.

    Screenshot della configurazione Layout della raccolta.

  10. Spostare la nuova raccolta all'estrema sinistra della schermata e impostare la proprietà OnSelect della raccolta come segue:

    Collect(colCart, ThisItem)

  11. Ora aggiungere un secondo controllo Raccolta verticale (Gallery2), con l'origine dati impostata come colCart e il Layout impostato su Titolo e sottotitolo. Eliminare l'icona della freccia a destra dalla raccolta.

  12. Posizionare questa raccolta sul lato destro della schermata, come illustrato sotto, con Gallery1 a sinistra e Gallery2 a destra:

    Screenshot delle due raccolte con il pulsante.

  13. Premere il tasto ALT e selezionare l'icona che punta a destra nella riga superiore di Gallery1. Gallery2 dovrebbe ora contenere un articolo. È possibile continuare a premere il tasto ALT per selezionare gli articoli da Gallery1 e inserirli in Gallery2.

  14. Ora aggiungere un secondo Pulsante alla schermata. Impostare la proprietà Text del pulsante su "Completa transazione" e la proprietà OnSelect sulla formula seguente (che è possibile copiare e incollare):

    Collect(
  ReceiptHeader,
   {
        ID: If(
            IsEmpty(ReceiptHeader),
            1,
            Last(ReceiptHeader).ID + 1
        ),
        Name: User().FullName,
        Date: Today()
    }
);
ForAll(
    colCart,
    Collect(
        ReceiptLineItems,
        {
            ID: If(
                IsEmpty(ReceiptLineItems),
                1,
                Last(ReceiptLineItems).ID + 1
            ),
            ProductID: ThisRecord.ID,
            ReceiptHeaderID: Last(ReceiptHeader).ID
        }
    )
);
Clear(colCart)

  15. Questo codice crea la raccolta a elemento singolo ReceiptHeader che include informazioni sull'utente corrente, la data corrente e imposta un ID per l'utente. Quindi per ogni articolo in colCart viene aggiunta una voce in ReceiptLineItems. Questa voce include un campo ID numerato automaticamente, l'ID del record ReceiptHeader appena creato (che collega l'articolo all'evento di acquisto) e l'ID del prodotto in colCart. colCart viene quindi cancellato perché viene inviato. È quindi necessario riempire il carrello prima di effettuare la selezione.

  16. Premere il tasto ALT e selezionare il pulsante "Completa transazione" per caricare questa raccolta.

  17. Creare una Nuova schermata (Screen2) in modo da poter avere un nuovo canvas in cui verificare l'aspetto dei dati appena creati.

  18. Passare alla nuova schermata e aggiungere due controlli Raccolta verticale, formattati allo stesso modo dei due precedenti. Impostare l'origine dati o la proprietà Items della raccolta di sinistra (Gallery3) su ReceiptHeader e selezionare ReceiptLineItems come origine per la seconda raccolta (Gallery4).

  19. Nella raccolta di sinistra (Gallery3) modificare la proprietà Text del Sottotitolo e impostarla su ThisItem.Date.

  20. Passare alla raccolta di destra (Gallery4) e modificare la proprietà Items come segue:

    Filter(ReceiptLineItems, ReceiptHeaderID=Gallery3.Selected.ID)

  21. Ancora in Gallery4 modificare la proprietà Text del Titolo come segue:

    LookUp(Products, ID=ThisItem.ProductID).Name

  22. Quindi, ancora in Gallery4, modificare la proprietà Text del Sottotitolo come segue:

    LookUp(ReceiptHeader, ID=ThisItem.ReceiptHeaderID).Name

  23. A questo punto si dispone di una pagina funzionante di cronologia degli ordini, con le informazioni sull'intestazione dell'ordine a sinistra in Gallery3 e gli articoli acquistati a destra in Gallery4. È possibile selezionare un elemento Intestazione carico a sinistra per visualizzare le voci del carico a destra.

    Screenshot delle due raccolte della cronologia degli ordini.

È possibile tornare alla prima schermata e selezionare nuovi articoli da Gallery1 per riempire il carrello (rappresentato da Gallery2). È quindi possibile scegliere il pulsante Completa transazione, passare a Screen2 e vedere un altro ordine effettuato a proprio nome. Selezionando uno dei due ordini, vengono mostrati gli articoli acquistati per quel particolare ordine.

È possibile continuare a lavorare alla soluzione e completarla. Si possono aggiungere più etichette descrittive, elementi di navigazione e si può definire cosa farebbe l'utente con un'app come questa.

Questo esercizio dovrebbe avere evidenziato le possibilità offerte dall'utilizzo dei dati relazionali. Sebbene sia lungi dall'essere completa, questa soluzione permette di iniziare a vedere le possibilità derivanti dall'uso di tecniche come questa nelle app.