Schermata dei dettagli di MS Power Apps e schermata del modulo

In questo tutorial, parleremo di come creare da zero la schermata dei dettagli e la schermata del modulo in Power Apps.

Poiché Power Apps è stato creato per la facilità d'uso, viene fornito prontamente con modelli con schermate, gallerie e altri elementi di base esistenti. Tuttavia, ci saranno momenti in cui dovrai creare la tua app da zero sapendo che potresti avere obiettivi unici nella creazione della tua app.

Questo è il motivo per cui è importante comprendere gli elementi costitutivi che compongono un'app. Lo schermo è uno di questi.

Sommario

• Creazione della schermata dei dettagli in MS Power Apps
• Collegamento della galleria alla schermata dei dettagli
• Navigazione tra la galleria e la schermata dei dettagli
• Creazione della schermata Modifica modulo
• Rendere funzionale il pulsante Invia
• Navigazione tra la schermata di modifica e la schermata dei dettagli
• Creazione di una nuova schermata del modulo in MS Power Apps
• Passaggio da nuovo modulo a modifica modulo in MS Power Apps
• Utilizzo della funzione Indietro
• Conclusione

Creazione della schermata dei dettagli in MS Power Apps

Una schermata di dettaglio contiene tutte le informazioni fornite con ogni record dall'origine dati.

Nell'esempio seguente, vedrai una galleria che mostra diversi record. La galleria contiene solo un'anteprima di quel record. In questo caso, vedrai il nome, il cognome, la posizione e il livello VIP se guardi la voce per Viki Darling.

Ma questa voce viene fornita con molti altri dettagli. Se esaminiamo l'origine dati, vedremo che c'è anche un numero cliente, la data di registrazione, il numero di passaporto e il nome dell'agente.

Ecco a cosa serve la schermata dei dettagli. È una schermata su cui gli utenti atterreranno nel momento in cui fanno clic su qualsiasi punto di ingresso nella galleria. Qui è dove vedranno tutti gli altri dettagli che non sono visibili nella galleria.

Per iniziare a creare la schermata di dettaglio, torneremo al MasterScreen e lo duplicheremo.

Iniziare da una schermata principale è stato qualcosa di cui abbiamo discusso in un tutorial su come creare un'app da zero. Avere una schermata principale che contiene gli elementi di base della tua app semplifica l'uniformità di tutte le schermate in termini di aspetto e layout.

Rinominiamo la schermata duplicata come DetailScreen.

Cambiamo anche l'etichetta in alto e scriviamo Dettagli cliente.

Sebbene stiamo creando questa schermata da zero, non è necessario aggiungere manualmente ogni dettaglio. Power Apps ha automatizzato l'intero processo per noi.

Inizieremo aggiungendo un modulo di visualizzazione, che può essere fatto sotto il nastro Inserisci.

Dal momento che questa schermata non avrà altro uso se non quello di visualizzare i dettagli del cliente, possiamo lasciare che il modulo riempia l'intero schermo trascinando gli angoli.

La schermata dei dettagli necessita di un'origine dati. Possiamo collegare un'origine dati qui nel riquadro di destra in Proprietà. Per questa app, stiamo usando Table1.

Ora che abbiamo un'origine dati da cui estraiamo i dettagli, è il momento di decidere quali dettagli vogliamo mostrare sullo schermo. Ciò può essere fatto facendo clic su Modifica campi.

Possiamo aggiungere campi spuntando ogni campo che riteniamo applicabile al nostro scopo. In questo caso, aggiungiamo tutti questi campi.

Power Apps caricherà quindi tutti i campi scelti nel modulo appena creato, che è FormViewer1.

Se facciamo clic su di esso, mostra che ha impostato automaticamente le schede dati per ciascuna delle diverse colonne nella nostra origine dati.

E per ogni scheda dati, ha effettivamente impostato una chiave, che contiene il nome della scheda dati.

Ha anche impostato un valore, che mostrerà il valore effettivo associato a quella colonna.

Al momento, questo modulo non mostra ancora alcun valore. Questo perché non abbiamo ancora collegato la nostra galleria a DetailScreen. Ancora una volta, l'obiettivo qui è che i dettagli vengano visualizzati solo dopo che un record è stato scelto dalla nostra galleria.

Collegamento della galleria alla schermata dei dettagli

Il bello delle raccolte in Power Apps è che ha una proprietà chiamata Selected. Fondamentalmente collega la galleria alla schermata dei dettagli in modo che ogni volta che selezioniamo un record nella galleria, mostri solo i dettagli per quella voce specifica.

Per farlo, evidenzieremo FormViewer1 e andremo alla proprietà Item.

Assicurati di fare riferimento alla galleria giusta qui, soprattutto se la tua app utilizza più gallerie. In questo caso, vogliamo usare Gallery2.

