Creare un Popup in Power Apps

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 elementi

Una 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):

raggruppamento

elementi raggruppati

questo 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

btnPopupOK

X = Parent.Width / 2 - Self.Width -30
Y = lblPopupMessage.Y + lblPopupMessage.Height + 30 
Width = 160
Height: 40

btnPopupCancel

X = Parent.Width / 2 + 30
Y = btnPopupOk.Y
Width = btnPopupOk.Width
Height: btnPopupOk.Height

rectPopupBackground

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

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

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:

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:

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