Esplorazione di controlli e schermate nelle app canvas

  • 12 minuti

In questa unità si esamineranno i controlli che sono già stati aggiunti all'app, sia nella Raccolta sia nel Modulo, e si aggiungeranno anche alcune schermate all'app in preparazione alla prossima unità.

Controlli in Power Apps

Un controllo è un elemento dell'interfaccia utente che produce un'azione o visualizza informazioni. Molti controlli in Power Apps sono analoghi ai controlli usati in altre app, ovvero etichette, caselle di immissione del testo, elenchi a discesa, elementi di navigazione e così via.

Oltre a questi controlli tradizionali, Power Apps dispone di controlli più specializzati che si possono trovare nel pulsante + Inserisci, che include un campo di ricerca che rende più facile trovare ciò che si sta cercando.

Ecco alcuni dei controlli che possono rendere le app più interessanti e di maggiore impatto:

  • Raccolte: si tratta di contenitori di layout che includono un set di controlli che mostrano i record di un'origine dati.

  • Moduli: controlli che visualizzano i dettagli relativi ai dati e consentono di creare e modificare record.

  • Elementi multimediali: controlli che permettono di aggiungere immagini di sfondo; includono un pulsante fotocamera per scattare foto dall'app, un lettore di codice a barre, per acquisire rapidamente le informazioni di identificazione, e altro ancora.

  • Grafici: controlli che permettono di aggiungere grafici, inclusi dati di Power BI, attraverso i quali gli utenti possono eseguire analisi immediate dei propri dati.

Per visualizzare i controlli disponibili, selezionare la scheda + Inserisci, quindi espandere i vari campi. Nel frattempo si potrà apprezzare l'utilità del campo di ricerca per facilitare la rapida individuazione di ciò che si cerca. Provare a immettere alcuni valori nel campo di ricerca per vederne il comportamento.

All'interno della raccolta visualizzata si dovrebbero vedere diversi controlli. Il tipo di controllo ha un'icona subito a sinistra del nome che indica di che tipo di controllo si tratta. Si notino le due forme di controlli tra cui un rettangolo e un separatore. Andare avanti e selezionare il controllo rettangolo in Visualizzazione struttura ad albero. Per impostazione predefinita, il controllo è impostato sulla proprietà OnSelect, che indica "Select(Parent)". A meno che non si imposti diversamente la proprietà OnSelect per uno di questi controlli della raccolta, tutti sono impostati sul valore predefinito Select(Parent). Questa impostazione indica che se si seleziona un controllo, si seleziona quell'elemento.

Selezionare ora il controllo Raccolta stesso ed esaminare la proprietà OnSelect per la raccolta. Al momento è impostata su false. Questo significa che la selezione di un qualsiasi controllo nella raccolta non produrrà alcun effetto fino a quando non si definirà un'azione.

Selezionare nuovamente il controllo Rettangolo nella raccolta in Visualizzazione struttura ad albero. Passare ora alla proprietà Visible selezionando il valore a discesa a sinistra del campo di immissione della formula (fx). Tutte le proprietà disponibili per il controllo sono incluse in un elenco scorrevole, in modo che si possa trovare/selezionare la proprietà Visible. La proprietà Visible è presente in ogni controllo. Si noti che nel campo della formula per questo controllo è indicato ThisItem.IsSelected.

Screenshot dei controlli e delle proprietà della raccolta.

IsSelected è un valore booleano, restituito come "true" o "false", a seconda che questo elemento nella raccolta sia selezionato o meno. Nella raccolta può essere selezionato un solo elemento alla volta, quindi questo valore può essere "true" per un solo elemento. Se si passa l'app alla modalità Anteprima. Provare a selezionare varie macchine da caffè e si noti che il controllo Rettangolo appare solo per la macchina che è stata selezionata. Il rettangolo visibile corrisponde anche all'elemento visualizzato nel modulo accanto alla raccolta.

Altri controlli degni di nota sono il Separatore, che è anch'esso un rettangolo, ma è sempre visibile (al momento è colorato di bianco, quindi non appare nella schermata bianca), un'icona intitolata "NextArrow1", che attualmente non fa altro che selezionare il parent dalla raccolta, e un controllo Immagine.

Si supponga di voler cambiare NextArrow1 in un'icona di modifica a forma di matita, per indicare all'utente che deve premere quel controllo se vuole apportare modifiche alla macchina da caffè. È bene ricordare che la barra dell'intestazione riflette alcune proprietà modificabili per il controllo selezionato. Con "NextArrow1" selezionato, selezionare il pulsante a discesa Icona nella barra dei comandi. Verrà visualizzata l'icona Modifica a forma di matita sotto Azioni. Procedere e selezionarla per cambiare la freccia DESTRA in un'icona di modifica. Selezionare quindi il pulsante Icona (oppure fare clic al di fuori di esso) per chiudere il pannello.

Parliamo brevemente del controllo Immagine. Poiché è stato definito un campo immagine nei dati, Power Apps è stato in grado di discernere quali dati prendere da inserire in questo campo. Se si avesse un'altra immagine da visualizzare qui, la si potrebbe inserire nella proprietà Image di questo controllo. Se, ad esempio, si avessi un elemento a cui manca un'immagine nel campo immagine, si potrebbe utilizzare una formula per verificare se il campo immagine è vuoto o meno e, in tal caso, visualizzare un'immagine diversa. Il campo immagine vuole semplicemente un'immagine.

Dato che si è già parlato delle etichette, passiamo ai controlli nel modulo.