Tornando alla barra della formula della schermata dei dettagli, digitiamo Gallery2.Selected e premiamo Invio.

Ora, stiamo vedendo i dettagli qui provenienti da ciò che è stato selezionato l'ultima volta nella galleria.

Torniamo alla schermata Visualizza clienti e scegliamo Viki Darling dalla nostra galleria.

Dopo aver fatto clic su di esso, vedrai che anche i dettagli nella schermata dei dettagli sono cambiati e ora mostrano le informazioni per Viki Darling.

Ciò sottolinea la relazione tra questi schermi e gli elementi in esso contenuti. I campi nella schermata dei dettagli sono guidati dalla proprietà dell'elemento nel visualizzatore del modulo, che, a sua volta, è guidato dal record selezionato nella raccolta.

Navigazione tra la galleria e la schermata dei dettagli

Al momento, possiamo vedere i dettagli solo se scegliamo una voce nella galleria e andiamo manualmente alla schermata dei dettagli. Idealmente, gli utenti dovrebbero essere indirizzati automaticamente alla schermata dei dettagli nel momento in cui fanno clic su una voce. Quindi aggiungeremo un po' di navigazione tra le schermate.

Iniziamo con la navigazione dalla schermata di dettaglio tornando alla galleria. Aggiungeremo una freccia a sinistra attraverso il pulsante Icone sotto la barra multifunzione Inserisci.

Cambiamo il colore in bianco per assicurarci che corrisponda agli altri elementi sullo schermo.

Con l'icona evidenziata, usiamo la funzione Naviga e facciamo riferimento alla schermata in cui vogliamo che l'icona atterri. In questo caso, è ViewCustomersScreen.

Per renderlo visivamente più accattivante mentre ci spostiamo da uno schermo all'altro, usiamo la transizione Dissolvenza.

Quindi, premiamo Invio per bloccare quella formula. Una volta fatto ciò, tutto ciò che dobbiamo fare è fare clic sull'icona.

Ciò ci porterà alla schermata Visualizza clienti.

Questa volta, passiamo dalla schermata Visualizza clienti alla schermata dei dettagli.

Questa volta abbiamo a che fare con diversi record all'interno della galleria. Ma questo non significa che dobbiamo creare un'azione diversa per ogni elemento. Dobbiamo solo evidenziare la galleria e scegliere OnSelect dal menu a discesa delle proprietà.

Useremo di nuovo la funzione Navigate e faremo riferimento a DetailScreen. Useremo la stessa transizione che abbiamo usato prima. Quindi, premi Invio per bloccare quella formula.

Ora che abbiamo impostato la formula, facciamo clic sul record per Megan Rohman.

Ora, ci porta direttamente alla schermata dei dettagli con i dettagli di Megan Rohman inseriti automaticamente nello schermo.

E poiché abbiamo impostato la navigazione dalla schermata dei dettagli alla schermata Visualizza clienti, un semplice clic sull'icona della freccia ti riporterà direttamente alla galleria.

Creazione della schermata Modifica modulo

Sebbene la nostra fonte di dati ci fornisca tutte le informazioni, ci sono momenti in cui dobbiamo aggiornare le informazioni del cliente. Ciò significa che avremo bisogno anche di una schermata di modifica del modulo.

Quindi creiamo un altro duplicato della schermata principale e rinominiamolo in EditScreen.

Utilizzeremo la stessa schermata anche per aggiungere nuovi clienti, quindi cambiamo l'etichetta in Nuovo/Modifica clienti.

Per questa schermata, inseriremo un modulo di modifica.

Proprio come il modulo di visualizzazione che abbiamo aggiunto in precedenza, dobbiamo ancora aggiungere un'origine dati. Sceglieremo di nuovo Table1.

L'aggiunta di un campo dipenderà dai dati che hai e dall'utente finale che hai in mente. Ad esempio, il numero di passaporto di un cliente non cambierà realmente. Quindi potresti volerlo lasciare fuori dal modulo.

Per ora, aggiungiamo tutto. Questa volta vedrai che ci sono degli spazi sotto ogni campo.

Anche questi spazi possono essere modificati. Ad esempio, in DateJoined, non avremo davvero bisogno di tempo. Abbiamo solo bisogno della data.

Noterai anche che i campi non hanno spazi. Anche questa è una cosa che possiamo cambiare. Possiamo dire Nome invece di Nome.

Ci occuperemo di questi cambiamenti più tardi. Per ora, dobbiamo assicurarci che i dettagli del cliente che scegliamo dalla schermata Visualizza clienti vengano visualizzati in questa schermata del modulo di modifica.

Con Form2 evidenziato, andiamo alla proprietà Items ed identifichiamola con Gallery2.Selected.

Ora mostra i dettagli di uno dei nostri clienti sul modulo.

Una volta avviata la modifica, avremo bisogno di un pulsante su cui fare clic per inviare le modifiche. Quindi aggiungiamo un pulsante tramite la barra multifunzione Inserisci.

Assegna un'etichetta al pulsante e scrivi Invia.

I moduli hanno tre modalità: modifica, nuovo e visualizzazione. Al momento, questo modulo è in modalità di modifica. Ciò significa che siamo in grado di accedere a uno qualsiasi di questi campi e modificare le voci.

Al contrario, la schermata dei dettagli è tecnicamente una galleria di visualizzazione. Ecco perché se guardi le proprietà nel riquadro di destra, non ci dà la possibilità di modificare anche se questo è anche un modulo.

Il modulo di visualizzazione è simile a come funzionerà questa schermata di modifica se è in modalità di visualizzazione. Blocca tutti gli elementi in modo che nessuno di essi possa essere modificato.

Ecco perché se dobbiamo modificare una delle voci nella nostra galleria, abbiamo bisogno che il nostro modulo sia in modalità di modifica. Avremo anche bisogno che il pulsante di invio in basso sia funzionale in modo che invii effettivamente il modulo e aggiorni i record sottostanti.

Rendere funzionale il pulsante Invia

Per bloccare un'azione ogni volta che clicchiamo sul pulsante di invio, dobbiamo andare alla proprietà OnSelect e scrivere SubmitForm sulla barra della formula.

SubmitForm è una funzione che aggrega tutti gli aggiornamenti nel modulo e invia tali modifiche. Prende anche il modulo effettivo che vogliamo inviare, che in questo caso è Form2.

Vediamo cosa succede ora che la formula è stata bloccata. Al momento, la posizione di Coy Newell risulta essere Stati Uniti.

Cambiamolo in Canada e facciamo clic su Invia.

Ora, quando torniamo alla schermata dei dettagli, mostra il Canada come posizione.

Torniamo alla schermata di modifica e questa volta cambiamo il cognome. Quindi, invece di Newell, cambiamo questo in Smith e facciamo clic su Invia.

Ancora una volta, se andiamo alla schermata dei dettagli, vediamo che le modifiche sono state apportate anche qui.

Se andiamo alla schermata di visualizzazione del cliente, mostra anche che Coy Newell ora è Coy Smith e che la posizione è ora in Canada invece che negli Stati Uniti.

Ciò dimostra che mentre lavoriamo, le cose si aggiornano in background e cambiano i dati su tutte le schermate collegate a ciò su cui stiamo attualmente lavorando. Questo rende molto più facile modificare qualsiasi informazione che abbiamo.

Navigazione tra la schermata di modifica e la schermata dei dettagli

Ora che abbiamo una schermata di modifica, vogliamo avere i mezzi per atterrare su quella pagina proveniente dalla schermata dei dettagli. Quindi aggiungiamo l'icona di modifica.

Ancora una volta, cambieremo il colore in modo che sia uniforme con tutti gli altri elementi.

Con l'icona evidenziata, sceglieremo la proprietà OnSelect, utilizzeremo la funzione Navigate e faremo riferimento alla schermata in cui vogliamo che conduca questa icona, che è la schermata di modifica. Non aggiungiamo una transizione dello schermo questa volta.

Ora, vogliamo anche essere in grado di tornare alla schermata dei dettagli una volta che abbiamo finito di inviare le modifiche che abbiamo fatto qui nella schermata di modifica. Quindi aggiungiamo l'icona indietro e usiamo la stessa formula, ma questa volta tornando alla schermata di dettaglio.

Con la navigazione aggiuntiva, sarà più facile per gli utenti finali passare da una schermata all'altra una volta pubblicata la nostra app.

Creazione di una nuova schermata del modulo in MS Power Apps

Ora che abbiamo la schermata di modifica del modulo, dovremmo anche consentire agli utenti di aggiungere record che non esistono ancora nella galleria. Questa volta non aggiungeremo un nuovo modulo. Invece, useremo quello esistente poiché abbiamo etichettato l'ultima schermata Nuovo/Modifica clienti.

Abbiamo menzionato in precedenza che i moduli in Power Apps ti consentono non solo di entrare in modalità di modifica e visualizzazione, ma anche di entrare in una nuova modalità.

Fondamentalmente, entrare in una nuova modalità significa che tutte le caselle di testo sono vuote. Se scriviamo qualcosa nelle caselle e premiamo invia, aggiunge il record invece di modificare una voce esistente.

Quindi quello che dobbiamo essere in grado di fare è cambiare la modalità di questo modulo da modifica a nuovo, quindi da nuovo a modifica a seconda delle necessità.

Iniziamo dalla schermata principale, che abbiamo creato in un tutorial precedente sulla creazione di schermate master . Come puoi vedere, abbiamo già un pulsante qui per aggiungere nuovi clienti.

