Esercizio: Popolamento e filtro della raccolta

25 minuti

Ora che è stata aggiunta l'origine dati a Power Apps, è stata aggiunta una raccolta ed è stata popolata la tabella, si è pronti a visualizzare i dati. Tornare all'app canvas e andare alla schermata Scr_AllExpenses. Se la schermata è aperta in un'altra scheda, si noti che la raccolta non è stata ancora popolata. Power Apps memorizza l'origine dati nella cache e non sempre dispone della versione più aggiornata qualora si apportino modifiche.

Per risolvere il problema, effettuare i seguenti passaggi:

Selezionare il pulsante Dati nel menu a sinistra, quindi individuare Expense Reports.
Selezionare il menu con i puntini di sospensione Altre azioni (...) a destra della tabella di Dataverse Expense Reports, quindi selezionare Aggiorna. I dati di Expense Report dovrebbero popolare la raccolta.
Tornare alla Visualizzazione struttura ad albero, dove si possono selezionare vari controlli ed è possibile vedere un menu di schermate dell'app. L'icona Visualizzazione struttura ad albero in alto a destra nel menu laterale e ha l'aspetto di tre fogli impilati.
Trascinare la raccolta nella parte inferiore della schermata in modo da liberare la parte superiore. Nella scheda Proprietà del pannello sul lato destro della schermata, nell'area Posizione impostare la proprietà Y su 236 e nell'area Dimensioni impostare la proprietà Height su 900. La raccolta dovrebbe iniziare dalla coordinata Y 236 e estendersi fino alla parte inferiore dello schermo.

Successivamente, è necessario visualizzare informazioni più utili. La posizione è utile, ma nella raccolta è presente solo una data e non è chiaro se rappresenta la data di partenza o di arrivo.
Selezionare Subtitle2, quindi esaminare la proprietà Text nella scheda Proprietà. La raccolta potrebbe aver assegnato un campo diverso, ma in questo è mostrato il valore ThisItem.'Created On'. Tutte le informazioni della tabella nella raccolta iniziano con ThisItem, che specifica la riga. Per questo motivo, è possibile manipolare solo la prima riga ed è necessario usare la logica per fare in modo che le righe funzionino in modo diverso. Questo argomento è spiegato più avanti. Per il momento, si imposta questo campo sulla data di partenza.
Nella proprietà Text immettere ThisItem.'Arrival Date'.

Si lavorerà su due elementi riguardanti questa data. In primo luogo, sull'ora che viene visualizzata e che non è necessaria per questo esercizio. In secondo luogo, sul fatto che gli utenti non hanno modo di capire se la data visualizzata è quella di partenza o di arrivo. Per risolvere il problema, è necessario apportare alcune modifiche al testo. Spesso si usa la funzione Text quando si tenta di eseguire una formattazione.
Aggiorniamo la proprietà Text per rimuovere l'ora dalla data di arrivo creando la formula seguente:
```
Text(ThisItem.'Arrival Date', DateTimeFormat.ShortDate)
```
A questo punto le informazioni visualizzate dovrebbero essere le stesse precedenti, ma nel formato desiderato, quindi senza l'indicazione dell'ora. Per aggiungere insieme stringhe di testo, usare una e commerciale (&), mentre per definire testo nella barra della formula usare le virgolette (come si può aver notato quando è stata creata la prima schermata). Combiniamo questi principi per creare le date di arrivo e di partenza da visualizzare come un intervallo di date.
Aggiornare la formula con il codice seguente.
```
Text(ThisItem.'Arrival Date', DateTimeFormat.ShortDate) & " - " & Text(ThisItem.'Departure Date', DateTimeFormat.ShortDate)
```
La parte DateTimeFormat della formula scompare quando si fa clic sulla barra della formula. Questa situazione si verifica per alcune funzioni e non influisce negativamente sul codice. Quando si fa nuovamente clic sulla barra della formula, la formula torna a essere visualizzata interamente.
Con il passaggio successivo aggiorniamo la formula ancora una volta per mostrare come aggiungere altro testo a vantaggio di un'esperienza utente ottimale. Aggiungiamo "Arrival" e "Departure" in modo da evitare confusione su ciò che rappresenta ciascuna data. È possibile aggiornare la formula Text con quanto segue:
```
"Arrival: " & Text(ThisItem.'Arrival Date', DateTimeFormat.ShortDate) & " - Departure: " & Text(ThisItem.'Departure Date', DateTimeFormat.ShortDate)
```
Ora che la raccolta ha l'aspetto desiderato, creiamo un filtro che consente ai viaggiatori di visualizzare solo i record di loro pertinenza. Attualmente, gli utenti possono visualizzare i dati di tutti i passeggeri nella raccolta. Per filtrare i dati, occorre modificare la proprietà Items della raccolta. Prima di tutto è necessario acquisire le informazioni per l'utente che ha eseguito l'accesso.
Il controllo App è visualizzato nella parte superiore della prima schermata in Visualizzazione struttura ad albero. Selezionare App, quindi selezionare OnStart nel menu a discesa delle proprietà.

La proprietà OnStart permette di immettere una o più funzioni che vengono eseguite quando si avvia l'app. In questo caso, si raccolgono le informazioni relative all'utente che ha effettuato l'accesso. È possibile chiamare questa origine dati in qualsiasi istanza nell'app, ma è preferibile chiamarla una volta sola e successivamente archiviarla per un uso futuro nell'app stessa. Tutte le volte che viene chiamata (in questo caso, da Microsoft Entra ID), l'origine dati riduce le prestazioni dell'app e usa risorse. Per questo motivo, è preferibile chiamarla il minor numero possibile di volte, soprattutto in presenza di elementi che non cambieranno per l'intera istanza dell'app, come i dati dell'utente corrente.

Per memorizzare le informazioni da usare in un secondo momento nell'app, è possibile impostare una variabile. In sostanza, una variabile è un'informazione che può essere espressa in formati diversi, ad esempio testo, data, numero o persino un record (o una riga di dati). Nella scrittura di codice tradizionale è spesso necessario definire il tipo di variabile da usare, ma in Power Apps tale tipo viene calcolato automaticamente. Quando si imposta una variabile, verificare di usare sempre lo stesso tipo (o definizione) per tale variabile in futuro.
Per definire la variabile, immettere la formula seguente nella proprietà OnStart: Set(VarUser, User()).

VarUser è il nome di questa variabile e User() è la definizione, che, in questo caso, è una funzione che raccoglie informazioni da Microsoft Entra ID. Per le variabili è possibile usare qualsiasi nome, tuttavia, come per i controlli, è opportuno iniziare le variabili con var o qualsiasi altra nomenclatura che consenta di ricordarle.

Gli utenti non devono chiedere l'attivazione della proprietà OnStart, ma quando si modifica la proprietà durante la creazione, è necessario attivarla.
Per attivare la variabile, selezionare i puntini di sospensione (...) accanto ad App, quindi selezionare Esegui OnStart dalle opzioni. Ora che la variabile è popolata, è possibile usarla per filtrare la raccolta.
Selezionare Gal_ExpenseReports_AllExpenses in Visualizzazione struttura ad albero, quindi verificare che la proprietà Items sia visibile nel menu a discesa.
Sostituire Expense Reports con: Filter('Expense Reports', Traveler.'Primary Email'=VarUser.Email)

I dati sono ora filtrati in base agli elementi in cui l'utente è elencato come viaggiatore.

Quando si immettono le formule, Power Apps richiede che venga specificata la lingua corretta e offre suggerimenti man mano che si definiscono le formule. Questa funzionalità consente di imparare le formule e di capire come scrivere le espressioni. Si noti inoltre che, per trovare l'indirizzo e-mail, è necessario eseguire il drill-down sulle informazioni relative ai viaggiatori. Poiché si tratta di una colonna di ricerca, contiene tutte le informazioni nella tabella Users. Il periodo può essere considerato come uno strumento che consente di approfondire qualsiasi elemento a cui si fa riferimento. È stato necessario operare in modo analogo per VarUser perché contiene tutte le informazioni della funzione User() che dispone di nome completo, e-mail e foto.

