Realizaremos una ventana tipo Popup con un componente, podremos personalizar el título, mensaje y una imagen alusiva al mensaje.
Para esto crearemos un componente en Power Apps llamando "ventana_emergente".
Crearemos un Container con las siguientes medidas:
Habilitaremos el Acces app scope, al habilitarlo la propiedad o variables se pueden usar en toda la aplicación, incluso fuera del componente.
Las propiedades personalizadas también tienen Scope:
- Input: se puede recibir desde fuera del componente (como parámetro).
- Output: se puede enviar hacia afuera del componente (como resultado).
- Behavior: define acciones o funciones que se ejecutan desde fuera del componente (por ejemplo, un botón dentro del componente dispara algo en la pantalla que lo contiene).
En caso de no habilitar el Acces app scope, cuando enviemos la variable global con un valor false para cerrar la ventana emergente, no se podrá leer.
Dentro de Container agregaremos los siguientes elementos:
- Icon_cerrar
- Label_titulo
- Label_mensaje
- Image_mensaje
Ahora crearemos las siguientes propiedades:
- PopupTitle (Text, Input)
- PopupMessage (Text, Input)
- PopupImage (Text, Input)
- PopupVisible (Boolean Output)
Todas las propiedades Text serán creadas iguales.
La unica diferente sera PopupVisible, ya que será de salida y en ella se enviará el valor false para cerrar la ventana.
Ahora llamaremos las propiedades creadas y en cada una llamaremos una variable que aún no ha sido creada, por eso marcara error.
- PopupImage: varPopupImage
- PopupMessage: varPopupMessage
- PopupTitle: varPopupTitle
- PopupVisible: varPopupVisible
Ahora asignaremos los valores a cada elemento.
- OnSelect: Set(varPopupVisible, false);
- Text: ventana_emergente.PopupTitle
Text: ventana_emergente.PopupMessage
Image: Switch(ventana_emergente.PopupImage,
"OK",
"data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
<!-- Círculo dibujándose -->
<circle cx='50' cy='50' r='40'
fill='none'
stroke='#4CAF50'
stroke-width='6'
stroke-dasharray='251'
stroke-dashoffset='251'>
<!-- Animación del trazo del círculo -->
<animate attributeName='stroke-dashoffset'
from='251' to='0'
dur='1s' fill='freeze'/>
</circle>
<!-- Círculo con brillo pulsante (aparece después de dibujarse) -->
<circle cx='50' cy='50' r='40'
fill='none'
stroke='#4CAF50'
stroke-width='6'
opacity='0'>
<animate attributeName='opacity'
values='0;1;0.4;1;0.4'
dur='2s'
begin='1s'
repeatCount='indefinite'/>
</circle>
<!-- Check animado -->
<path d='M30 50 L45 65 L70 35'
fill='none'
stroke='#4CAF50'
stroke-width='6'
stroke-linecap='round'
stroke-linejoin='round'
stroke-dasharray='60'
stroke-dashoffset='60'>
<!-- Animación de trazo del check (comienza después del círculo) -->
<animate attributeName='stroke-dashoffset'
from='60' to='0'
dur='0.8s'
begin='1s'
fill='freeze'/>
<!-- Flotación del check -->
<animateTransform attributeName='transform'
type='translate'
values='0 0; 0 -4; 0 0; 0 4; 0 0'
dur='3s'
begin='1.8s'
repeatCount='indefinite'
additive='sum'/>
</path>
</svg>")
,
"CANCELA",
"data:image/svg+xml;utf8,"&EncodeUrl("<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
<!-- Grupo círculo + X -->
<g>
<!-- Círculo principal estático -->
<circle cx='50' cy='50' r='40'
fill='none'
stroke='#F44336'
stroke-width='6'
opacity='0.9'/>
<!-- X línea 1 -->
<path d='M35 35 L65 65'
fill='none'
stroke='#F44336'
stroke-width='6'
stroke-linecap='round'
stroke-dasharray='42'
stroke-dashoffset='42'>
<animate attributeName='stroke-dashoffset'
from='42' to='0'
dur='0.6s'
fill='freeze'/>
</path>
<!-- X línea 2 -->
<path d='M65 35 L35 65'
fill='none'
stroke='#F44336'
stroke-width='6'
stroke-linecap='round'
stroke-dasharray='42'
stroke-dashoffset='42'>
<animate attributeName='stroke-dashoffset'
from='42' to='0'
dur='0.6s'
begin='0.3s'
fill='freeze'/>
</path>
<!-- Flotación continua -->
<animateTransform attributeName='transform'
type='translate'
values='0 0; 0 -4; 0 0; 0 4; 0 0'
dur='3s'
begin='0.9s'
repeatCount='indefinite'/>
</g>
</svg>")
)
Ahora crearemos el Screen donde llamaremos el componente.
Insertamos el componente, presionamos + Insert/Custom/ventana_emergente.
En el evento OnVisible del Screen, tecleamos las variables que insertamos en el componente.
- Set(varPopupVisible, false);
- Set(varPopupTitle, "");
- Set(varPopupMessage, "");
- Set(varPopupImage, "");
Crearemos un botón, el cual llama el componente.
En el evento Visible del componente agregamos la variable.
Si queremos que el componente se muestre a la mitad de la pantalla sin importar el dispositivo donde se visualice, tecleamos en los eventos X y Y la siguiente formula.
- X: (Parent.Width - Self.Width) / 2
- Y: (Parent.Height - Self.Height) / 2
Donde verticalmente: (Parent.Height - Self.Height) / 2
- Parent.Height → altura del screen.
- Self.Height → altura del control.
Restar Self.Height y dividir entre 2 lo coloca justo en el medio.
Donde horizontalmente: (Parent.Width - Self.Width) / 2
- Parent.Width → ancho del screen.
- Self.Width → ancho del control.
En el evento OnSelect del botón agregamos las variables con los parámetros que se visualizarán en el componente.
- Set(varPopupTitle, "TITULO");
- Set(varPopupMessage, "MENSAJE");
- Set(varPopupVisible, true);
- Set(varPopupImage, "OK");
Ejecutamos el Screen y presionamos el botón.
