Informazioni sui moduli app canvas

Per consentire all'utente di cercare un record, visualizzarne i dettagli e modificare o creare un record puoi aggiungere a un'app canvas tre tipi di controlli:

Inserisci ogni controllo in una diversa schermata per renderlo più facilmente distinguibile:

Come illustrato in questo argomento, combina questi controlli con formule per creare l'esperienza utente complessiva.

Prerequisiti

• Iscriviti a Power Apps e accedi utilizzando le stesse credenziali che hai utilizzato per l'iscrizione.
• Informazioni su come configurare un controllo in Power Apps.

Esplorare un'app generata

Power Apps può generare automaticamente un'app in base a un'origine dati specificata. Ogni app contiene tre schermate con i controlli descritti in precedenza e formule di collegamento. Esegui queste app predefinite, personalizzale per scopi specifici oppure esaminane il funzionamento per apprendere concetti utili applicabili alle tue app. Nelle sezioni seguenti verranno esaminate le schermate, i controlli e le formule alla base di un'app generata.

Schermata di esplorazione

Questa schermata include tre formule chiave:

Il controllo primario di questa schermata, BrowseGallery1 occupa la maggior parte dell'area disponibile. L'utente può scorrere la raccolta per trovare un record specifico per la visualizzazione di altri campi o l'aggiornamento.

Imposta la proprietà Items di una raccolta per visualizzare i record di un'origine dati. Ad esempio, imposta la proprietà su Assets per visualizzare i record di un'origine dati con quel nome.

Invece di trovare un record da visualizzare o modificare, l'utente può creare un record selezionando il simbolo "+" sopra la raccolta. Per creare questo effetto, aggiungi un controllo immagine contenente un simbolo "+" e impostane la proprietà OnSelect su questa formula:
NewForm( EditForm1 ); Navigate( EditScreen1, None )

Questa formula apre la schermata di modifica e creazione, che contiene un controllo Modulo modifica denominato EditForm1. La formula determina anche il passaggio del modulo alla modalità Nuovo, in cui vengono visualizzati i valori predefiniti dell'origine dati in modo che l'utente possa creare facilmente un record da zero.

Per esaminare qualsiasi controllo visualizzato in BrowseGallery1, seleziona il controllo nella prima sezione della raccolta, che funge da modello per tutte le altre sezioni. Ad esempio, seleziona il controllo Etichetta centrale lungo il bordo sinistro:

In questo esempio, la proprietà Text del controllo è impostata su ThisItem.AssignedTo, che è un campo dell'origine dati Assets. La proprietà Text degli altri tre controlli Etichetta nella raccolta è impostata su formule simili e ogni controllo visualizza un diverso campo dell'origine dati.

Seleziona il controllo forma (la freccia) e verifica che la relativa proprietà OnSelect sia impostata su questa formula:
Navigate( DetailScreen1, None )

Se l'utente trova un record in BrowseGallery1, può selezionare la freccia di tale record per visualizzarne altre informazioni in DetailScreen1. Selezionando una freccia, l'utente modifica il valore della proprietà Selected di BrowseGallery1. In questa app, tale proprietà determina il record visualizzato non solo in DetailScreen1, ma anche nella schermata di modifica e creazione se l'utente decide di aggiornare il record.

Schermata dei dettagli

Questa schermata include tre formule chiave:

Nella parte superiore della schermata, tre immagini all'esterno di DetailForm1 fungono da pulsanti per l'orchestrazione tra le tre schermate dell'app.

La schermata è dominata da DetailForm1, che visualizza il record selezionato dall'utente nella raccolta perché la proprietà Item del modulo è impostata su BrowseGallery1.Selected. La proprietà DataSource del modulo fornisce anche i metadati relativi all'origine dati, ad esempio un nome visualizzato descrittivo per ogni campo.

