Nativamente Power Apps non ha nessun supporto per i popup, se si ha la necessità di averne uno bisogna costruirselo. In questo esempio mostro come creare un popup modale con gli elementi a disposizione in Power Apps.
Struttura del popup
Un popup fondamentalmente è costituito da:
uno sfondo semi trasparente (rettangolo - rectPopupBackground)
un titolo (label - lblPopupTitle)
un eventuale testo aggiuntivo (label - lblPopupMessage)
un pulsante di conferma / salvataggio (button - btn PopupOK)
un pulsante di cancellazione / chiusura del popup (button - btnPopupCancel)
Popup chiuso e aperto
Schermata base
La prima cosa è inserire un pulsante per l'apertura del popup (btnOpenPopup):pulsante di apertura
Costruzione del popup
Poi si comincia costruire il popup partendo dal rettangolo di sfondo seguito dagli altri elementi:elementi del popup
Non è importante la posizione degli elementi in quanto verranno poi posizionati in automatico.
Solo il rettangolo di sfondo dovrà essere posizionato manualmente per occupare tutto lo schermo e dovrà essere, come ordine di visualizzazione, sotto agli altri elementi.
riordinamento elementiUna nota, se non trovate il rettangolo nei dell'editor, è normale, viene considerata un icona e si trova in fondo al menù a tendina icons:inserimento rettangolo
Raggruppiamo
Per semplicità di gestione mettiamo tutti gli elementi in un gruppo (grpPopup):raggruppamentoelementi raggruppatiquesto ci permetterà di visualizzare o meno il popup agendo sulla proprietà Visible del gruppo.
Attenzione, al momento non c'è modo di aggiungere un elemento ad un gruppo, l'unica alternativa e fare Ungrup aggiungere un elemento, riposizionarlo se serve, e ricreare il gruppo. Oltre a reimpostare eventuali formule applicate sul gruppo.
Posizionare gli elementi in automatico
Sfruttando la possibilità di assegnare ad ogni proprietà di un controllo una formula, possiamo centrare e posizionare automaticamente gli elementi sullo schermo tenendo come riferimento lblPopupMessage.
L'unica cosa che va impostata è la larghezza e l'altezza del testo del messaggio (lblPopupMessage), tutti gli altri elementi si posizioneranno in funzione di quest'ultimo.
Partendo da lblPopupMessage inseriamo queste formule:
Power Apps
X = (Parent.Width - Self.Width) / 2
Y = (Parent.Height - Self.Height) / 2
Width = 600
Height: 130
lblPopupTitle:
Power Apps
X = lblPopupMessage.X
Y = lblPopupMessage.Y - Self.Height - 30
Width = lblPopupMessage.Width
Height: 40
btnPopupOK
Power Apps
X = Parent.Width / 2 - Self.Width -30
Y = lblPopupMessage.Y + lblPopupMessage.Height + 30
Width = 160
Height: 40
btnPopupCancel
Power Apps
X = Parent.Width / 2 + 30
Y = btnPopupOk.Y
Width = btnPopupOk.Width
Height: btnPopupOk.Height
rectPopupBackground
Power Apps
X = 0
Y = 0
Width = Parent.Width
Height: Parent.Height
Fill = RGBA(68, 68, 68, 0.85)
a questo punto dovresti avere una situazione più ordinata:elementi posizionati
Gestione popup
La visualizzazione o meno del popup sarà controllata da una variabile di contesto di tipo boolean (PopupIsOpen), mentre altre due variabili imposteranno i testi da visualizzare (PopupTitle e PopupMessage).
Prima però va gestito come verrà visualizzato il gruppo grpPopup, ovvero tramite la proprietà Visible
Power Apps
Visible = PopupIsOpen
a questo punto possiamo tornare al pulsante inserito nella schermata di base (btnOpenPopup) e inserire la formula per visualizzare il popup tramite il suo metodo OnSelect
Power Apps
OnSelect = UpdateContext({PopupTitle: "Popup PowerApps", PopupMessage: "Esempio di popup modale realizzato in Power Apps
by sgart", PopupIsOpen: true })
Con queste istruzioni imposto le variabili di contesto per far visualizzare il popup (variabile PopupIsOpen = true) e i testi.
L'ultimo passo è gestire la chiusura del popup tramite i pulsanti btnPopupOK e btnPopupCancel, impostando la variabile PopupIsOpen a false:
Power Apps
OnSelect = UpdateContext({PopupIsOpen: false })
risultato finale
Se lo si desidera si può gestire la chiusura del popup anche cliccando sullo sfondo (rectPopupBackground) assegnando la stessa espressione a OnSelect
Gestire le azioni
Per ora abbiamo un popup che si apre e si chiude ma non fa nessuna azione.
Nel metodo OnSelect del pulsante btnPopupOK, andranno inserite le opportune azione da compiere. Ad esempio per aprite un sito alla pressione del tasto OK:
La sintassi del linguaggio indicata è riferita a un browser in inglese, se avete le impostazioni in italiano le cose cambiano. Ad esempio la virgola va sostituita con un punto e virgola e il punto e virgola di separazione delle istruzioni, con due punti e virgola consecutivi (;;).
Se lo stesso popup lo uso per più azioni diverse, allora va introdotta un altra variabile, PopupType e modificata l'apertura
Power Apps
btnOpenPopup.OnSelect = UpdateContext({PopupType: "type1", PopupTitle: "Popup PowerApps", PopupMessage: "Esempio di popup modale realizzato in Power Apps
by sgart", PopupIsOpen: true })
questa variabile, sul metodo OnSelect del pulsante OK, farà da discriminante su cosa eseguire tramite l'istruzione SWITCH:
