Esercizio - Uso delle variabili e delle raccolte

Completato

Questa esercitazione pratica illustra come creare e usare le funzioni Global, Contextual e Collection.

  1. Accedere a Power Apps Maker Portal (make.powerapps.com).

  2. Dal pannello di spostamento a sinistra della schermata iniziale selezionare + Crea, quindi App vuota; nella finestra popup Crea sotto App canvas vuota selezionare Crea.

  3. Assegnare all'app il nome Esercizio di raccolta, lasciare il formato Tablet, quindi selezionare Crea.

  4. Dopo alcuni minuti si apre la nuova app. È possibile ignorare la finestra di dialogo di benvenuto (se visualizzata). Nel pannello Visualizzazione struttura ad albero, trovare e selezionare l'oggetto App, quindi selezionare la proprietà OnStart.

    Screenshot della schermata di visualizzazione con OnStart e App evidenziati.

  5. Impostare la proprietà OnStart su questa formula che si usa per creare una raccolta di numeri cliente e numeri di fattura associati (copiarla e incollarla nella barra della formula fx):

    ClearCollect(colCustomer,
    {CustomerNumber: 7470, InvoiceNumber: "INV70817"},
    {CustomerNumber: 4259, InvoiceNumber: "INV29595"},
    {CustomerNumber: 8251, InvoiceNumber: "INV74302"},
    {CustomerNumber: 2338, InvoiceNumber: "INV35115"},
    {CustomerNumber: 1524, InvoiceNumber: "INV82337"},
    {CustomerNumber: 1530, InvoiceNumber: "INV82338"}
    );
    Set(varUserDisplayName, User().FullName)
    
  6. Selezionare i puntini di sospensione (…) accanto all'oggetto App, quindi selezionare Run OnStart. Viene eseguita la formula OnStart appena immessa e viene popolata la raccolta colCustomer.

  7. Per visualizzare la raccolta, selezionare la scheda Inserisci (o + Inserisci dalla barra dei comandi) e aggiungere una Raccolta verticale, impostare la proprietà Items su colCustomer.

    Apportare le modifiche seguenti alla nuova Gallery1 usando il pannello Proprietà a destra nella schermata:

    • Layout: Titolo e sottotitolo

    • Altezza: 650

    • Campi: modificare Titolo in modo che rifletta CustomerNumber nel pannello Dati (in alternativa, è possibile selezionare l'etichetta Titolo all'interno della raccolta e modificare la proprietà Text in ThisItem.CustomerNumber)

    • Eliminare l'icona NextArrow (selezionarla dalla raccolta)

  8. In Raccolta selezionare l'icona di modifica con la matita oppure l'etichetta Titolo, quindi usare la scheda Inserisci per aggiungere un'Icona. Cercare e selezionare la tabella Cestino. Spostare l'icona Cestino sul lato destro della raccolta.

    La Raccolta include ora l'icona Cestino.

    Screenshot della raccolta con le icone Cestino visualizzate.

  9. Selezionare l'icona Cestino e impostare la formula di seguito sulla proprietà OnSelect:

    Remove(colCustomer,ThisItem)

  10. Tenere premuto il tasto ALT e selezionare la prima icona Cestino.

    La riga selezionata viene eliminata dalla raccolta. Anche se questo processo funziona, si consiglia di impostare la visualizzazione di un messaggio di avviso che indica che la riga verrà eliminata.

    Con una variabile contestuale creare un avviso popup per avvisare l'utente dell'eliminazione in sospeso e dargli l'opzione di annullare l'operazione.

  11. Innanzitutto modificare la proprietà OnSelect dell'icona Cestino e impostarla su quanto segue:

    UpdateContext({varPopup:true})

  12. Per creare il popup, selezionare la schermata (al di fuori del controllo raccolta) e usare Inserisci per aggiungere un Rettangolo (è possibile immettere "rettangolo" nella casella di ricerca del menu Inserisci per rendere più rapida la procedura di ricerca).

  13. Modificare le proprietà del Rettangolo come segue:

    • Nome: rectangle_backgrd

    • Dimensioni: 744 (larghezza); 720 (altezza)

    • Riempimento: RGBA(166, 166, 166, .50)

    Posizionare il rettangolo per coprire la raccolta.

  14. Aggiungere un altro Rettangolo e aggiornare le proprietà come indicato di seguito:

    • Nome: rectangle_foregrd

    • Dimensioni: 744 (larghezza); 348 (altezza)

    • Riempimento: RGBA(255, 255, 255, 1)

    • BorderThickness: 1

    Posizionare questo rettangolo per adattarlo alla parte superiore dell'altro rettangolo.

  15. Selezionare Inserisci>Etichetta di testo.

  16. Apportare le seguenti modifiche alle proprietà dell'etichetta Testo:

    • Nome: lbl_popup

    • Dimensione carattere: 15

    • Spessore carattere: Grassetto

    • Allineamento testo: Al centro

  17. Impostare il Testo lbl_popup sulla formula di seguito:

    varUserDisplayName & "
    Please click Delete to confirm deletion of Invoice#" & " " & Gallery1.Selected.InvoiceNumber
    
  18. Selezionare Inserisci>Pulsante, assegnare al nuovo pulsante il nome: button_Delete e impostare la proprietà Text su: Elimina

  19. Impostare la proprietà ButtonOnSelect di Elimina su quanto segue:

    Remove(colCustomer,LookUp(colCustomer,CustomerNumber=Gallery1.Selected.CustomerNumber));
    UpdateContext({varPopup:false})
    
  20. Selezionare Inserisci>Pulsante, assegnare al nuovo pulsante il nome: button_Cancel e impostare la proprietà Text su: Annulla

  21. Impostare la proprietà OnSelect del pulsante Annulla su quanto segue:

    UpdateContext({varPopup:false})

  22. Disporre i nuovi controlli creati sopra Gallery1 come segue:

    Screenshot dei pulsanti Elimina e Annulla.

  23. Selezionare tutti questi controlli insieme in modo da poterli raggruppare. Tenere premuto il tasto CTRL e selezionare i seguenti controlli:

    • rectangle_backgrd

    • rectangle_foregrd

    • lbl_popup

    • button_Delete

    • button_Cancel

  24. Dopo averli tutti selezionati, fare clic con il pulsante destro del mouse e scegliere Gruppo. Impostare la proprietà Visible di Group1 su:

    varPopup

    In tal modo dovrebbero scomparire tutti dallo schermo, ma in caso contrario, tenere premuto il tasto ALT e selezionare il pulsante Cancel.

    Si è creata una finestra popup che elimina il cliente selezionato dalla raccolta.

    Ora si procederà al test della funzione Delete.

  25. Tenere premuto il tasto ALT e selezionare l'icona Cestino per la fattura INV29595.

  26. Selezionare il pulsante Elimina, INV29595 viene rimosso dalla raccolta e la finestra popup scompare.

  27. Tenere premuto di nuovo il tasto ALT e selezionare l'icona Cestino per la fattura INV74302.

  28. Questa volta, selezionare il pulsante Annulla. La finestra popup si chiude e la fattura INV74302 rimane nella raccolta.

Sono state create una raccolta dinamica, una variabile globale e una finestra popup che usa una variabile contestuale.