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 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 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 rettangoloRaggruppiamo
Per semplicità di gestione mettiamo tutti gli elementi in un gruppo (grpPopup):
raggruppamento
elementi 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:
X = (Parent.Width - Self.Width) / 2
Y = (Parent.Height - Self.Height) / 2
Width = 600
Height: 130
lblPopupTitle:
X = lblPopupMessage.X
Y = lblPopupMessage.Y - Self.Height - 30
Width = lblPopupMessage.Width
Height: 40
btnPopupOKX = Parent.Width / 2 - Self.Width -30
Y = lblPopupMessage.Y + lblPopupMessage.Height + 30
Width = 160
Height: 40
btnPopupCancelX = Parent.Width / 2 + 30
Y = btnPopupOk.Y
Width = btnPopupOk.Width
Height: btnPopupOk.Height
rectPopupBackgroundX = 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 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
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
OnSelectOnSelect = 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:
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:
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
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:
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