Controlli e proprietà del modulo

Parliamo rapidamente delle due proprietà più importanti per il modulo: DataSource e Item. DataSource è la tabella di dati connessa al modulo. Questo elemento è importante perché quando il modulo viene aggiornato, il sistema sa dove scrivere i dati. La seconda proprietà importante è Item. In questa app di esempio, è l'elemento selezionato nella raccolta.

All'interno del modulo, quando si seleziona un Campo, quel campo viene rappresentato come DataCard nella visualizzazione struttura ad albero. Ogni DataCard contiene quattro diversi controlli. I due controlli più importanti in DataCard sono il controllo etichetta denominato DataCardKey e il controllo di input di testo denominato DataCardValue. Gli altri due controlli sono facoltativi e dipendono dalla necessità o meno dei dati. StarVisible è un'etichetta di testo inclusiva di un asterisco che appare se si designa il campo come obbligatorio (nel modulo o nei dati). ErrorMessage è un'altra etichetta di testo che appare se si tenta di inviare un modulo a cui manca un input obbligatorio. È possibile esaminare le proprietà Visible per questi controlli. Visible restituisce: "true" o "false". La funzione And() che si vede nel controllo StarVisible significa che entrambe le condizioni, separata da una virgola, devono essere vere perché la funzione restituisca "true".

Molte delle proprietà all'interno dei controlli modulo non sono modificabili a meno che non si "sblocchi" la scheda e questo per una buona ragione. Sebbene un controllo modulo abbia lo scopo di semplificare l'immissione dei dati, è molto meno flessibile ai fini della progettazione. Se si aggiungessero o si rimuovessero campi dal modulo esistente, i controlli si ridimensionerebbero automaticamente e le modifiche apportate potrebbero andare perse (ricordarsi l'input di testo Product Summary). Nei futuri percorsi di apprendimento verrà spiegata meglio la personalizzazione dell'immissione dei dati, ma per ora si eviterà di personalizzare le schede del modulo.

Per i dati del modulo Coffee Machines, l'unico controllo di input non di testo è ImageDataCard. Si noti che questa scheda dispone di un controllo aggiuntivo oltre ai quattro visti in precedenza, il controllo Aggiungi immagine. Il controllo Aggiungi immagine è un controllo multimediale che consente di selezionare un'immagine da un dispositivo (o da una ubicazione online) per sostituire l'immagine esistente. Quando "si tocca o si seleziona per aggiungere un'immagine", appare una finestra popup Apri che consente di selezionare un file immagine e di aprire l'immagine nel modulo.

Due proprietà importanti da conoscere per ciascuna scheda dati del modulo sono la proprietà Default e la proprietà Update. La proprietà Default indica quale colonna dei dati fornisce il valore predefinito per la scheda specifica. La proprietà Update indica da quale controllo di input provengono i dati che Power Apps utilizza per aggiornare i dati di quel record. Quel controllo di input fornirà i dati alla stessa colonna nella proprietà Default, quindi è molto importante che i tipi di dati corrispondano.

Selezionare la scheda Product Summary, solo la scheda e non il campo di input di testo all'interno della scheda. Tenere presente che il valore di Default per la scheda è ThisItem.'Product Summary', ovvero il valore visualizzato nel campo di input di testo DataCardValue. Passare alla proprietà Update per la scheda e notare che questa scheda riceve le informazioni di aggiornamento da DataCardValue.Text della scheda. Pertanto, quando si invia il modulo, Power Apps prende tutto ciò che è scritto nel campo input di testo e aggiorna la scheda "Product Summary" per quell'elemento.

È possibile sbloccare e aggiungere altri controlli in una scheda e modificare la proprietà Update della scheda (ancora), purché il controllo che si intende aggiungere fornisca il tipo di dati previsto dall'origine dati.

Infine, occorre fornire a Power Apps un comando SubmitForm per fare in modo che salvi tutte le modifiche inserite nel modulo. In questo caso, è presente il pulsante "Salva modifiche" sotto il modulo, adatto a questo scopo. Se si seleziona il pulsante (mentre si è in modalità di modifica), la proprietà OnSelect è impostata su SubmitForm(Form1). Questo significa che ogni scheda del modulo aggiornata viene scritta nuovamente nell'origine dati.

Aggiunta di schermate

Finora l'app dispone di una singola schermata. Nelle prossime due unità si aggiungeranno altre funzionalità continuando a personalizzare l'app. Per aggiungere schermate all'app, effettuare i seguenti passaggi:

  1. Selezionare Screen1 nel pannello Visualizzazione struttura ad albero, quindi selezionare il pulsante Nuova schermata dalla barra dei comandi o dalla parte superiore del pannello Visualizzazione struttura ad albero, quindi selezionare il modello di schermata Vuoto.

  2. Ripetere la procedura per aggiungere una terza schermata.

  3. Rinominiamo le tre schermate. A tal fine, fare doppio clic su Screen1 nel pannello Visualizzazione struttura ad albero e rinominare l'elemento in "Catalog Screen".

  4. Ripetere il processo per rinominare Screen2 in "Home Screen" e Screen3 in "Admin Screen".

  5. Infine, si possono riposizionare le schermate nella visualizzazione struttura ad albero. A tale scopo, selezionare il pulsante con i puntini di sospensione, quindi il comando Sposta su.

Ora che si ha una migliore comprensione dei controlli della raccolta e del modulo e si sa come aggiungere schermate all'app, è possibile continuare a modificare l'app per migliorare l'esperienza utente.