DetailForm1 contiene diversi controlli Scheda. Per individuare informazioni aggiuntive puoi selezionare il controllo Scheda oppure il controllo in esso contenuto.

La proprietà DataField di un controllo Scheda determina il campo visualizzato nella scheda. In questo caso, tale proprietà è impostata su AssetID. La scheda contiene un controllo Etichetta la cui proprietà Text è impostata su Parent.Default. Questo controllo visualizza il valore Default per la scheda, impostato tramite la proprietà DataField.

In un'app generata, i controlli Scheda sono bloccati per impostazione predefinita. Quando una scheda è bloccata, non è possibile modificare alcune proprietà, ad esempio DataField, e per tali proprietà non è disponibile la barra della formula. Questa restrizione garantisce che le personalizzazioni dell'utente non compromettano le funzionalità di base dell'app generata. Tuttavia puoi modificare alcune proprietà di una scheda e dei relativi controlli nel riquadro destro:

Nel riquadro destro puoi selezionare i campi da mostrare e la tipologia di controllo in cui ogni campo verrà visualizzato.

Schermata di creazione/modifica

Questa schermata include tre formule chiave:

Così come la schermata dei dettagli, la schermata di modifica e creazione è dominata da un controllo form denominato EditForm1. La proprietà Item di EditForm1, inoltre, è impostata su BrowseGallery1.Selected affinché il modulo visualizzi il record selezionato dall'utente in BrowseScreen1. Mentre la schermata dei dettagli visualizza ogni campo in sola lettura, in EditForm1 l'utente può aggiornare il valore di uno o più campi usando i controlli. Viene anche usata la proprietà DataSource per accedere ai metadati relativi all'origine dati, come il nome visualizzato descrittivo di ogni campo e la posizione in cui verranno salvate le modifiche.

Se l'utente seleziona l'icona "X" per annullare un aggiornamento, la funzione ResetForm rimuove tutte le modifiche non salvate e la funzione Back apre la schermata dei dettagli. Sia la schermata dei dettagli che quella di modifica e creazione visualizzano lo stesso record finché l'utente non ne seleziona un altro in BrowseScreen1. I campi del record rimangono impostati sugli ultimi valori salvati, non sulle modifiche eventualmente effettuate e successivamente abbandonate dall'utente.

Se l'utente modifica uno o più valori nel modulo e quindi seleziona l'icona "segno di spunta", la funzione SubmitForm invia le modifiche dell'utente all'origine dati.

• Se le modifiche vengono salvate, viene eseguita la formula OnSuccess del modulo e la funzione Back() apre la schermata dei dettagli in modo da visualizzare il record aggiornato.
• Se il salvataggio delle modifiche ha esito negativo, viene eseguita la formula OnFailure del modulo, che tuttavia non esegue alcuna azione perché è vuota. La schermata di modifica e creazione resta aperta in modo che l'utente possa annullare le modifiche o correggere l'errore. LblFormError1 visualizza il messaggio di errore descrittivo su cui è impostata la proprietà Error del modulo.

Così come un controllo Modulo visualizzazione, un controllo Modulo modifica contiene controlli Scheda contenenti altri controlli che visualizzano diversi campi di un record:

Nell'immagine precedente, la scheda selezionata visualizza il campo AssetID e contiene un controllo input di testo in modo che l'utente possa modificare il valore del campo. La schermata dei dettagli, invece, visualizza lo stesso campo in un controllo Etichetta di sola lettura. Il controllo Input di testo ha una proprietà Default impostata su Parent.Default. Se l'utente creasse un record invece di modificarne uno, il controllo visualizzerebbe un valore iniziale modificabile dall'utente per il nuovo record.

Nel riquadro destro, puoi mostrare o nascondere ogni scheda, riorganizzarle oppure configurarle per visualizzare i campi in diversi tipi di controlli.

Creare un'app da zero

Comprendendo come Power Apps genera un'app, puoi crearne una che usi gli stessi blocchi predefiniti e le stesse formule illustrati in precedenza in questo argomento.