Al momento, questo pulsante non porta ancora a nessuna schermata. Evidenziamo quindi il pulsante, andiamo su OnSelect e usiamo la funzione Navigate per farlo portare a EditScreen.

Ora, atterreremo sulla schermata di modifica ogni volta che clicchiamo su quel pulsante dalla home page.

Il problema è che questa schermata ha ancora tutti i dettagli che stavamo modificando prima. Dato che stiamo aggiungendo un nuovo cliente, preferiremmo avere uno schermo vuoto.

Quindi torniamo alla schermata principale per aggiungere un'altra funzione chiamata NewForm. NewForm mette il modulo in una nuova modalità prima di atterrarci sopra.

Questa funzione ha bisogno del modulo effettivo che vogliamo passare alla nuova modalità, quindi stiamo facendo riferimento a Form2.

Si noti che abbiamo utilizzato un punto e virgola tra le due funzioni. Fondamentalmente, un punto e virgola determina l'ordine di esecuzione di queste funzioni. Esegue prima la funzione NewForm e, una volta eseguita, è l'unica volta che esegue la funzione Navigate.

Ora che abbiamo corretto la formula, fare clic sul pulsante Aggiungi nuovo cliente ci porterà ora a un modulo vuoto.

Passaggio da nuovo modulo a modifica modulo in MS Power Apps

Torniamo alla nostra gallery e clicchiamo sul disco di Viki Darling.

Diciamo che vogliamo modificare alcuni dei campi qui. Quindi faremo clic sull'icona di modifica.

Il problema è che stiamo arrivando a un nuovo modulo e non a un modulo di modifica. Questo perché l'abbiamo lasciata in una nuova forma quando abbiamo creato la navigazione per il pulsante Aggiungi nuovo cliente.

Quindi questa volta, vogliamo che l'icona di modifica metta il modulo in modalità di modifica prima di atterrare su quella schermata. Per far sì che ciò accada, useremo la stessa formula che abbiamo usato per il nuovo modulo, ma useremo invece la funzione EditForm.

La funzione EditForm modifica il form a cui si fa riferimento dalla modalità corrente alla modalità di modifica. Una volta che l'abbiamo a posto, ogni volta che clicchiamo sull'icona di modifica dalla schermata dei dettagli, ora atterreremo sulla schermata di modifica in modalità di modifica.

Ciò significa anche che quando inviamo il pulsante Invia, aggiornerà il record esistente invece di aggiungere una nuova voce.

Utilizzo della funzione Indietro

Ora che abbiamo i moduli di cui abbiamo bisogno, ricontrolliamo la nostra navigazione per assicurarci che i nostri utenti finali arrivino alle schermate giuste.

Diciamo che siamo nella schermata iniziale e decidiamo di aggiungere un nuovo cliente. Facciamo clic sul pulsante che ci porta a un modulo vuoto. Ma poi cambiamo idea e facciamo clic sul pulsante Indietro.

Ma quando lo facciamo, non ci riporta alla schermata iniziale. Invece, ci porta alla schermata dei dettagli.

Per scoprire cosa è successo, andiamo sull'icona indietro e guardiamo l'azione ad essa collegata. Si scopre che abbiamo impostato il pulsante Indietro per passare alla schermata dei dettagli per impostazione predefinita.

Quello che vogliamo che accada qui è che arriviamo alla schermata precedente in cui ci trovavamo prima di atterrare qui. Ciò significa che invece di utilizzare la funzione Naviga e fare riferimento a una schermata specifica, dobbiamo passare alla funzione Indietro.

Questa funzione non richiede di fare riferimento a nessuna schermata. Il suo comportamento cambia a seconda della schermata da cui proveniamo. Ciò significa che sia che proveniamo dalla schermata principale o dalla schermata dei dettagli, facendo clic sulla funzione Indietro ora ci porterà all'ultima schermata che abbiamo visitato.

Introduzione a Power Apps: definizione, caratteristiche, funzioni e importanza
Ambienti Power Apps: configurazione corretta degli elementi dell'app
Funzioni e formule di PowerApps | Un introduzione

Conclusione

Con le schermate dei dettagli, delle modifiche e dei nuovi moduli, la nostra app sta lentamente prendendo forma ed è quasi pronta per essere pubblicata. Questa è la cosa grandiosa di Power Apps. Sia che scegliamo di iniziare con un modello o di creare un'app da zero, tutto è abbastanza semplice e semplice da creare.

Abbiamo anche visto quanto sia importante assicurarsi che la navigazione tra le pagine funzioni bene. Questo gioca un ruolo fondamentale nel garantire che la nostra app sia sufficientemente intuitiva per gli utenti finali una volta che sarà disponibile.

Ti auguro il meglio,

Enrico