A questo punto, l'aspetto della raccolta è esattamente quello desiderato. È necessario tuttavia aggiungere alcuni elementi alla pagina per renderla più utile e per migliorare l'esperienza utente (UX). La prossima attività prevede di aggiungere un titolo in modo che gli utenti sappiano di trovarsi nella schermata corretta.
Fare clic sullo spazio vuoto sopra la raccolta, quindi selezionare Inserisci.
Selezionare Etichetta di testo per aggiungere una nuova etichetta alla schermata.
Modificare le proprietà seguenti del controllo Etichetta di testo nel riquadro Proprietà o Avanzate. Alcune proprietà sono disponibili anche nella barra dei comandi.
- Text: All Expense Reports
- Size: 24
- FontWeight: Semibold
- Text Alignment: Al centro
- X: 0
- Y: 0
- Width: 640
- Height: 92
- Fill: RGBA(85, 106, 129, 1)
Dopo l'impostazione delle proprietà dell'etichetta, rinominarla per seguire la nomenclatura appresa: Lbl_Header_AllExpenses

A questo punto, occorre individuare un modo per tornare alla schermata iniziale. È possibile eseguire le azioni con un pulsante, ma sono disponibili anche molti controlli per le azioni. Uno di questi controlli è un'icona.
Selezionare Inserisci, quindi il menu a discesa Icone. È possibile scorrere il menu fino all'icona che si intende aggiungere oppure è possibile selezionarne una e modificarla nelle proprietà. Alcuni sviluppatori preferiscono il secondo modo perché consente loro di eseguire una ricerca tra le icone invece di scorrere il menu per trovare quella desiderata.
Per questo esercizio, si usa l'icona Freccia indietro per indicare che la selezione di tale icona comporta il ritorno alla home page. Per trovarla rapidamente, inserire "indietro" nel campo di ricerca Inserisci. Assicurarsi di scegliere l'icona invece della forma.
Modificare le seguenti proprietà dell'icona Freccia indietro:
- X: 9
- Y: 21
- Width: 64
- Height: 50
- Color: RGBA(255, 255, 255, 1)
- OnSelect: Back()
Anche se si sarebbe potuto usare la funzione Navigate(), in questa sede si usa la funzione Back(), che consente all'utente di tornare alla schermata in cui si trovava immediatamente prima di accedere alla schermata corrente. È possibile usare entrambe le funzioni, ma in questo esercizio si usa la funzione Back() per acquisire familiarità con un'altra funzione utile.
Rinominare l'icona in: Icn_Back_AllExpense

Un altro componente che è possibile aggiungere per migliorare l'esperienza utente è un filtro di destinazione in modo che gli utenti possano trovare rapidamente la nota spese desiderata.
Aggiungere un'altra Etichetta di testo alla schermata, quindi impostare le proprietà seguenti:
- Text: Trip Destination
- Size: 18
- X: 0
- Y: 92
- Width: 640
- Height: 144
- Fill: ColorFade(Lbl_Header_AllExpenses.Fill, 30%)
- PaddingTop: 20
- PaddingLeft: 40
- VerticalAlign: VerticalAlign.Top
Rinominare l'etichetta: Lbl_TripDestination_AllExpenses

Si è usata la funzione ColorFade per la proprietà Fill con riferimento alla proprietà Fill della prima etichetta creata. In tutte le app canvas è comune fare riferimento ad altri controlli ed è questo il motivo per cui i nomi sono così importanti. La funzione ColorFade() rende un colore più chiaro o più scuro in base a una percentuale specificata. Le percentuali positive sono visualizzate con un colore più chiaro, mentre quelle negative con un colore più scuro. Questa funzione può essere utile durante la progettazione delle app.

Suggerimento

