Notyf

Notyf is a minimalistic JavaScript library for toast notifications: it is responsive, A11Y‑friendly, dependency‑free, and very small (around 3 KB). The OutSystems component acts as a wrapper, allowing you to use Notyf in a low‑code, OutSystems‑friendly way without dealing with the underlying implementation details.

Official GitHub: https://github.com/caroso1222/notyf

Features

Usage

Advanced Setup

If the Notyf block is not suitable for handling initialization in a given context, three helper Client Actions are available to support the initialization process:

LoadNotyfScript

Ensures that the Notyf JavaScript library is loaded.
It checks whether the Notyf JS script is already present on the page and, if not, dynamically injects it.

As an alternative, the Notyf JavaScript file may be added directly to the Required Scripts of the Module, Page, or Block, since the Notyf library is exposed as a public script resource.

LoadNotyfStyleSheet

Ensures that the Notyf CSS stylesheet is available on the page. It verifies whether the Notyf CSS has already been loaded and, if not, dynamically injects it into the document.

As an alternative, the contents of the notyf.min.css resource included in the module may be copied and added to the Application Theme.

CreateNotyfInstance

Initializes the global Notyf instance. This helper configures the default custom notification types for Warning and Info, mapping them to their respective FontAwesome icons.

Disclaimer:
This Client Action also acts as a lazy-loading fallback for the FontAwesome library.

FontAwesome Dependency Note

By default, the OutSystems platform only loads the FontAwesome WebFont when at least one Icon Widget is present on the screen.

If a developer uses only the Notyf component on a screen (without any other icon widgets), the custom Warning and Info notification types, which rely on the fa-exclamation-triangle and fa-info-circle icons, would otherwise render as broken icons (empty squares).

To prevent this scenario, the CreateNotyfInstance helper ensures that FontAwesome is loaded when required.

Client Actions

DismissAllNotifications

Dismiss all the active notifications.

DismissNotification

Dismiss a specific notification.

Parameters

Notyf (Object): Notification to dismiss.

ShowErrorNotification

Triggers a visual error notification. It should be used to communicate critical failures, server-side exceptions (e.g., inside ErrorHandler), or blocking validations that prevent the user from proceeding.

Parameters

Message (Text): The text content to display in the notification.
Duration (Integer): Time in milliseconds before the notification disappears. (Optional, default value: 5000)
Options (Structure):A structure defining behavior and positioning. (Optional)

• Behavior (Structure):Controls the interactive and aesthetic features of the notification instance.
  • Ripple (Boolean): If True, enables the Material Design "ripple" effect when the notification appears or is clicked. Setting this to False results in a flat, static appearance. (Default value: False)
  • Dismissable (Boolean): If True, renders a close button (X) inside the notification, allowing the user to dismiss it manually. (Default value: True)
• Position (Structure):Defines the X and Y coordinates where the notification will appear on the screen.
  • Horizontal (Text): Controls the horizontal alignment (X-axis). Valid values: "left", "center", "right". (Default value: "center")
  • Vertical (Text): Controls the vertical alignment (Y-axis). Valid values: "top", "bottom". (Default value: "top")

ShowInfoNotification

Triggers a visual informational notification. Ideal for providing neutral system feedback, status updates, or hints that represent neither success nor failure (e.g., "Syncing data..." or "New version available").

Parameters

Message (Text): The text content to display in the notification.
Duration (Integer): Time in milliseconds before the notification disappears. (Optional, default value: 5000)
Options (Structure):A structure defining behavior and positioning. (Optional)

• Behavior (Structure):Controls the interactive and aesthetic features of the notification instance.
  • Ripple (Boolean): If True, enables the Material Design "ripple" effect when the notification appears or is clicked. Setting this to False results in a flat, static appearance. (Default value: False)
  • Dismissable (Boolean): If True, renders a close button (X) inside the notification, allowing the user to dismiss it manually. (Default value: True)
• Position (Structure):Defines the X and Y coordinates where the notification will appear on the screen.
  • Horizontal (Text): Controls the horizontal alignment (X-axis). Valid values: "left", "center", "right". (Default value: "center")
  • Vertical (Text): Controls the vertical alignment (Y-axis). Valid values: "top", "bottom". (Default value: "top")

ShowSuccessNotification

Triggers a visual success notification. Use this action to explicitly confirm the positive completion of a user operation (e.g., "Record saved successfully" or "Email sent").

Parameters

Message (Text): The text content to display in the notification.
Duration (Integer): Time in milliseconds before the notification disappears. (Optional, default value: 5000)
Options (Structure):A structure defining behavior and positioning. (Optional)

• Behavior (Structure):Controls the interactive and aesthetic features of the notification instance.
  • Ripple (Boolean): If True, enables the Material Design "ripple" effect when the notification appears or is clicked. Setting this to False results in a flat, static appearance. (Default value: False)
  • Dismissable (Boolean): If True, renders a close button (X) inside the notification, allowing the user to dismiss it manually. (Default value: True)
• Position (Structure):Defines the X and Y coordinates where the notification will appear on the screen.
  • Horizontal (Text): Controls the horizontal alignment (X-axis). Valid values: "left", "center", "right". (Default value: "center")
  • Vertical (Text): Controls the vertical alignment (Y-axis). Valid values: "top", "bottom". (Default value: "top")

ShowWarningNotification

Triggers a visual warning notification. Use it to alert the user about situations requiring attention, potential risks, or non-blocking validation issues (e.g., "Session expiring soon" or "Unsaved changes").

Parameters

Message (Text): The text content to display in the notification.
Duration (Integer): Time in milliseconds before the notification disappears. (Optional, default value: 5000)
Options (Structure):A structure defining behavior and positioning. (Optional)

• Behavior (Structure):Controls the interactive and aesthetic features of the notification instance.
  • Ripple (Boolean): If True, enables the Material Design "ripple" effect when the notification appears or is clicked. Setting this to False results in a flat, static appearance. (Default value: False)
  • Dismissable (Boolean): If True, renders a close button (X) inside the notification, allowing the user to dismiss it manually. (Default value: True)
• Position (Structure):Defines the X and Y coordinates where the notification will appear on the screen.
  • Horizontal (Text): Controls the horizontal alignment (X-axis). Valid values: "left", "center", "right". (Default value: "center")
  • Vertical (Text): Controls the vertical alignment (Y-axis). Valid values: "top", "bottom". (Default value: "top")

Warning

Notyf doesn't sanitize the content when rendering your message. To avoid injection attacks, you should either sanitize your HTML messages or make sure you don't render user generated content on the notifications.

License

Notyf is under MIT licence.