Dynamic Toast - Documentation (O11)

Stable version 1.0.0 (Compatible with OutSystems 11)

Uploaded

on 11 Sep (5 days ago)

0.0

(0 ratings)

Documentation

1.0.0

📖 Documentation — Dynamic Toast EN

🔔 Introduction

Dynamic Toast is a component for OutSystems Reactive that allows displaying fully customizable notification messages.
It supports HTML content, different positions, alignments, sizes, configurable close button, and links that can open either in the same tab or in a new tab.

⚙️ Parameters

Parameter	Type	🇵🇹 Description	🇬🇧 Description
Type	Text	Define o tipo da mensagem (success, error, warning, info, default).	Defines toast type (success, error, warning, info, default).
Message	Text/HTML	Conteúdo da notificação (texto simples ou HTML formatado).	Notification content (plain text or formatted HTML).
Position	Text	Localização vertical (top ou bottom).	Vertical placement (top or bottom).
Align	Text	Alinhamento horizontal (left, center, right).	Horizontal alignment (left, center, right).
Duration	Number(ms)	Tempo em milissegundos que o toast fica visível.	Time in milliseconds the toast remains visible.
Width	Number(px)	(Opcional) Define a largura fixa. Se não definido, adapta-se ao conteúdo.	(Optional) Fixed width. If not defined, adjusts to content.
Height	Number(px)	(Opcional) Define a altura fixa. Se não definido, adapta-se ao conteúdo.	(Optional) Fixed height. If not defined, adjusts to content.
CloseAlign	Text	Posição do botão de fechar (left, right, top, bottom).	Close button placement (left, right, top, bottom).
NewTab	Boolean	Se true, links abrem em nova aba; se false, na mesma página.	If true, links open in new tab; if false, in same page.

🎯 Features

Support for HTML content
Smooth entry/exit animations
Progress bar showing display time
Close button configurable in multiple positions
Support for internal or external links
Adaptive sizes or fixed dimensions
Different colors/styles per toast type

Action

Close button - Left

Close button - Right

Close button - Top

Close button - Bottom

Parâmetro	Tipo	🇵🇹 Descrição	🇬🇧 Description
Type	Texto	Define o tipo da mensagem (success, error, warning, info, default).	Defines toast type (success, error, warning, info, default).
Message	Texto/HTML	Conteúdo da notificação (texto simples ou HTML formatado).	Notification content (plain text or formatted HTML).
Position	Texto	Localização vertical (top ou bottom).	Vertical placement (top or bottom).
Align	Texto	Alinhamento horizontal (left, center, right).	Horizontal alignment (left, center, right).
Duration	Número(ms)	Tempo em milissegundos que o toast fica visível.	Time in milliseconds the toast remains visible.
Width	Número(px)	(Opcional) Define a largura fixa. Se não definido, adapta-se ao conteúdo.	(Optional) Fixed width. If not defined, adjusts to content.
Height	Número(px)	(Opcional) Define a altura fixa. Se não definido, adapta-se ao conteúdo.	(Optional) Fixed height. If not defined, adjusts to content.
CloseAlign	Texto	Posição do botão de fechar (left, right, top, bottom).	Close button placement (left, right, top, bottom).
NewTab	Booleano	Se true, links abrem em nova aba; se false, na mesma página.	If true, links open in new tab; if false, in same page.

Toasts in action (info, success, warning, error)

Info
Success
Warning
Error

Different Alignments

Center

Left
Right



Positioning Types

Top

Bottom

🚀 How to use

Import the component into your OutSystems Reactive project.
Use the Client Action ShowToast by passing the desired parameters.
Customize according to your scenario (e.g., Type = "success", Align = "center", Duration = 4000, Position = "top", CloseAlign = "bottom", NewTab = "true").

📖 Documentação — Dynamic Toast PT
🔔 Introdução
O Dynamic Toast é um componente para OutSystems Reactive que permite exibir mensagens de notificação totalmente personalizáveis.
Suporta conteúdo em HTML, diferentes posições, alinhamentos, tamanhos, botão de fechar configurável e links que podem abrir na mesma aba ou em nova aba.
⚙️ Parâmetros
Parâmetro
Tipo
🇵🇹 Descrição
🇬🇧 Description
Type
Texto
Define o tipo da mensagem (success, error, warning, info, default).
Defines toast type (success, error, warning, info, default).
Message
Texto/HTML
Conteúdo da notificação (texto simples ou HTML formatado).
Notification content (plain text or formatted HTML).
Position
Texto
Localização vertical (top ou bottom).
Vertical placement (top or bottom).
Align
Texto
Alinhamento horizontal (left, center, right).
Horizontal alignment (left, center, right).
Duration
Número(ms)
Tempo em milissegundos que o toast fica visível.
Time in milliseconds the toast remains visible.
Width
Número(px)
(Opcional) Define a largura fixa. Se não definido, adapta-se ao conteúdo.
(Optional) Fixed width. If not defined, adjusts to content.
Height
Número(px)
(Opcional) Define a altura fixa. Se não definido, adapta-se ao conteúdo.
(Optional) Fixed height. If not defined, adjusts to content.
CloseAlign
Texto
Posição do botão de fechar (left, right, top, bottom).
Close button placement (left, right, top, bottom).
NewTab
Booleano
Se true, links abrem em nova aba; se false, na mesma página.
If true, links open in new tab; if false, in same page.
🎯 Funcionalidades
Suporte a HTML no conteúdo
Animações suaves de entrada/saída
Barra de progresso indicando tempo de exibição
Botão de fechar configurável em várias posições
Suporte a links internos ou externos
Tamanhos adaptáveis ou definidos manualmente
Diferentes cores/estilos por tipo de toast
Action

Botão de fechar à esquerda

Botão de fechar à direita

Botão de fechar no topo
Botão de fechar na Bottom

Toasts em execução (info, success, warning, error)

Info
Success
Warning
Error

Diferentes alinhamentos

Centro
Esquerda
Direita

Tipos de Posicionamento

Topo

Fundo


🚀 Como usar

Importa o componente para o teu projeto OutSystems Reactive.
Usa a Client Action ShowToast passando os parâmetros desejados.
Personaliza conforme o cenário (ex.: Type = "success", Align = "center", Duration = 4000,Position = “ top”,CloseAlign= “bottom” Newtab= “true”).