Quando si definiscono colori personalizzati, è possibile creare una variabile globale anziché fare riferimento a un altro controllo. Ciò è particolarmente utile se si vuole creare un colore da usare in tutta l'app. È possibile usare la proprietà OnStart dell'app, come è stato fatto per VarUser per definire le variabili da usare in tutta l'app.

L'aspetto strano dell'etichetta è dovuto alla sovrapposizione di un menu a discesa. È possibile includere un rettangolo dietro l'etichetta e il menu a discesa, ma più alto è il numero di controlli usati, maggiore è il tempo necessario per caricare la schermata. Per questo motivo, è opportuno usare meno controlli possibili, combinandoli laddove possibile.
Ora si aggiungerà un controllo per selezionare una destinazione. Selezionare Inserisci, Input, quindi selezionare il controllo A discesa. In alternativa, è possibile immettere "drop" nella casella di ricerca Inserisci e selezionare A discesa.
Modificare le proprietà seguenti del controllo A discesa nel riquadro Proprietà o Avanzate.
- X: 35
- Y: 162
- Width: 560
- Height: 50
- Fill: Lbl_Header_AllExpenses.Fill
- ChevronBackground: Lbl_Header_AllExpenses.Fill
- Size: 16
- AllowEmptySelection: true
- Items: Distinct(Filter('Expense Reports', Traveler.'Primary Email' = VarUser.Email), 'Trip Destination')
Le proprietà dei controlli A discesa sono diverse rispetto a quelle degli altri controlli. Si comprenderanno meglio queste differenze quando si acquisirà familiarità con gli altri controlli. Inoltre, la nostra formula usa la funzione Distinct, che restituisce i campi da una tabella, rimuovendo eventuali duplicati. Di conseguenza, se è stata visitata la stessa posizione più volte, tale posizione viene visualizzata solo una volta nel menu a discesa.
Rinominare il controllo A discesa in: Ddn_Destination_AllExpenses

L'attività finale in questa schermata consiste nel verificare che la raccolta applichi i filtri in base alla selezione dal controllo a discesa.
Selezionare la raccolta e modificare la proprietà Items come segue:
```
If(
    IsBlank(Ddn_Destination_AllExpenses.Selected.Value),
    Filter(
        'Expense Reports',
        Traveler.'Primary Email' = VarUser.Email
    ),
    Filter(
        'Expense Reports',
        Traveler.'Primary Email' = VarUser.Email,
        'Trip Destination' = Ddn_Destination_AllExpenses.Selected.Value
    ) 
)
```
È possibile espandere la barra della formula in modo da aumentare lo spazio per digitare. Selezionare Formatta testo dopo aver completato la formula per renderla più chiara e più semplice da leggere.

Questa formula è diventata complessa, quindi occorre spiegare cosa sta succedendo. La proprietà Items iniziale è stata racchiusa in un'istruzione If(), che consente di specificare risultati diversi a seconda di una o più condizioni. In questo caso, il test logico (o condizione) prevede di verificare se il controllo a discesa è vuoto o meno. Se il controllo a discesa è vuoto (valore true), gli elementi per la raccolta vengono filtrati solo dall'utente. In alternativa, se il controllo a discesa non è vuoto (valore false), gli elementi per la raccolta vengono filtrati dall'utente e dalla destinazione.

Nota

Talvolta, quando si ripristina la proprietà Items di una raccolta, alcune etichette cambiano e visualizzano campi diversi. Se alcuni dati sembrano essere scomparsi, verificare che la proprietà Text delle etichette sia corretta.

Per testare il filtro della raccolta, attivare la modalità di anteprima dell'app selezionando l'icona Riproduci nell'angolo superiore destro o selezionando il tasto F5.

L'impostazione della schermata per visualizzare e filtrare i dati di viaggio in base all'utente che ha effettuato l'accesso è stata completata. La schermata dovrebbe essere simile all'immagine seguente.

Continua

Esercizio: Popolamento e filtro della raccolta

Commenti e suggerimenti