Identificare i dati di test

Per sfruttare al meglio questo argomento, inizia con un'origine dati su cui sia possibile eseguire esperimenti. Deve contenere dati di test che possano essere letti e aggiornati senza problemi.

Per seguire esattamente il resto di questo argomento, crea un elenco denominato "Ice Cream" contenente questi dati:

• Crea da zero un'app per telefoni e connetti l'app all'origine dati.

  Nota

  Le app per tablet sono molto simili, ma potresti preferire un layout della schermata diverso per sfruttare al meglio lo spazio aggiuntivo sullo schermo.

  Gli esempi nel resto dell'argomento sono basati su un origine dati denominata Ice Cream.

Esplorare i record

Recupera rapidamente un'informazione da un record trovando il record in una raccolta in una schermata di esplorazione.

1. Aggiungi una raccolta verticale e modifica il layout solo per il Titolo.

   

2. Imposta la proprietà Items della raccolta su Ice Cream.

3. Imposta la proprietà Text della prima etichetta nella raccolta su ThisItem.Title se è impostata su qualcos'altro.

   L'etichetta ora visualizza il valore nel campo Titolo per ogni record.

   

4. Ridimensiona la raccolta per riempire la schermata e impostane la proprietà TemplateSize su 60.

   La schermata sarà simile a questo esempio, che visualizza tutti i record dell'origine dati:

   

Visualizza dettagli

Se la raccolta non visualizza le informazioni desiderate, seleziona la freccia di un record per aprire la schermata dei dettagli, in cui un controllo Modulo visualizzazione mostra altri campi del record selezionato, possibilmente tutti.

Per visualizzare il record, il controllo Modulo visualizzazione usa due proprietà.

• Proprietà DataSource: nome dell'origine dati contenente il record. Questa proprietà popola il pannello destro con i campi e determina il nome visualizzato e il tipo di dati (stringa, numero, data e così via) di ognuno.
• Proprietà Item: record da visualizzare. Questa proprietà è spesso connessa alla proprietà Selected del controllo raccolta, in modo che l'utente possa selezionare un record nel controllo raccolta e quindi esaminarlo.

Dopo aver impostato la proprietà DataSource, puoi aggiungere e rimuovere campi tramite il riquadro destro e modificare il modo in cui vengono visualizzati.

In questa schermata, gli utenti non possono modificare intenzionalmente o accidentalmente i valori del record. Il controllo Modulo visualizzazione è di sola lettura, di conseguenza il record non verrà modificato.

Per aggiungere un controllo Modulo visualizzazione:

1. Aggiungi una schermata e quindi aggiungivi un controllo Modulo visualizzazione.
2. Imposta la proprietà DataSource del controllo form su 'Ice Cream'.

Nel riquadro destro puoi selezionare i campi da mostrare nella schermata e il tipo di scheda da visualizzare per ogni campo. Mentre apporti le modifiche nel riquadro destro, la proprietà DataField di ogni controllo Scheda viene impostata sul campo con cui interagirà l'utente. La schermata sarà simile a questo esempio:

Infine devi connettere il controllo Modulo visualizzazione al controllo Raccolta per poter esaminare i dettagli di un record specifico. Non appena viene completata l'impostazione della proprietà Item, nel modulo verrà visualizzato il primo record della raccolta.

• Imposta la proprietà Item del controllo Modulo visualizzazione su Gallery1.Selected.

  Nel modulo verranno visualizzati i dettagli dell'elemento selezionato.

  

Ottimo! Ora puoi impostare lo spostamento, ossia come un utente apre la schermata dei dettagli dalla schermata della raccolta e viceversa.

• Aggiungi un controllo pulsante alla schermata e quindi impostane la proprietà Text in modo da visualizzare Indietro e la proprietà OnSelect su Back().

  Questa formula riporta l'utente alla raccolta al termine della visualizzazione dei dettagli.

  

