Creare un Popup in Power Apps
15 giugno 2020
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.
Popup chiuso e aperto
pulsante di aperturaelementi del popupriordinamento 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 rettangoloraggruppamentoelementi raggruppatiquesto ci permetterà di visualizzare o meno il popup agendo sulla proprietà Visible del gruppo.
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:
lblPopupTitle:
btnPopupOK
btnPopupCancel
rectPopupBackground
a questo punto dovresti avere una situazione più ordinata:elementi posizionati
Prima però va gestito come verrà visualizzato il gruppo grpPopup, ovvero tramite la proprietà Visible
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
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:
risultato finale
Nel metodo OnSelect del pulsante btnPopupOK, andranno inserite le opportune azione da compiere.
Ad esempio per aprite un sito alla pressione del tasto OK:
Se lo stesso popup lo uso per più azioni diverse, allora va introdotta un altra variabile, PopupType e modificata l'apertura
questa variabile, sul metodo OnSelect del pulsante OK, farà da discriminante su cosa eseguire tramite l'istruzione SWITCH:
switch
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 apertoSchermata base
La prima cosa è inserire un pulsante per l'apertura del popup (btnOpenPopup):
pulsante di aperturaCostruzione del popup
Poi si comincia costruire il popup partendo dal rettangolo di sfondo seguito dagli altri elementi:
elementi del popupNon è 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 elementi
inserimento rettangoloRaggruppiamo
Per semplicità di gestione mettiamo tutti gli elementi in un gruppo (grpPopup):
raggruppamento
elementi raggruppatiAttenzione, 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
Power Apps
X = lblPopupMessage.X
Y = lblPopupMessage.Y - Self.Height - 30
Width = lblPopupMessage.Width
Height: 40
Power Apps
X = Parent.Width / 2 - Self.Width -30
Y = lblPopupMessage.Y + lblPopupMessage.Height + 30
Width = 160
Height: 40
Power Apps
X = Parent.Width / 2 + 30
Y = btnPopupOk.Y
Width = btnPopupOk.Width
Height: btnPopupOk.Height
Power Apps
X = 0
Y = 0
Width = Parent.Width
Height: Parent.Height
Fill = RGBA(68, 68, 68, 0.85)
elementi posizionatiGestione 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
Power Apps
OnSelect = UpdateContext({PopupTitle: "Popup PowerApps", PopupMessage: "Esempio di popup modale realizzato in Power Apps
by sgart", PopupIsOpen: true })
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 finaleSe 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:
Power Apps
btnPopupOK.OnSelect = UpdateContext({PopupIsOpen: false }); Launch("https://www.sgart.it")
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 })
Power Apps
btnPopupOk.OnSelect = UpdateContext({PopupIsOpen: false });
Switch(PopupType,
"type1", Launch("https://www.sgart.it"),
"type2", Launch("https://sito2"),
Launch("https://sito/boh") // default
)
Per andare a capo in un espressione premi SHIFT + ENTER
switch