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 apertoPopup chiuso e aperto

Schermata base


La prima cosa è inserire un pulsante per l'apertura del popup (btnOpenPopup):
pulsante di aperturapulsante di apertura

Costruzione del popup


Poi si comincia costruire il popup partendo dal rettangolo di sfondo seguito dagli altri elementi:
elementi del popupelementi 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 elementiriordinamento 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 rettangoloinserimento rettangolo
Raggruppiamo

Per semplicità di gestione mettiamo tutti gli elementi in un gruppo (grpPopup):
raggruppamentoraggruppamento
elementi raggruppatielementi 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 posizionatielementi 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 finalerisultato 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
switchswitch