Torna ora al controllo raccolta e aggiungi alcune funzionalità di spostamento alla schermata dei dettagli.

1. Passa alla prima schermata, contenente il controllo Raccolta, e seleziona la freccia nel primo elemento della raccolta.

2. Imposta la proprietà OnSelect della forma su questa formula:
   Navigate( Screen2, None )

   

3. Premi F5 e quindi seleziona una freccia nella raccolta per visualizzare i dettagli di un elemento.

4. Seleziona il pulsante Indietro per tornare alla raccolta dei prodotti e quindi premi ESC.

Modifica dei dettagli

Infine, l'ultima attività di base è la modifica del contenuto di un record, eseguita dagli utenti in un controllo Modulo di modifica.

Per visualizzare e modificare il record, il controllo Modulo modifica usa due proprietà.

• Proprietà DataSource: nome dell'origine dati contenente il record. Come nel caso del controllo Modulo visualizzazione, questa proprietà popola il pannello destro con i campi e determina il nome visualizzato e il tipo di dati (stringa, numero, data e così via) di ognuno. Questa proprietà determina anche la validità o meno del valore di ogni campo prima dell'invio all'origine dati sottostante.
• Proprietà Item: record da modificare, spesso connesso alla proprietà Selected del controllo raccolta. In questo modo puoi selezionare un record nel controllo raccolta, visualizzarlo nella schermata dei dettagli e modificarlo nella schermata di modifica e creazione.

Per aggiungere un controllo Modulo modifica:

1. Aggiungi una schermata, aggiungi un controllo Modulo modifica e quindi imposta la proprietà DataSource del modulo su 'Ice Cream'.
2. Imposta la proprietà Item su Gallery1.Selected.

Ora puoi selezionare i campi da mostrare nella schermata, nonché il tipo di scheda da visualizzare per ogni campo. Mentre apporti le modifiche nel riquadro destro, la proprietà DataField di ogni controllo Scheda viene impostata sul campo con cui interagirà l'utente. La schermata sarà simile a questo esempio:

Queste due proprietà sono uguali alle proprietà del controllo Modulo visualizzazione. Con queste proprietà soltanto, puoi visualizzare i dettagli di un record.

Il controllo Modulo modifica fornisce funzionalità aggiuntive offrendo la funzione SubmitForm per il writeback delle modifiche nell'origine dati. La funzione viene usata con un controllo Immagine o pulsante per salvare le modifiche di un utente.

• Aggiungi un controllo Pulsante, impostane la proprietà Text per mostrare Save, e imposta la proprietà OnSelect su questa formula:
  SubmitForm( Form1 )

Per aggiungere lo spostamento da e verso questa schermata:

1. Aggiungi un controllo pulsante e quindi impostane la proprietà Text in modo da visualizzare Annulla e la proprietà OnSelect su questa formula:
   ResetForm( Form1 ); Back()

   Questa formula rimuove le modifiche non salvate e apre la schermata precedente.

   

2. Imposta la proprietà OnSuccess del modulo su Back().

   Al termine del salvataggio delle modifiche, viene aperta automaticamente la schermata precedente, in questo caso quella dei dettagli.

   

3. Nella schermata di visualizzazione aggiungi un pulsante e quindi impostane la proprietà Text in modo da visualizzare Modifica e la proprietà OnSelect su questa formula:
   Navigate( Screen3, None )

   

Hai creato un'app di base con tre schermate per la visualizzazione e l'immissione di dati. Per fare una prova, visualizza la schermata della raccolta e quindi premi F5 oppure seleziona il pulsante "Anteprima" con la freccia avanti accanto all'angolo superiore destro della schermata. Il punto rosa indica dove un utente tocca o fa clic sulla schermata in ogni passaggio.

Crea un record

L'utente interagisce con lo stesso modulo di modifica sia per l'aggiornamento che per la creazione dei record. Quando l'utente vuole creare un record, la funzione NewForm determina il passaggio del modulo alla modalità Nuovo.

Quando il modulo è nella modalità Nuovo, ogni campo viene impostato sul valore predefinito dell'origine dati. Il record specificato nella proprietà Item del modulo viene ignorato.

Quando l'utente è pronto per salvare il nuovo record, viene eseguita la funzione SubmitForm. Dopo che è stato completato l'invio, il modulo passa nuovamente alla modalità Modifica.

Nella prima schermata aggiungi un pulsante Nuovo:

1. Nella schermata con la raccolta, aggiungi un controllo pulsante.

2. Imposta la proprietà Text del pulsante su Nuovo e la proprietà OnSelect su questa formula:
   NewForm( Form1 ); Navigate( Screen3, None )

   Questa formula determina il passaggio del controllo Modulo modifica di Screen3 alla modalità Nuovo e apre la schermata in modo che possa essere compilata dall'utente.

Quando viene aperta la schermata di modifica e creazione, il modulo è vuoto e pronto per l'aggiunta di un elemento da parte dell'utente. Quando l'utente seleziona il pulsante Salva, la funzione SubmitForm fa sì che venga eseguita la creazione anziché l'aggiornamento di un record. Se l'utente seleziona il pulsante Annulla, la funzione ResetForm riporta il modulo alla modalità Modifica e la funzione Back apre la schermata per l'esplorazione della raccolta.

Eliminare un record

1. Nella schermata di visualizzazione aggiungi un pulsante e impostane la proprietà Text in modo da visualizzare Elimina.

2. Imposta la proprietà OnSelect del pulsante su questa formula:
   Remove( 'Ice Cream', Gallery1.Selected ); Back()

   

Gestione degli errori

In questa app si verifica un errore quando il valore di un campo non è valido, un campo obbligatorio è vuoto, non si è connessi alla rete o si riscontra qualsiasi altro problema.

In caso di esito negativo di SubmitForm per qualsiasi motivo, la proprietà Error del controllo Modulo modifica contiene un messaggio di errore da visualizzare all'utente. Con queste informazioni, l'utente potrà correggere il problema e inviare di nuovo la modifica oppure annullare l'aggiornamento.

1. Nella schermata di creazione e modifica, aggiungi un controllo Etichetta e spostalo sotto il pulsante Salva. Qualsiasi errore sarà facilmente visibile dopo che l'utente seleziona questo controllo per salvare le modifiche.

2. Imposta la proprietà Text del controllo Etichetta in modo da visualizzare Form1.Error.

   

In un'app generata da Power Apps dai dati, la proprietà AutoHeight di questo controllo è impostata su true in modo da non utilizzare alcuno spazio se non si verificano errori. Le proprietà Height e Y del controllo Modulo modifica, inoltre, vengono regolate dinamicamente per tenere conto della crescita del controllo in caso di errore. Per altri dettagli, genera un'app dai dati esistenti ed esamina queste proprietà. Dato che il controllo casella di testo per gli errori è molto piccolo quando non si è verificato alcun errore, per selezionare questo controllo potrebbe essere necessario aprire la visualizzazione Avanzate, disponibile nella scheda Visualizza.

Aggiorna dati

L'origine dati viene aggiornata ogni volta che l'utente apre l'app. L'utente, tuttavia, potrebbe voler aggiornare i record nella raccolta senza chiudere l'app. Aggiungi un pulsante Aggiorna in modo che l'utente possa selezionarlo per aggiornare manualmente i dati:

1. Nella schermata con il controllo raccolta aggiungi un controllo pulsante e impostane la proprietà Text in modo da visualizzare Aggiorna.

2. Imposta la proprietà OnSelect di questo controllo su questa formula:
   Refresh( 'Ice Cream' )

   

Eseguire la ricerca e l'ordinamento nella raccolta

