https://github.com/sirbate/component_toast
Componente visual de Power Apps para mostrar toasts personalizables (Success, Error, Info, Warning) con animaciones y duración configurable.
https://github.com/sirbate/component_toast
powerapps yaml
Last synced: about 1 year ago
JSON representation
Componente visual de Power Apps para mostrar toasts personalizables (Success, Error, Info, Warning) con animaciones y duración configurable.
- Host: GitHub
- URL: https://github.com/sirbate/component_toast
- Owner: sirbate
- License: mit
- Created: 2025-04-02T04:40:39.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-02T18:04:08.000Z (about 1 year ago)
- Last Synced: 2025-04-02T18:39:28.467Z (about 1 year ago)
- Topics: powerapps, yaml
- Homepage:
- Size: 17.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
🔔 PowerApps Toast Notification Component
Una alternativa visual y personalizable a las notificaciones por defecto de Power Apps.
Este componente permite mostrar mensajes tipo toast con estilo, color y comportamiento definidos por el usuario.
⚙️ Funcionalidades
- ✅ Notificaciones tipo toast modernas y elegantes
- ✅ Personalización de:
- Título del mensaje
- Cuerpo del mensaje
- Duración en pantalla (en segundos)
- Tipo de notificación:
-
Success✅ -
Error❌ -
Infoℹ️ -
Warning⚠️
-
- ✅ Cada tipo tiene un color visual distintivo
- ✅ Animación de entrada y salida
- ✅ Fácil de reutilizar en cualquier app Power Apps
📸 Capturas de Pantalla
Ejemplo - Toast tipo Success
✅ Correcto
Guardado con éxito.
Este mismo estilo se adapta automáticamente al tipo:
-
Error (rojo ❌) -
Warning (naranja ⚠️) -
Info (azul ℹ️)
🚀 Instalación
📁 Opción 1: Importar desde archivo
- Descarga el archivo
.msappo.mscxdesde la carpeta/component/. - En Power Apps Studio, entra al editor de tu app.
- Ve a Componentes > + Nuevo componente > Importar componente.
- Selecciona el archivo descargado y úsalo en tus pantallas.
📄 Opción 2: Definir vía YAML (para documentación/configuración externa)
Si estás documentando o automatizando este componente vía YAML (por ejemplo, en Docusaurus o GitHub Pages), puedes usar un bloque así para mostrar ejemplos:
toast_component:
ComponentDefinitions:
Bate_Toast:
DefinitionType: CanvasComponent
CustomProperties:
ToastDuration:
PropertyKind: Input
DisplayName: ToastDuration
Description: Duración del toast en milisegundos
DataType: Number
Default: =2000
ToastMessage:
PropertyKind: Input
DisplayName: ToastMessage
Description: Mensaje del toast
DataType: Text
Default: ="Your notification message"
ToastTitle:
PropertyKind: Input
DisplayName: ToastTitle
Description: Título del toast
DataType: Text
Default: ="Text"
ToastType:
PropertyKind: Input
DisplayName: ToastType
Description: Tipo de toast ("Success", "Error", "Warning", "Info")
DataType: Text
Default: =Bate_Toast.ToastTypes.Error
ToastTypes:
PropertyKind: Output
DisplayName: ToastTypes
Description: Tipos de Toast
DataType: Record
ToastVisible:
PropertyKind: Output
DisplayName: ToastVisible
Description: Visible Toast
DataType: Boolean
Properties:
Height: =80
OnReset: |-
=Set(
IsVisible,
Not(IsVisible)
);
If(
Not(IsVisible),
Reset(tim_AutoCloseToast)
)
ToastTypes: |-
={
Success: "Success",
Warning: "Warning",
Error: "Error",
Info: "Info"
}
ToastVisible: =IsVisible
Width: =350
Children:
- tim_AutoCloseToast:
Control: Timer@2.1.0
Properties:
BorderColor: =ColorFade(Self.Fill, -15%)
Color: =RGBA(255, 255, 255, 1)
DisabledBorderColor: =ColorFade(Self.BorderColor, 70%)
DisabledColor: =ColorFade(Self.Fill, 90%)
DisabledFill: =ColorFade(Self.Fill, 70%)
Duration: =Bate_Toast.ToastDuration
Fill: =RGBA(56, 96, 178, 1)
Font: =Font.'Open Sans'
Height: =32
HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
HoverColor: =RGBA(255, 255, 255, 1)
HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%)
OnTimerEnd: |+
=Set(
IsVisible,
false
);
PressedBorderColor: =Self.Fill
PressedColor: =Self.Fill
PressedFill: =Self.Color
Reset: =true
Start: =IsVisible
Visible: =false
X: =60
Y: =60
- cnt_ToastRoot:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
BorderColor: =btn_Color.Fill
BorderThickness: =0.5
DropShadow: =DropShadow.Semilight
Fill: =RGBA(255, 255, 255, 1)
Height: =Parent.Height-4
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
RadiusBottomLeft: =10
RadiusBottomRight: =10
RadiusTopLeft: =10
RadiusTopRight: =10
Width: |+
=Parent.Width-4
X: =2
Y: =2
Children:
- btn_Color:
Control: Classic/Button@2.2.0
Properties:
AlignInContainer: =AlignInContainer.Center
BorderColor: =ColorFade(Self.Fill, -15%)
BorderThickness: =0
Color: =RGBA(0, 0, 0, 0)
DisabledBorderColor: =RGBA(0, 0, 0, 0)
DisabledColor: =RGBA(0, 0, 0, 0)
DisabledFill: =RGBA(0, 0, 0, 0)
DisplayMode: =DisplayMode.View
Fill: |+
=Switch(
Bate_Toast.ToastType,
"Success", ColorValue("#28a745"),
"Error", ColorValue("#dc3545"),
"Warning", ColorValue("#ffc107"),
"Info", ColorValue("#007bff")
)
Font: =Font.'Open Sans'
Height: =Parent.Height
HoverBorderColor: =
HoverColor: =RGBA(0, 0, 0, 0)
HoverFill: =
OnSelect: =
PaddingBottom: =0
PaddingLeft: =0
PaddingRight: =0
PaddingTop: =0
PressedBorderColor: =
PressedColor: =
PressedFill: =
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Text: =
Width: =20
- cnt_ToastIcon:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.SetByContainer
DropShadow: =DropShadow.None
FillPortions: =0
Height: =Parent.Height
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Vertical
LayoutJustifyContent: =LayoutJustifyContent.Center
Width: =40
X: =40
Y: =40
Children:
- img_ToastTypeIcon:
Control: Image@2.2.3
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =40
Image: |+
=Switch(
Bate_Toast.ToastType,
"Success", "data:image/svg+xml;utf8," & EncodeUrl(""),
"Error", "data:image/svg+xml;utf8," & EncodeUrl(""),
"Warning", "data:image/svg+xml;utf8," & EncodeUrl(""),
"Info", "data:image/svg+xml;utf8," & EncodeUrl("")
)
Width: =40
X: =10
Y: =13
- cnt_ToastText:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.SetByContainer
DropShadow: =DropShadow.None
FillPortions: =0
Height: =Parent.Height
LayoutAlignItems: =LayoutAlignItems.Stretch
LayoutDirection: =LayoutDirection.Vertical
LayoutJustifyContent: =LayoutJustifyContent.Center
LayoutMinHeight: =Parent.Height
Width: =200
Children:
- lbl_ToastTitle:
Control: Text@0.0.50
Properties:
Align: ='TextCanvas.Align'.Start
AlignInContainer: =AlignInContainer.Start
Font: =Font.'Segoe UI'
FontColor: =RGBA(0, 0, 0, 1)
Height: |+
=Parent.Height/2
LayoutMinWidth: =Parent.Width
PaddingLeft: =0
Size: =20
Text: =Bate_Toast.ToastTitle
VerticalAlign: =VerticalAlign.Bottom
Weight: ='TextCanvas.Weight'.Bold
Width: =Parent.Width
X: =1
Y: =9
- lbl_ToastMessage:
Control: Text@0.0.50
Properties:
Align: ='TextCanvas.Align'.Start
AlignInContainer: =AlignInContainer.Center
Font: =Font.'Segoe UI'
FontColor: =RGBA(0, 0, 0, 1)
Height: =Parent.Height/2
PaddingLeft: =0
Text: =Bate_Toast.ToastMessage
VerticalAlign: =VerticalAlign.Top
Weight: ='TextCanvas.Weight'.Medium
Width: =Parent.Width
X: =1055
Y: =25
- cnt_ToastAction:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
DropShadow: =DropShadow.None
FillPortions: =0
LayoutMinHeight: =Parent.Height
Width: =40
Children:
- ico_CloseToast:
Control: Classic/Icon@2.5.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Color: =RGBA(101, 101, 101, 1)
Height: =20
Icon: =Icon.Cancel
OnSelect: '=Set(IsVisible, false); '
Width: =20
X: =7
Y: =8
📦 Ejemplo de uso del componente
Toast.ShowToast("Guardado correctamente", "Success", "Éxito", 3)Parámetros:
Mensaje, Tipo, Título, Duración (segundos)🧠 Notas Técnicas
- El componente usa una colección interna para controlar el estado de visibilidad.
- Animaciones creadas con
TransitionyVisible. - Colores definidos en variables globales:
varToastSuccessColorvarToastErrorColorvarToastInfoColorvarToastWarningColor
- Reutilizable en múltiples pantallas sin duplicar lógica.
👨💻 Autor
Tu Nombre
LinkedIn •
Portafolio •
tucorreo@dominio.com
🪪 Licencia
MIT — puedes usar, modificar y compartir libremente este componente.
¡Dame crédito si te sirvió! 😊