Nell'app generata da Power Apps dai dati, non sono stati esaminati due controlli nella parte superiore della schermata di esplorazione. Usando questi controlli, l'utente può cercare uno o più record, ordinare i record in senso crescente o decrescente o eseguire entrambe le operazioni.

Quando l'utente seleziona il pulsante di ordinamento, l'ordinamento della raccolta viene invertito. Per creare questo comportamento, puoi usare una variabile di contesto per tenere traccia della direzione di ordinamento della raccolta. Quando l'utente seleziona il pulsante, la variabile viene aggiornata e la direzione viene invertita. La proprietà OnSelect del pulsante di ordinamento viene impostata su questa formula: UpdateContext( {SortDescending1: !SortDescending1} )

La funzione UpdateContext crea la variabile di contesto SortDescending1, se non esiste già. La funzione leggerà la variabile e la imposterà sul valore logico opposto usando l'operatore ! . Se il valore è true, diventa false. Se il valore è false, diventa true.

La formula per la proprietà Items del controllo raccolta usa questa variabile di contesto, insieme al testo nel controllo TextSearchBox1:

Sort( 
    If( IsBlank(TextSearchBox1.Text),
        Assets,
        Filter( Assets, TextSearchBox1.Text in Text(ApproverEmail) ) 
    ),
    ApproverEmail,
    If(SortDescending1, Descending, Ascending) 
)

Esaminiamo i singoli elementi:

• All'esterno si trova la funzione Sort, che accetta tre argomenti: una tabella, un campo in base al quale eseguire l'ordinamento e la direzione di ordinamento.

  • La direzione di ordinamento è ricavata dalla variabile di contesto attivata/disattivata quando l'utente seleziona il controllo ImageSortUpDown1. Il valore true/false viene convertito nelle costanti Descending e Ascending.
  • Il campo in base al quale eseguire l'ordinamento è fisso ed è impostato su ApproverEmail. Se modifichi i campi visualizzati nella raccolta, devi modificare anche questo argomento.

• All'interno si trova la funzione Filter, che accetta una tabella come argomento e un'espressione da valutare per ogni record.

  • La tabella è l'origine dati non elaborata Assets, che rappresenta il punto di partenza prima dell'applicazione del filtro o dell'ordinamento.
  • L'espressione cerca un'istanza della stringa contenuta in TextSearchBox1 all'interno del campo ApproverEmail. Anche in questo caso, se modifichi i campi visualizzati nella raccolta, devi aggiornare anche questo argomento.
  • Se il controllo TextSearchBox1 è vuoto, l'utente vuole visualizzare tutti i record e la funzione Filter viene ignorata.

Questo è solo un esempio. Puoi creare una formula personalizzata per la proprietà Items in base alle esigenze della propria app, combinando Filter, Sort e altri operatori e funzioni.

Progettazione della schermata

Non sono stati finora esaminati altri modi per distribuire i controlli nelle schermate, perché le opzioni disponibili sono numerose e la selezione ottimale dipende dalle esigenze dell'app specifica.

Dato che lo spazio presente sugli schermi dei telefoni è limitato, è probabile che si voglia eseguire l'esplorazione, la visualizzazione e la modifica/creazione in schermate diverse. In questo argomento, ogni schermata viene aperta dalle funzioni Navigate e Back.

Su un tablet, puoi eseguire l'esplorazione, la visualizzazione e la modifica/creazione in due schermate o anche in una sola. Nel secondo caso, non sono necessarie funzioni Navigate o Back.

Se l'utente usa la stessa schermata, devi assicurarti che non l'utente non possa modificare la selezione nella raccolta perdendo potenzialmente le modifiche nel controllo Modulo modifica. Per impedire all'utente di selezionare un diverso record quando le modifiche a un altro record non sono ancora state salvate, imposta la proprietà Disabled della raccolta su questa formula:
EditForm.Unsaved